🔃 updated user interface(#14)

.gitignore

@@ -30,3 +30,7 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

components/Feed.js

@@ -3,22 +3,24 @@ import MiniProfile from "./MiniProfile";
 import Posts from "./Posts";
 import Stories from "./Stories";
 import Suggestions from "./Suggestions";
-import { useSession } from "next-auth/react";
+import { useAuthState } from "react-firebase-hooks/auth";
+
+import { auth } from "../firebase";
 
 function Feed() {
-  const { data: session } = useSession();
+  const [user] = useAuthState(auth);
 
   return (
     <main
       className={`grid grid-cols-1 md:grid-cols-2 md:max-w-3xl xl:grid-cols-3 xl:max-w-6xl mx-auto
-      ${!session && "!grid-cols-1 !max-w-3xl"}`}
+      ${!user && "!grid-cols-1 !max-w-3xl"}`}
     >
       <section className="col-span-2">
         <Stories />
         <Posts />
       </section>
 
-      {session && (
+      {user && (
         <section className="hidden xl:inline-grid md:col-span-1">
           <div className="fixed top-20">
             <MiniProfile />

components/Header.js

@@ -11,15 +11,25 @@ import {
 import { useRecoilState } from "recoil";
 import { HomeIcon } from "@heroicons/react/solid";
 import { modalState } from "../atoms/modalAtom";
-import { signIn, signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { signOut } from "firebase/auth";
+import { useSignInWithGoogle } from "react-firebase-hooks/auth";
+
+import { auth } from "../firebase";
 
 function Header() {
   const [open, setOpen] = useRecoilState(modalState);
   //const open = useRecoilValue(modalState);
   const router = useRouter();
+  const [signInWithGoogle, userCred, loading, error] =
+    useSignInWithGoogle(auth);
+
+  const [user] = useAuthState(auth);
 
-  const { data: session } = useSession();
+  const logout = async () => {
+    await signOut(auth);
+  };
 
   return (
     <div className="shadow-sm border-b big-white sticky top-0 z-58">
@@ -60,7 +70,7 @@ function Header() {
           <HomeIcon onClick={() => router.push("/")} className="navBtn" />
           <MenuIcon className="h-6 md:hidden cursor-pointer" />
 
-          {session ? (
+          {user ? (
             <>
               <div className="relative navBtn">
                 <PaperAirplaneIcon className="navBtn rotate-45" />
@@ -77,14 +87,14 @@ function Header() {
               <HeartIcon className="navBtn" />
 
               <img
-                onClick={signOut}
+                onClick={logout}
                 className="h-10 rounded-full cursor-pointer"
-                src={session.user.image}
+                src={user?.photoURL}
                 alt=""
               />
             </>
           ) : (
-            <button onClick={signIn}>sign In</button>
+            <button onClick={() => signInWithGoogle()}>sign In</button>
           )}
         </div>
       </div>

components/MiniProfile.js

@@ -1,21 +1,28 @@
 /* eslint-disable @next/next/no-img-element */
 import React from "react";
-import { signOut, useSession } from "next-auth/react";
+import { signOut } from "firebase/auth";
+import { useAuthState } from "react-firebase-hooks/auth";
+
+import { auth } from "../firebase";
 
 function MiniProfile() {
-  const { data: session } = useSession();
+  const [user] = useAuthState(auth);
+
+  const logout = async () => {
+    await signOut(auth);
+  };
   return (
     <div className="flex items-center justify-between mt-14 ml-10">
       <img
         className="w-16 h-16 rounded-full border p-[2px]"
-        src={session?.user.image}
+        src={user?.photoURL}
         alt=""
       />
       <div className="flex-1 mx-4">
-        <h2 className="font-bold">{session?.user?.username}</h2>
+        <h2 className="font-bold">{user?.displayName}</h2>
         <h3 className="text-sm text-gray-400">Welcome to Instagram</h3>
       </div>
-      <button onClick={signOut} className="text-blue-400 text-sm font-semibold">
+      <button onClick={logout} className="text-blue-400 text-sm font-semibold">
         Sign Out
       </button>
     </div>

components/Modal.js

@@ -4,7 +4,7 @@ import { useRecoilState } from "recoil";
 import { modalState } from "../atoms/modalAtom";
 import { CameraIcon } from "@heroicons/react/outline";
 import { Dialog, Transition } from "@headlessui/react";
-import db, { storage } from "../firebase";
+import { auth, firestore, storage } from "../firebase";
 import {
   addDoc,
   collection,
@@ -13,15 +13,15 @@ import {
   updateDoc,
 } from "firebase/firestore";
 import { ref, getDownloadURL, uploadString } from "firebase/storage";
-import { useSession } from "next-auth/react";
+import { useAuthState } from "react-firebase-hooks/auth";
 
 function Modal() {
+  const [user] = useAuthState(auth);
   const [open, setOpen] = useRecoilState(modalState);
   const filePickerRef = useRef(null);
   const captionRef = useRef(null);
   const [loading, setLoading] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
-  const { data: session } = useSession();
 
   const uploadPost = async () => {
     if (loading) return;
@@ -34,10 +34,10 @@ function Modal() {
       // get a download URL from fb storage with the post ID
       // get a downloaded URL from fb storage and update the original post with image
 
-      const docRef = await addDoc(collection(db, "posts"), {
-        username: session.user.username,
+      const docRef = await addDoc(collection(firestore, "posts"), {
+        username: user?.displayName,
         caption: captionRef.current.value,
-        profileImage: session.user.image,
+        profileImage: user?.photoURL,
         timestamp: serverTimestamp(),
       });
 
@@ -48,7 +48,7 @@ function Modal() {
       await uploadString(imageRef, selectedFile, "data_url").then(
         async (snapshot) => {
           const downloadUrl = await getDownloadURL(imageRef);
-          await updateDoc(doc(db, "posts", docRef.id), {
+          await updateDoc(doc(firestore, "posts", docRef.id), {
             image: downloadUrl,
           });
         }

components/Post.js

@@ -21,12 +21,12 @@ import {
   orderBy,
   setDoc,
 } from "firebase/firestore";
-import db from "../firebase";
-import { useSession } from "next-auth/react";
+import { auth, firestore } from "../firebase";
 import Moment from "react-moment";
+import { useAuthState } from "react-firebase-hooks/auth";
 
 function Post({ id, username, userImage, img, caption }) {
-  const { data: session } = useSession();
+  const [user] = useAuthState(auth);
   const [comment, setComment] = useState([]);
   const [comments, setComments] = useState([]);
   const [likes, setLikes] = useState([]);
@@ -36,37 +36,34 @@ function Post({ id, username, userImage, img, caption }) {
     () =>
       onSnapshot(
         query(
-          collection(db, "posts", id, "comments"),
+          collection(firestore, "posts", id, "comments"),
           orderBy("timestamp", "desc")
         ),
         (snapshot) => setComments(snapshot.docs)
       ),
-    [db, id]
+    [firestore, id]
   );
 
   useEffect(
     () =>
-      onSnapshot(collection(db, "posts", id, "likes"), (snapshot) =>
+      onSnapshot(collection(firestore, "posts", id, "likes"), (snapshot) =>
         setLikes(snapshot.docs)
       ),
-    [db, id]
+    [firestore, id]
   );
 
   useEffect(
-    () =>
-      setHasLikes(
-        likes.findIndex((like) => like.id === session?.user?.uid) !== -1
-      ),
+    () => setHasLikes(likes.findIndex((like) => like.id === user?.uid) !== -1),
     [likes]
   );
 
   const likePost = async () => {
     try {
       if (hasLikes) {
-        await deleteDoc(doc(db, "posts", id, "likes", session.user.uid));
+        await deleteDoc(doc(firestore, "posts", id, "likes", user?.uid));
       } else {
-        await setDoc(doc(db, "posts", id, "likes", session.user.uid), {
-          username: session.user.username,
+        await setDoc(doc(firestore, "posts", id, "likes", user?.uid), {
+          username: user?.displayName,
         });
       }
     } catch (error) {
@@ -81,10 +78,10 @@ function Post({ id, username, userImage, img, caption }) {
       const commentToSend = comment;
       setComment("");
 
-      await addDoc(collection(db, "posts", id, "comments"), {
+      await addDoc(collection(firestore, "posts", id, "comments"), {
         comment: commentToSend,
-        username: session.user.username,
-        userImage: session.user.image,
+        username: user?.displayName,
+        userImage: user?.photoURL,
         timestamp: serverTimestamp(),
       });
     } catch (error) {
@@ -105,7 +102,7 @@ function Post({ id, username, userImage, img, caption }) {
         <DotsHorizontalIcon className="h-5 cursor-pointer" />
       </div>
       <img src={img} className="object-cover w-full" alt="" />
-      {session && (
+      {user && (
         <div className="flex justify-between px-4 pt-4">
           <div className="flex space-x-4">
             {hasLikes ? (
@@ -157,7 +154,7 @@ function Post({ id, username, userImage, img, caption }) {
         </div>
       )}
 
-      {session && (
+      {user && (
         <form className="flex items-center p-4">
           <EmojiHappyIcon className="h-7" />
           <input

components/Posts.js

@@ -2,20 +2,20 @@
 import { useEffect, useState } from "react";
 import Post from "./Post";
 import { onSnapshot, collection, query, orderBy } from "firebase/firestore";
-import db from "../firebase";
+import { firestore } from "../firebase";
 
 function Posts() {
   const [posts, setPosts] = useState([]);
 
   useEffect(
     () =>
       onSnapshot(
-        query(collection(db, "posts"), orderBy("timestamp", "desc")),
+        query(collection(firestore, "posts"), orderBy("timestamp", "desc")),
         (snapshot) => {
           setPosts(snapshot.docs);
         }
       ),
-    [db]
+    [firestore]
   );
 
   return (

components/Stories.js

@@ -1,30 +1,13 @@
 import { faker } from "@faker-js/faker";
 import { useEffect, useState } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
+
 import Story from "./Story";
-import { useSession } from "next-auth/react";
+import { auth } from "../firebase";
 
 function Stories() {
+  const [user] = useAuthState(auth);
   const [suggestions, setSuggestions] = useState([]);
-  const { data: session } = useSession();
-
-  //const USERS: User[] = [];
-  /*
-  function createRandomUser() {
-    return {
-      userId: faker.datatype.uuid(),
-      username: faker.internet.userName(),
-      email: faker.internet.email(),
-      avatar: faker.image.avatar(),
-      password: faker.internet.password(),
-      birthdate: faker.date.birthdate(),
-      registeredAt: faker.date.past(),
-    };
-  }
-
-  Array.from({ length: 20 }).forEach(() => {
-    USERS.push(createRandomUser());
-  });
-*/
 
   useEffect(() => {
     const suggestions = [...Array(20)].map((_, i) => ({
@@ -47,9 +30,7 @@ function Stories() {
     overflow-x-scroll scrollbar-thin
     scrollbar-thumb-black"
     >
-      {session && (
-        <Story img={session.user.image} username={session.user.username} />
-      )}
+      {user && <Story img={user?.photoURL} username={user?.displayName} />}
 
       {suggestions.map((profile) => (
         <Story

firebase.js

@@ -1,25 +1,24 @@
-// Import the functions you need from the SDKs you need
-//import { initializeApp } from "firebase/app";
-import { initializeApp, getApps, getApp } from "firebase/app";
+import { initializeApp, getApp, getApps } from "firebase/app";
+import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
 import { getStorage } from "firebase/storage";
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
 
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  apiKey: "AIzaSyARXDiYjznCzi26fvt00cEXDp-88f6zNTc",
+  authDomain: "messenger-mern-clone-dca82.firebaseapp.com",
+  projectId: "messenger-mern-clone-dca82",
+  storageBucket: "messenger-mern-clone-dca82.appspot.com",
+  messagingSenderId: "468616337977",
+  appId: "1:468616337977:web:1e80cf727273ca38288be8",
+  measurementId: "G-R8YCSSJ33J",
 };
 // Initialize Firebase
 const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
-const db = getFirestore();
-const storage = getStorage();
+const firestore = getFirestore(app);
+const auth = getAuth(app);
+const storage = getStorage(app);
 
-export { app, storage };
-export default db;
+// export
+export { app, auth, firestore, storage };