- switching from firestore to realtime DB

- implement debouncing tactic to sync data
- display sync indicator

src/components/builder/right/RightNavbar.js

@@ -1,8 +1,12 @@
-import React from "react";
-import { MdPerson } from "react-icons/md";
+import cx from "classnames";
+import React, { useContext } from "react";
+import { MdPerson, MdSync } from "react-icons/md";
+import DatabaseContext from "../../../contexts/DatabaseContext";
 import styles from "./RightNavbar.module.css";
 
 const RightNavbar = () => {
+  const { isUpdating } = useContext(DatabaseContext);
+
   return (
     <div className={styles.container}>
       <div className="grid grid-cols-1 gap-6">
@@ -11,6 +15,8 @@ const RightNavbar = () => {
           size="20px"
         />
       </div>
+
+      <MdSync size="24px" className={cx("mt-auto", { spin: isUpdating })} />
     </div>
   );
 };

src/components/dashboard/ResumePreview.js

@@ -4,14 +4,14 @@ import moment from "moment";
 import React, { useContext, useState } from "react";
 import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
 import { toast } from "react-toastify";
-import DashboardContext from "../../contexts/DashboardContext";
+import DatabaseContext from "../../contexts/DatabaseContext";
 import ModalContext from "../../contexts/ModalContext";
 import styles from "./ResumePreview.module.css";
 
 const ResumePreview = ({ resume }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const { createResumeModal } = useContext(ModalContext);
-  const { deleteResume } = useContext(DashboardContext);
+  const { deleteResume } = useContext(DatabaseContext);
 
   const handleOpen = () => navigate(`/app/builder/${resume.id}`);
 
@@ -26,7 +26,7 @@ const ResumePreview = ({ resume }) => {
   };
 
   const handleDelete = () => {
-    deleteResume(resume);
+    deleteResume(resume.id);
     toast(`${resume.name} was deleted successfully`);
     setAnchorEl(null);
   };
@@ -70,11 +70,9 @@ const ResumePreview = ({ resume }) => {
         </Menu>
       </div>
       <div className={styles.meta}>
-        <p>{resume.name}</p>
+        <span>{resume.name}</span>
         {resume.updatedAt && (
-          <span>
-            Last updated {moment(resume.updatedAt.toDate()).fromNow()}
-          </span>
+          <span>Last updated {moment(resume.updatedAtR).fromNow()}</span>
         )}
       </div>
     </div>

src/components/dashboard/ResumePreview.module.css

@@ -31,10 +31,10 @@
   @apply flex flex-col text-center items-center;
 }
 
-.resume > .meta p {
+.resume > .meta span:first-child {
   @apply mt-3 font-medium leading-normal;
 }
 
-.resume > .meta span {
+.resume > .meta span:last-child {
   font-size: 10px;
 }

src/components/router/LoadingScreen.js

@@ -1,17 +1,18 @@
+import { Fade, Modal } from "@material-ui/core";
 import React from "react";
-import Modal from "@material-ui/core/Modal";
-import Loader from "react-loader-spinner";
 import Logo from "../shared/Logo";
 
-const LoadingScreen = () => {
+const LoadingScreen = ({ type }) => {
   return (
     <Modal open hideBackdrop>
-      <div className="w-screen h-screen flex justify-center items-center outline-none">
-        <div className="flex flex-col items-center">
-          <Logo size="48px" className="mb-4" />
-          <Loader type="ThreeDots" color="#AAA" height={32} width={48} />
+      <Fade in>
+        <div className="w-screen h-screen flex justify-center items-center outline-none">
+          <div className="flex flex-col items-center">
+            <Logo size="48px" className="mb-4" />
+            <span className="font-medium opacity-75">Fetching {type}</span>
+          </div>
         </div>
-      </div>
+      </Fade>
     </Modal>
   );
 };

src/components/router/PrivateRoute.js

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
 import { navigate } from "gatsby";
+import React, { useContext } from "react";
 import UserContext from "../../contexts/UserContext";
 import LoadingScreen from "./LoadingScreen";
 
@@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
   const { user, loading } = useContext(UserContext);
 
   if (loading) {
-    return <LoadingScreen />;
+    return <LoadingScreen type="User" />;
   }
 
   if (!user) {
@@ -15,7 +15,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
     return null;
   }
 
-  return <Component {...props} />;
+  return <Component user={user} {...props} />;
 };
 
 export default PrivateRoute;

src/components/shared/Input.js

@@ -20,7 +20,7 @@ const Input = ({
   const { state, dispatch } = useContext(ResumeContext);
 
   const inputProps = (path) => ({
-    value: get(state, path),
+    value: get(state, path) || "",
     onChange: (e) => {
       dispatch({
         type: "on_input",