From e2790ce08966205b9d1323d49ad1ffda415afc38 Mon Sep 17 00:00:00 2001 From: Sashen Jayathilaka <99184393+SashenJayathilaka@users.noreply.github.com> Date: Thu, 10 Nov 2022 09:56:46 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=95=20Features(#30)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 17 +++++++++-------- components/Feed.tsx | 37 ++++++++++++++++++++++++++----------- components/Post.tsx | 17 +++-------------- firebase/firebase.ts | 2 +- package-lock.json | 15 +++++++++++++++ package.json | 1 + pages/auth/login.tsx | 12 +++++++++--- pages/index.tsx | 20 ++++++++++++++++---- pages/profile/[id].tsx | 14 ++++++++++---- yarn.lock | 5 +++++ 10 files changed, 95 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 2e01bbc..91329d1 100644 --- 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) -

View Demo ยท @@ -33,20 +32,22 @@
+ ## :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) + ## :star2: About the Project diff --git a/components/Feed.tsx b/components/Feed.tsx index 926d3a2..e6016fd 100644 --- 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) => ( - - ))} - + + + + + + + + + + + + ) : ( -
+ {posts.map((post) => (
))} -
+ )} ); diff --git a/components/Post.tsx b/components/Post.tsx index c135581..7ae7487 100644 --- 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 = ({ 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" > - - - + Share diff --git a/firebase/firebase.ts b/firebase/firebase.ts index 0cf46da..7659984 100644 --- 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 }; \ No newline at end of file +export { app, auth, firestore, storage }; diff --git a/package-lock.json b/package-lock.json index 2ff63a6..09590bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,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" }, @@ -5162,6 +5163,14 @@ "react-dom": ">=16" } }, + "node_modules/react-icons": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", + "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -9612,6 +9621,12 @@ "goober": "^2.1.10" } }, + "react-icons": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", + "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index d232f48..abd1cd5 100644 --- 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 index c910abc..e9c06e8 100644 --- 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 = () => { }, [user]); return ( -
+ Facebook Clone Login @@ -85,7 +91,7 @@ const Login: React.FC = () => {
- + ); }; export default Login; diff --git a/pages/index.tsx b/pages/index.tsx index bab9fad..5e0eb2e 100644 --- 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 ( -
+ Facebook Clone @@ -44,9 +51,14 @@ const Home: NextPage = () => {
{isMessenger ? ( -
+ -
+ ) : ( <> {user && ( @@ -62,7 +74,7 @@ const Home: NextPage = () => {
{user ? : } -
+ ); }; diff --git a/pages/profile/[id].tsx b/pages/profile/[id].tsx index ede8133..8bfdaea 100644 --- 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 = () => { }, [user]); return ( -
+ Facebook Clone @@ -30,7 +36,7 @@ const ProfilePage: React.FC = () => { -
+ ); }; export default ProfilePage; diff --git a/yarn.lock b/yarn.lock index 80fa071..446dff3 100644 --- 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"