- switching from firestore to realtime DB

- implement debouncing tactic to sync data
- display sync indicator

src/pages/app/builder.js

@@ -1,10 +1,29 @@
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
 import Artboard from "../../components/builder/center/Artboard";
 import LeftSidebar from "../../components/builder/left/LeftSidebar";
 import RightSidebar from "../../components/builder/right/RightSidebar";
+import LoadingScreen from "../../components/router/LoadingScreen";
 import Wrapper from "../../components/shared/Wrapper";
+import DatabaseContext from "../../contexts/DatabaseContext";
+import ResumeContext from "../../contexts/ResumeContext";
+
+const Builder = ({ user, id }) => {
+  const [loading, setLoading] = useState(true);
+  const { getResume } = useContext(DatabaseContext);
+  const { dispatch } = useContext(ResumeContext);
+
+  useEffect(() => {
+    (async () => {
+      const resume = await getResume(id);
+      dispatch({ type: "set_data", payload: resume });
+      setLoading(false);
+    })();
+  }, [id, getResume, dispatch]);
+
+  if (loading) {
+    return <LoadingScreen type="Resume" />;
+  }
 
-const Builder = ({ id }) => {
   return (
     <Wrapper>
       <div className="h-screen grid grid-cols-11">

src/pages/app/dashboard.js

@@ -1,12 +1,20 @@
-import React, { useContext } from "react";
+import firebase from "gatsby-plugin-firebase";
+import React from "react";
+import { useListVals } from "react-firebase-hooks/database";
 import CreateResume from "../../components/dashboard/CreateResume";
 import ResumePreview from "../../components/dashboard/ResumePreview";
 import TopNavbar from "../../components/dashboard/TopNavbar";
+import LoadingScreen from "../../components/router/LoadingScreen";
 import Wrapper from "../../components/shared/Wrapper";
-import DashboardContext from "../../contexts/DashboardContext";
 
-const Dashboard = () => {
-  const { resumes } = useContext(DashboardContext);
+const Dashboard = ({ user }) => {
+  const [resumes, loading] = useListVals(
+    firebase.database().ref(`users/${user.uid}/resumes`)
+  );
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
 
   return (
     <Wrapper>
@@ -16,11 +24,9 @@ const Dashboard = () => {
         <div className="grid grid-cols-6 gap-8">
           <CreateResume />
 
-          {resumes
-            .filter((x) => x !== null)
-            .map((x) => (
-              <ResumePreview key={x.id} resume={x} />
-            ))}
+          {resumes.map((x) => (
+            <ResumePreview key={x.id} resume={x} />
+          ))}
         </div>
       </div>
     </Wrapper>