Fix rooms bug. Remove context - should fetch on every route change.

isomorpheric · Feb 3, 2021 · 520550e · 520550e
1 parent 9da45cb
commit 520550e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 95 deletions.
diff --git a/lib/useRooms.js b/lib/useRooms.js
@@ -1,24 +1,12 @@
 import { useRouter } from 'next/router';
-import { createContext, useContext, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useAuth } from './auth';
 import firebase from './firebase';
 
-const roomsContext = createContext();
-
-export const RoomsProvider = ({ children }) => {
-  const rooms = useProvideRooms();
-  return (
-    <roomsContext.Provider value={rooms}>{children}</roomsContext.Provider>
-  );
-};
-
-export const useRooms = () => {
-  return useContext(roomsContext);
-};
-
-const useProvideRooms = () => {
+const useRooms = () => {
   const [loading, setLoading] = useState(false);
   const [rooms, setRooms] = useState([]);
+  const [roomsFetched, setRoomsFetched] = useState(false);
   const auth = useAuth();
   const router = useRouter();
 
@@ -28,26 +16,29 @@ const useProvideRooms = () => {
   const docID = router.asPath.substring(route.lastIndexOf('/') + 1);
 
   const fetchRooms = async () => {
-    console.log('fetching rooms');
     setLoading(true);
-    await db
+    const roomsResult = await db
       .collection('groups')
       .doc(docID)
       .collection('rooms')
       .get()
       .then((snapShot) => {
-        console.log('got Data');
+        console.log('Got roomsssss ', snapShot);
         snapShot.forEach((doc) => {
           console.log('Got room: ', doc.data());
           setRooms((rooms) => [...rooms, doc.data()]);
         });
         setLoading(false);
+        console.log('ROOMS FETCHED IS ', roomsFetched);
+        setRoomsFetched(true);
       })
       .catch((err) => {
         console.log(err);
         setLoading(false);
         return err;
       });
+
+    return roomsResult;
   };
 
   // Receives object from react-hook-form
@@ -80,74 +71,27 @@ const useProvideRooms = () => {
       });
   };
 
-  // const createRoom = async (values) => {
-  //   setLoading(true);
-
-  //   return await db
-  //     .collection('groups')
-  //     .doc(docName)
-  //     .set(
-  //       {
-  //         name: values.name,
-  //         shortDescription: values.shortDescription,
-  //         description: values.description,
-  //         author: auth.user.uid,
-  //         authorDisplay: auth.userData.username,
-  //         members: [auth.userData.email],
-  //         slug: docName,
-  //       },
-  //       { merge: true }
-  //     )
-  //     .then(() => {
-  //       console.log('Done Creating Group');
-  //       const memberships = auth.userData.memberships ?? [];
-  //       const newMemberships = [...memberships, docName];
-  //       db.collection('users')
-  //         .doc(auth.user.uid)
-  //         .set({ memberships: newMemberships }, { merge: true })
-  //         .then(() => {
-  //           console.log('User membership saved');
-  //         })
-  //         .catch((err) => {
-  //           console.log('ERROR SAVING USER DATA: ', err);
-  //           setLoading(false);
-  //         });
-  //       setLoading(false);
-  //     })
-  //     .catch((err) => {
-  //       console.log(err);
-  //       console.log(`ERROR: ${err}`);
-  //       setLoading(false);
-  //     });
-  // };
-
-  // const fetchGroups = async () => {
-  //   const userEmail = auth.userData.email;
-  //   return await db
-  //     .collection('groups')
-  //     .where('members', 'array-contains', userEmail)
-  //     .get()
-  //     .then((snapshot) => {
-  //       let results = [];
-  //       snapshot.forEach((doc) => {
-  //         results.push(doc.data());
-  //       });
-  //       console.log('FETCHED RESULTS: ', results);
-  //       return results;
-  //     })
-  //     .catch((err) => {
-  //       console.log('ERROR: ', err);
-  //     });
-  // };
-
-  // useEffect(() => {
-  //   fetchRooms();
-  // }, []);
+  useEffect(() => {
+    if (
+      auth.user &&
+      auth.userData &&
+      !roomsFetched &&
+      router.route.startsWith('/groups/')
+    ) {
+      console.log(router.route);
+      console.log('fetching rooms now........');
+      fetchRooms();
+      console.log('AUTH IS ==> ', auth);
+      console.log('AUTH DATA IS ==>', auth.userData);
+    }
+  }, [auth.user, auth.userData, router.route]);
 
   return {
     createRoom,
     fetchRooms,
     rooms: rooms,
-    loading,
+    roomsLoading: loading,
   };
 };
+
+export default useRooms;
diff --git a/pages/_app.js b/pages/_app.js
@@ -8,7 +8,6 @@ import { AuthProvider } from '../lib/auth';
 import Layout from '../components/layout/Layout';
 import AuthGuard from '../lib/AuthGuard';
 import { SnackbarProvider } from 'notistack';
-import { RoomsProvider } from '../lib/useRooms';
 
 export default function MyApp(props) {
   const { Component, pageProps, router } = props;
@@ -45,13 +44,11 @@ export default function MyApp(props) {
             maxSnack={3}
             anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           >
-            <RoomsProvider>
-              <AuthGuard>
-                <div>
-                  {getLayout(<Component {...pageProps} key={router.key} />)}
-                </div>
-              </AuthGuard>
-            </RoomsProvider>
+            <AuthGuard>
+              <div>
+                {getLayout(<Component {...pageProps} key={router.key} />)}
+              </div>
+            </AuthGuard>
           </SnackbarProvider>
         </AuthProvider>
       </ThemeProvider>

diff --git a/pages/groups/[id].js b/pages/groups/[id].js
@@ -11,12 +11,12 @@ import { useSnackbar } from 'notistack';
 import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { useAuth } from '../../lib/auth';
-import { useRooms } from '../../lib/useRooms';
 import marked from 'marked';
 import firebase from '../../lib/firebase';
 import RoomsGrid from '../../components/groups/RoomsGrid';
 import { ChevronLeft } from '@material-ui/icons';
 import Link from 'next/link';
+import useRooms from '../../lib/useRooms';
 
 const db = firebase.firestore();
 
@@ -49,18 +49,18 @@ const GroupDetail = () => {
   const [editMode, setEditMode] = useState(false);
   const [editFieldValue, setEditFieldValue] = useState('');
   const auth = useAuth();
-  const consumeRooms = useRooms();
   const [groupInfo, setGroupInfo] = useState(null);
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const [loading, setLoading] = useState(true);
 
   const { id } = router.query;
 
-  const { rooms, fetchRooms } = consumeRooms;
+  const { rooms, roomsLoading } = useRooms();
 
   useEffect(() => {
-    fetchRooms();
-  }, []);
+    console.log('Rooms is ==> ', rooms);
+    console.log('Loading is ==>', roomsLoading);
+  }, [roomsLoading]);
 
   useEffect(() => {
     async function getGroupInfo() {