- implement lists

- implement generic sections
- implement list actions
- implement error handlers

src/pages/app/builder.js

@@ -1,4 +1,6 @@
+import { navigate } from "gatsby";
 import React, { useContext, useEffect, useState } from "react";
+import { toast } from "react-toastify";
 import Artboard from "../../components/builder/center/Artboard";
 import LeftSidebar from "../../components/builder/left/LeftSidebar";
 import RightSidebar from "../../components/builder/right/RightSidebar";
@@ -6,7 +8,7 @@ import LoadingScreen from "../../components/router/LoadingScreen";
 import DatabaseContext from "../../contexts/DatabaseContext";
 import ResumeContext from "../../contexts/ResumeContext";
 
-const Builder = ({ user, id }) => {
+const Builder = ({ id }) => {
   const [loading, setLoading] = useState(true);
   const { getResume } = useContext(DatabaseContext);
   const { dispatch } = useContext(ResumeContext);
@@ -14,13 +16,23 @@ const Builder = ({ user, id }) => {
   useEffect(() => {
     (async () => {
       const resume = await getResume(id);
+
+      if (!resume) {
+        navigate("/app/dashboard");
+        toast.error(
+          `The resume you were looking for does not exist anymore... or maybe it never did?`
+        );
+        return null;
+      }
+
       dispatch({ type: "set_data", payload: resume });
       setLoading(false);
     })();
-  }, [id, getResume, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
   if (loading) {
-    return <LoadingScreen message="Loading Resume..." />;
+    return <LoadingScreen />;
   }
 
   return (

src/pages/app/dashboard.js

@@ -1,5 +1,6 @@
 import firebase from "gatsby-plugin-firebase";
 import React, { useEffect, useState } from "react";
+import { Helmet } from "react-helmet";
 import CreateResume from "../../components/dashboard/CreateResume";
 import ResumePreview from "../../components/dashboard/ResumePreview";
 import TopNavbar from "../../components/dashboard/TopNavbar";
@@ -10,26 +11,38 @@ const Dashboard = ({ user }) => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    const ref = `users/${user.uid}/resumes`;
+
     firebase
       .database()
-      .ref(`users/${user.uid}/resumes`)
+      .ref(ref)
       .on("value", (snapshot) => {
         if (snapshot.val()) {
           const resumes = [];
           const data = snapshot.val();
           Object.keys(data).forEach((key) => resumes.push(data[key]));
           setResumes(resumes);
-          setLoading(false);
         }
+
+        setLoading(false);
       });
+
+    return () => {
+      firebase.database().ref(ref).off();
+    };
   }, [user]);
 
   if (loading) {
-    return <LoadingScreen message="Connecting to database..." />;
+    return <LoadingScreen />;
   }
 
   return (
     <div>
+      <Helmet>
+        <title>Dashboard | Reactive Resume</title>
+        <link rel="canonical" href="https://rxresu.me/app/dashboard" />
+      </Helmet>
+
       <TopNavbar />
 
       <div className="container mt-12">

src/pages/index.js

@@ -1,10 +1,16 @@
 import React from "react";
-import Wrapper from "../components/shared/Wrapper";
+import { Helmet } from "react-helmet";
 import Hero from "../components/landing/Hero";
+import Wrapper from "../components/shared/Wrapper";
 
 const Home = () => {
   return (
     <Wrapper>
+      <Helmet>
+        <title>Reactive Resume</title>
+        <link rel="canonical" href="https://rxresu.me/" />
+      </Helmet>
+
       <div className="container mt-24">
         <Hero />