hooks fix

jdgamble555 · Oct 16, 2022 · 96cea34 · 96cea34
1 parent e96faa7
commit 96cea34
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 18 deletions.
diff --git a/components/HeartButton.tsx b/components/HeartButton.tsx
@@ -12,7 +12,6 @@ export default function Heart({ postRef }: any) {
     // Listen to heart document for currently logged in user
     const heartRef = doc(getFirestore(), postRef.path, 'hearts', uid);
     const [heartDoc] = useDocument(heartRef);
-    console.log(heartDoc);
 
     // Create a user-to-post relationship
     const addHeart = async () => {

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -2,12 +2,22 @@ import Link from 'next/link';
 import Img from 'next/image';
 import { useContext } from 'react';
 import { UserContext } from '@lib/context';
+import { useRouter } from 'next/router';
+import { signOut } from 'firebase/auth';
+import { auth } from '@lib/firebase';
 
 // Top navbar
 export default function Navbar(): JSX.Element {
 
     const { user, username } = useContext(UserContext);
 
+    const router = useRouter();
+
+    const signOutNow = () => {
+        signOut(auth);
+        router.reload();
+    }
+
     return (
         <nav className="navbar">
             <ul>
@@ -21,6 +31,9 @@ export default function Navbar(): JSX.Element {
                 {username && (
                     <>
                         <li className="push-left">
+                            <button onClick={signOutNow}>Sign Out</button>
+                        </li>
+                        <li>
                             <Link passHref href="/admin">
                                 <button className="btn-blue">Write Posts</button>
                             </Link>

diff --git a/lib/hooks.ts b/lib/hooks.ts
@@ -1,5 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 //import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth } from '@lib/firebase';
 import {
@@ -46,55 +45,64 @@ export function useAuthState(auth: Auth): any {
         return onIdTokenChanged(auth, (_user) => {
             setCurrentUser(_user ?? null);
         });
-    }, []);
+    }, [auth]);
     return [user];
 }
 
 export function useDocument(ref: DocumentReference): any {
     const [_doc, _setDoc] = useState<DocumentData | null>(null);
 
+    const path = ref.path;
+    const firestore = ref.firestore;
+
     useEffect(() => {
         // turn off realtime subscription
-        return onSnapshot(ref, (snap) => {
+        return onSnapshot(doc(firestore, path), (snap) => {
             _setDoc(snap.exists() ? snap : null);
         });
-    }, []);
+    }, [path, firestore]);
     return [_doc];
 }
 
 export function useDocumentData(ref: DocumentReference): any {
     const [_doc, setDoc] = useState<DocumentData | null>(null);
 
+    const path = ref.path;
+    const firestore = ref.firestore;
+
     useEffect(() => {
         // turn off realtime subscription
-        return onSnapshot(ref, (snap) => {
+        return onSnapshot(doc(firestore, path), (snap) => {
             setDoc(snap.exists() ? snap.data() : null);
         });
-    }, []);
+    }, [path, firestore]);
     return [_doc];
 }
 
 export function useDocumentDataOnce(ref: DocumentReference): any {
     const [_doc, setDoc] = useState<DocumentData | null>(null);
 
+    const path = ref.path;
+    const firestore = ref.firestore;
+
     useEffect(() => {
         // turn off realtime subscription
-        getDoc(ref).then(snap => {
+        getDoc(doc(firestore, path)).then(snap => {
             setDoc(snap.exists() ? snap.data() : null);
         });
         return;
-    }, []);
+    }, [path, firestore]);
     return [_doc];
 }
 
 export function useCollection(ref: Query): any {
-    const [_doc, setDoc] = useState<QuerySnapshot | null>(null);
-
+    const [_col, setCol] = useState<QuerySnapshot | null>(null);
+    const colRef = useRef(ref);
     useEffect(() => {
         // turn off realtime subscription
-        return onSnapshot(ref, (snap) => {
-            setDoc(!snap.empty ? snap : null);
+        return onSnapshot(colRef.current, (snap) => {
+            setCol(!snap.empty ? snap : null);
         });
     }, []);
-    return [_doc];
+    return [_col];
 }
diff --git a/pages/[username]/[slug].tsx b/pages/[username]/[slug].tsx
@@ -62,7 +62,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export default function Post(props: any): JSX.Element {
   const postRef = doc(getFirestore(), props.path);
   const [realtimePost] = useDocumentData(postRef);
-  //console.log(realtimePost);
 
   const post = realtimePost || props.post;
 

diff --git a/pages/admin/[slug].tsx b/pages/admin/[slug].tsx
@@ -33,7 +33,6 @@ function PostManager() {
     // const postRef = firestore.collection('users').doc(auth.currentUser.uid).collection('posts').doc(slug);
     const postRef = doc(getFirestore(), 'users', uid, 'posts', slug);
     const [post] = useDocumentDataOnce(postRef);
-    //console.log(post);
 
     return (
         <main className={styles.container}>

diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
@@ -38,7 +38,6 @@ function PostList(): JSX.Element {
     const postQuery = query(ref, orderBy('createdAt'))
 
     const [querySnapshot] = useCollection(postQuery);
-    //console.log(querySnapshot);
 
     const posts: any = querySnapshot?.docs.map((doc: any) => doc.data());