🆕 Features(#30)

SashenJayathilaka · Nov 10, 2022 · e2790ce · e2790ce
1 parent 24b0089
commit e2790ce
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,6 @@
 ![](https://img.shields.io/github/issues/SashenJayathilaka/Facebook-Clone)
 ![](https://img.shields.io/github/last-commit/SashenJayathilaka/Facebook-Clone)
 
-
 <h4>
     <a href="https://project-delta-brown.vercel.app">View Demo</a>
   <span> · </span>
@@ -33,20 +32,22 @@
 <br />
 
 <!-- Table of Contents -->
+
 ## :notebook_with_decorative_cover: Table of Contents
 
 - [About the Project](#star2-about-the-project)
-  * [Screenshots](#camera-screenshots)
-  * [Tech Stack](#space_invader-tech-stack)
-  * [Environment Variables](#key-environment-variables)
+  - [Screenshots](#camera-screenshots)
+  - [Tech Stack](#space_invader-tech-stack)
+  - [Environment Variables](#key-environment-variables)
 - [Getting Started](#toolbox-getting-started)
-  * [Prerequisites](#bangbang-prerequisites)
-  * [Installation](#gear-installation)
-  * [Run Locally](#running-run-locally)
-  * [Deployment](#triangular_flag_on_post-deployment)
+  - [Prerequisites](#bangbang-prerequisites)
+  - [Installation](#gear-installation)
+  - [Run Locally](#running-run-locally)
+  - [Deployment](#triangular_flag_on_post-deployment)
 - [Contact](#handshake-contact)
 
 <!-- About the Project -->
+
 ## :star2: About the Project
 
 <!-- Screenshots -->

diff --git a/components/Feed.tsx b/components/Feed.tsx
@@ -1,5 +1,7 @@
 import { onSnapshot, query, collection, orderBy } from "firebase/firestore";
 import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
 import { firestore } from "../firebase/firebase";
 import Post from "./Post";
 import PostSkeleton from "./Skeleton";
@@ -25,22 +27,35 @@ export default function Feed({}: Props) {
     setTimeout(() => {
       if (posts) {
         setLoading(false);
-      } else {
-        setLoading(true);
-      }
-    }, 6000);
+      } else return;
+    }, 3000);
   }, [posts]);
 
   return (
     <>
       {loading ? (
-        <>
-          {posts.map((data) => (
-            <PostSkeleton key={data.id} loading={loading} />
-          ))}
-        </>
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+        >
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+          <PostSkeleton loading={loading} />
+        </motion.div>
       ) : (
-        <div>
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+        >
           {posts.map((post) => (
             <div key={post.id}>
               <Post
@@ -54,7 +69,7 @@ export default function Feed({}: Props) {
               />
             </div>
           ))}
-        </div>
+        </motion.div>
       )}
     </>
   );

diff --git a/components/Post.tsx b/components/Post.tsx
@@ -22,6 +22,8 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 
+import { RiShareForwardLine } from "react-icons/ri";
+
 import { auth, firestore } from "../firebase/firebase";
 
 const reactionImages = [
@@ -382,20 +384,7 @@ const Post: React.FC<PostProps> = ({
                 whileTap={{ scale: 0.9 }}
                 className="w-1/3 flex space-x-2 justify-center items-center hover:bg-gray-100 dark:hover:bg-gray-800 text-xl py-2 rounded-lg cursor-pointer text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3"
-                  />
-                </svg>
+                <RiShareForwardLine className="w-6 h-6" />
 
                 <span className="text-sm font-semibold">Share</span>
               </motion.div>

diff --git a/firebase/firebase.ts b/firebase/firebase.ts
@@ -20,4 +20,4 @@ const auth = getAuth(app);
 const storage = getStorage(app);
 
 // export
-export { app, auth, firestore, storage };
+export { app, auth, firestore, storage };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.0.3",
     "react-hot-toast": "^2.4.0",
+    "react-icons": "^4.6.0",
     "tailwind-scrollbar": "^2.0.1",
     "tailwind-scrollbar-hide": "^1.1.7"
   },

diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
@@ -7,8 +7,10 @@ import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 import { useSignInWithGoogle } from "react-firebase-hooks/auth";
 import { useAuthState } from "react-firebase-hooks/auth";
-import { auth } from "../../firebase/firebase";
+import { motion } from "framer-motion";
 import LockPersonIcon from "@mui/icons-material/LockPerson";
+
+import { auth } from "../../firebase/firebase";
 import SignInWithFacebook from "../../components/SignInWithFacebook";
 
 type LoginProps = {};
@@ -26,7 +28,11 @@ const Login: React.FC<LoginProps> = () => {
   }, [user]);
 
   return (
-    <div>
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+    >
       <Head>
         <title>Facebook Clone Login</title>
         <meta name="description" content="Generated by create next app" />
@@ -85,7 +91,7 @@ const Login: React.FC<LoginProps> = () => {
           </div>
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 export default Login;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,6 +2,8 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import { useState, useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { motion } from "framer-motion";
+
 import Feed from "../components/Feed";
 import LeftMenu from "../components/LeftMenu";
 import MainContent from "../components/MainContent";
@@ -24,7 +26,12 @@ const Home: NextPage = () => {
   }, [user]);
 
   return (
-    <div className="bg-[#f7f7f7] dark:bg-[#18191a]">
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      className="bg-[#f7f7f7] dark:bg-[#18191a]"
+    >
       <Head>
         <title>Facebook Clone</title>
         <meta name="description" content="Generated by create next app" />
@@ -44,9 +51,14 @@ const Home: NextPage = () => {
 
         <div className="w-full lg:w-2/3 xl:w-2/5 pt-32 lg:pt-16 px-2 ">
           {isMessenger ? (
-            <div className="flex flex-col items-center justify-center h-auto min-h-screen bg-gray-100 text-gray-800 dark:bg-[#28282B]">
+            <motion.div
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              className="flex flex-col items-center justify-center h-auto min-h-screen bg-gray-100 text-gray-800 dark:bg-[#28282B]"
+            >
               <Messenger />
-            </div>
+            </motion.div>
           ) : (
             <>
               {user && (
@@ -62,7 +74,7 @@ const Home: NextPage = () => {
         </div>
         {user ? <RightMenu isMessenger={isMessenger} /> : <NotUserMenu />}
       </section>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/pages/profile/[id].tsx b/pages/profile/[id].tsx
@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import Head from "next/head";
+import { motion } from "framer-motion";
+
 import NavBar from "../../components/NavBar";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "../../firebase/firebase";
 import Profile from "../../components/profilePage/Profile";
-import { useRouter } from "next/router";
-import Head from "next/head";
 
 type ProfilePageProps = {};
 
@@ -19,7 +21,11 @@ const ProfilePage: React.FC<ProfilePageProps> = () => {
   }, [user]);
 
   return (
-    <div>
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+    >
       <Head>
         <title>Facebook Clone</title>
         <meta name="description" content="Generated by create next app" />
@@ -30,7 +36,7 @@ const ProfilePage: React.FC<ProfilePageProps> = () => {
       </Head>
       <NavBar isShow={false} />
       <Profile />
-    </div>
+    </motion.div>
   );
 };
 export default ProfilePage;
diff --git a/yarn.lock b/yarn.lock
@@ -2989,6 +2989,11 @@
   dependencies:
     "goober" "^2.1.10"
 
+"react-icons@^4.6.0":
+  "integrity" "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g=="
+  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz"
+  "version" "4.6.0"
+
 "react-is@^16.13.1", "react-is@^16.7.0":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"