make query fetching more predictable in survey list

Ryczko · May 8, 2022 · 91040b9 · 91040b9
1 parent 5cccfa0
commit 91040b9
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/src/Pages/SurveyListPage/SurveyListPage.tsx b/src/Pages/SurveyListPage/SurveyListPage.tsx
@@ -7,6 +7,8 @@ import {
   Timestamp,
   where,
   orderBy,
+  DocumentData,
+  Query,
 } from 'firebase/firestore';
 import { useDocumentTitle } from '../../Hooks/useDocumentTitle';
 import Header from '../../Components/Header';
@@ -15,17 +17,26 @@ import Loader from '../../Components/Loader';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { formatFirebaseDateWithoutHours } from '../../Utils/convertTime';
 import withAnimation from '../../HOC/withAnimation';
+import { useEffect, useState } from 'react';
 
 function SurveyListPage() {
   useDocumentTitle('Surveys');
 
   const [user] = useAuthState(auth);
-  const surveysCollectionRef = collection(db, 'surveys');
-  const q = query(
-    surveysCollectionRef,
-    where('creatorId', '==', user?.uid),
-    orderBy('startDate', 'desc')
-  );
+
+  const [q, setQ] = useState<Query<DocumentData>>();
+
+  useEffect(() => {
+    const surveysCollectionRef = collection(db, 'surveys');
+    setQ(
+      query(
+        surveysCollectionRef,
+        where('creatorId', '==', user?.uid),
+        orderBy('startDate', 'desc')
+      )
+    );
+  }, [user]);
+
   const [surveysCollection, loading, error] = useCollection(q);
 
   return (