- complete onyx design template

- implement public sharable urls
- implement more actions

src/pages/app/dashboard.js

@@ -1,5 +1,5 @@
 import firebase from 'gatsby-plugin-firebase';
-import React, { memo, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import CreateResume from '../../components/dashboard/CreateResume';
 import ResumePreview from '../../components/dashboard/ResumePreview';
@@ -11,11 +11,24 @@ const Dashboard = ({ user }) => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const ref = `users/${user.uid}/resumes`;
+    const resumesRef = 'resumes';
+    const socketRef = '/.info/connected';
 
     firebase
       .database()
-      .ref(ref)
+      .ref(socketRef)
+      .on('value', (snapshot) => {
+        if (snapshot.val()) {
+          setLoading(false);
+          firebase.database().ref(socketRef).off();
+        }
+      });
+
+    firebase
+      .database()
+      .ref(resumesRef)
+      .orderByChild('user')
+      .equalTo(user.uid)
       .on('value', (snapshot) => {
         if (snapshot.val()) {
           const resumesArr = [];
@@ -23,13 +36,13 @@ const Dashboard = ({ user }) => {
           Object.keys(data).forEach((key) => resumesArr.push(data[key]));
           setResumes(resumesArr);
         }
-
-        setLoading(false);
       });
 
     firebase
       .database()
-      .ref(ref)
+      .ref(resumesRef)
+      .orderByChild('user')
+      .equalTo(user.uid)
       .on('child_removed', (snapshot) => {
         if (snapshot.val()) {
           setResumes(resumes.filter((x) => x.id === snapshot.val().id));
@@ -37,7 +50,7 @@ const Dashboard = ({ user }) => {
       });
 
     return () => {
-      firebase.database().ref(ref).off();
+      firebase.database().ref(resumesRef).off();
     };
   }, [user]);
 
@@ -67,4 +80,4 @@ const Dashboard = ({ user }) => {
   );
 };
 
-export default memo(Dashboard);
+export default Dashboard;

src/pages/index.js

@@ -65,7 +65,7 @@ const Feature = ({ title, children }) => {
   return (
     <div className="mt-16">
       <h3 className="text-3xl">{title}</h3>
-      <p className="mt-6 text-lg">{children}</p>
+      <p className="mt-6 text-lg leading-loose">{children}</p>
     </div>
   );
 };

src/pages/r.js

@@ -0,0 +1,17 @@
+import { Redirect, Router } from '@reach/router';
+import React, { memo } from 'react';
+import Wrapper from '../components/shared/Wrapper';
+import ResumeViewer from './r/view';
+import NotFound from './404';
+
+const ResumeRouter = () => (
+  <Wrapper>
+    <Router>
+      <Redirect noThrow from="/r" to="/" exact />
+      <ResumeViewer path="r/:id" />
+      <NotFound default />
+    </Router>
+  </Wrapper>
+);
+
+export default memo(ResumeRouter);

src/pages/r/view.js

@@ -0,0 +1,58 @@
+import { navigate, Link } from '@reach/router';
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { toast } from 'react-toastify';
+import LoadingScreen from '../../components/router/LoadingScreen';
+import DatabaseContext from '../../contexts/DatabaseContext';
+import Onyx from '../../templates/Onyx';
+import styles from './view.module.css';
+
+const ResumeViewer = ({ id }) => {
+  const [resume, setResume] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const { getResume } = useContext(DatabaseContext);
+
+  useEffect(() => {
+    (async () => {
+      const data = await getResume(id);
+
+      if (!data) {
+        navigate('/');
+        toast.error(
+          `The resume you were looking for does not exist anymore... or maybe it never did?`,
+        );
+        return null;
+      }
+
+      setResume(data);
+      return setLoading(false);
+    })();
+  }, [id]);
+
+  return useMemo(() => {
+    if (loading) {
+      return <LoadingScreen />;
+    }
+
+    return (
+      <div className={styles.container}>
+        <Helmet>
+          <title>{resume.name} | Reactive Resume</title>
+          <link rel="canonical" href={`https://rxresu.me/r/${id}`} />
+        </Helmet>
+        <div
+          className={styles.page}
+          style={{ backgroundColor: resume.metadata.colors.background }}
+        >
+          {resume.metadata.template === 'onyx' && <Onyx data={resume} />}
+        </div>
+
+        <p className={styles.footer}>
+          Built with <Link to="/">Reactive Resume</Link>
+        </p>
+      </div>
+    );
+  });
+};
+
+export default memo(ResumeViewer);

src/pages/r/view.module.css

@@ -0,0 +1,13 @@
+.container {
+  background-color: #212121;
+  @apply h-screen overflow-scroll col-span-5 flex flex-col items-center;
+}
+
+.page {
+  width: 800px;
+  @apply block my-16 rounded shadow-2xl;
+}
+
+.footer {
+  @apply mb-16 text-center opacity-50 leading-loose;
+}