- implement tips on loading screen

- implement centralized sections
- removed react-spinner package

package-lock.json

@@ -15300,15 +15300,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-loader-spinner": {
-      "version": "3.1.14",
-      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-3.1.14.tgz",
-      "integrity": "sha512-7V+upnW+RVA/O94LIB/EQLK2uaz/TpZBHG5uNXlOXgvxvALxlxVYeEDmus5Oex2C58fiwrsRvSyu/4VRmLbZ9Q==",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-reconciler": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",

package.json

@@ -38,7 +38,6 @@
     "react-firebase-hooks": "^2.2.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.10.0",
-    "react-loader-spinner": "^3.1.14",
     "react-toastify": "^6.0.8",
     "uuid": "^8.2.0",
     "yup": "^0.29.1"

src/components/builder/left/LeftNavbar.js

@@ -1,8 +1,9 @@
 import { Link } from "gatsby";
 import React from "react";
-import { MdPerson } from "react-icons/md";
+import sections from "../../../data/leftSections";
 import Avatar from "../../shared/Avatar";
 import Logo from "../../shared/Logo";
+import SectionIcon from "../../shared/SectionIcon";
 import styles from "./LeftNavbar.module.css";
 
 const LeftNavbar = () => {
@@ -14,11 +15,10 @@ const LeftNavbar = () => {
 
       <hr className="my-6" />
 
-      <div className="grid grid-cols-1 gap-6">
+      <div className="grid grid-cols-1 gap-8">
-        <MdPerson
+        {sections.map((x) => (
-          className="text-secondary-dark hover:text-primary"
+          <SectionIcon key={x.id} section={x} />
-          size="20px"
+        ))}
-        />
       </div>
 
       <hr className="mt-auto my-6" />

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { Fragment } from "react";
-import Profile from "../sections/Profile";
+import sections from "../../../data/leftSections";
 import LeftNavbar from "./LeftNavbar";
 import styles from "./LeftSidebar.module.css";
 
@@ -9,7 +9,12 @@ const LeftSidebar = () => {
       <LeftNavbar />
 
       <div className={styles.container}>
-        <Profile />
+        {sections.map(({ id, component: Component }) => (
+          <Fragment key={id}>
+            <Component />
+            <hr />
+          </Fragment>
+        ))}
       </div>
     </div>
   );

src/components/builder/left/LeftSidebar.module.css

@@ -1,5 +1,6 @@
 .container {
   z-index: 10;
   box-shadow: var(--left-shadow);
-  @apply w-full h-screen p-8;
+  @apply w-full h-screen overflow-scroll p-8;
+  @apply grid gap-6;
 }

src/components/builder/sections/SocialNetwork.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Heading from "../../shared/Heading";
+
+const SocialNetwork = () => {
+  return (
+    <section>
+      <Heading>Social Network</Heading>
+    </section>
+  );
+};
+
+export default SocialNetwork;

src/components/dashboard/ResumePreview.js

@@ -72,7 +72,7 @@ const ResumePreview = ({ resume }) => {
       <div className={styles.meta}>
         <span>{resume.name}</span>
         {resume.updatedAt && (
-          <span>Last updated {moment(resume.updatedAtR).fromNow()}</span>
+          <span>Last updated {moment(resume.updatedAt).fromNow()}</span>
         )}
       </div>
     </div>

src/components/router/LoadingScreen.js

@@ -1,15 +1,16 @@
 import { Fade, Modal } from "@material-ui/core";
 import React from "react";
+import { getRandomTip } from "../../data/tips";
 import Logo from "../shared/Logo";
 
-const LoadingScreen = ({ type }) => {
+const LoadingScreen = () => {
   return (
     <Modal open hideBackdrop>
       <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>
+            <span className="font-medium opacity-75">{getRandomTip()}</span>
           </div>
         </div>
       </Fade>

src/components/router/PrivateRoute.js

@@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
   const { user, loading } = useContext(UserContext);
 
   if (loading) {
-    return <LoadingScreen type="User" />;
+    return <LoadingScreen message="Authenticating..." />;
   }
 
   if (!user) {

src/components/shared/Button.js

@@ -1,6 +1,5 @@
-import React from "react";
 import classNames from "classnames";
-import Loader from "react-loader-spinner";
+import React from "react";
 import styles from "./Button.module.css";
 
 const Button = ({
@@ -27,11 +26,7 @@ const Button = ({
       onClick={isLoading ? undefined : onClick}
     >
       {icon && <Icon size="14" className="mr-2" />}
-      {isLoading ? (
+      {isLoading ? "Loading..." : title}
-        <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
-      ) : (
-        title
-      )}
     </button>
   );
 };

src/components/shared/SectionIcon.js

@@ -0,0 +1,16 @@
+import { Tooltip } from "@material-ui/core";
+import React from "react";
+
+const SectionIcon = ({ section, placement = "right" }) => {
+  const { icon: Icon, name } = section;
+
+  return (
+    <Tooltip title={name} placement={placement} arrow>
+      <div className="cursor-pointer">
+        <Icon className="text-secondary-dark hover:text-primary" size="20px" />
+      </div>
+    </Tooltip>
+  );
+};
+
+export default SectionIcon;

src/contexts/TemplateContext.js

@@ -1,5 +1,6 @@
 import { flatten } from "lodash";
 import React, { createContext, useState } from "react";
+import leftSections from "../data/leftSections";
 
 const defaultState = {
   selected: "Pikachu",
@@ -9,11 +10,10 @@ const defaultState = {
     primaryColor: "#f44336",
     backgroundColor: "#FFFFFF",
   },
-  blocks: [
+  blocks: [leftSections.map((x) => x.id)],
-    ["profile", "work"],
-    ["education", "skills", "hobbies"],
-  ],
   setBlocks: () => {},
+  setFixedBlocks: () => {},
+  setSupportedBlocks: () => {},
 };
 
 const TemplateContext = createContext(defaultState);
@@ -68,6 +68,13 @@ const TemplateProvider = ({ children }) => {
     }
   };
 
+  const setFixedBlocks = (fixedBlocks) => {
+    const newBlocks = blocks.map((x) =>
+      x.filter((y) => !fixedBlocks.includes(y))
+    );
+    setBlocks(newBlocks);
+  };
+
   const setSupportedBlocks = (number) => {
     if (number === blocks.length) return;
 
@@ -83,14 +90,15 @@ const TemplateProvider = ({ children }) => {
   return (
     <TemplateContext.Provider
       value={{
-        selected,
-        setSelected,
         colors,
-        setColors,
         blocks,
+        selected,
+        setColors,
         setBlocks,
-        setSupportedBlocks,
         onDragEnd,
+        setSelected,
+        setFixedBlocks,
+        setSupportedBlocks,
       }}
     >
       {children}

src/data/leftSections.js

@@ -0,0 +1,19 @@
+import { AiOutlineTwitter } from "react-icons/ai";
+import { MdPerson } from "react-icons/md";
+import Profile from "../components/builder/sections/Profile";
+import SocialNetwork from "../components/builder/sections/SocialNetwork";
+
+export default [
+  {
+    id: "profile",
+    name: "Profile",
+    icon: MdPerson,
+    component: Profile,
+  },
+  {
+    id: "social",
+    name: "Social Network",
+    icon: AiOutlineTwitter,
+    component: SocialNetwork,
+  },
+];

src/data/tips.js

@@ -0,0 +1,18 @@
+export const tips = [
+  "Create a professional email address.",
+  "Update your contact information.",
+  "Set your font size to 10-12 points.",
+  "Use reverse-chronological order.",
+  "Align your content to the left to make it skimmable.",
+  "Make strategic use of bold, caps, and italics.",
+  "Choose an attractive and readable font.",
+  "Only add jobs you’ve had in the past 10-15 years.",
+  "Give your sections simple subheadings.",
+  "Include URLs to social media profiles, personal websites, and your blog.",
+];
+
+export const getRandomTip = () => {
+  const tip = tips[Math.floor(Math.random() * tips.length)];
+  const index = tips.indexOf(tip) + 1;
+  return `Tip #${index}: ${tip}`;
+};

src/pages/app/builder.js

@@ -21,7 +21,7 @@ const Builder = ({ user, id }) => {
   }, [id, getResume, dispatch]);
 
   if (loading) {
-    return <LoadingScreen type="Resume" />;
+    return <LoadingScreen message="Loading Resume..." />;
   }
 
   return (

src/pages/app/dashboard.js

@@ -13,7 +13,7 @@ const Dashboard = ({ user }) => {
   );
 
   if (loading) {
-    return <LoadingScreen />;
+    return <LoadingScreen message="Connecting to database..." />;
   }
 
   return (

src/styles/global.css

@@ -1,5 +1,3 @@
-@import "~react-loader-spinner/dist/loader/css/react-spinner-loader.css";
-
 :root {
   @apply transition-colors duration-200 ease-in-out;
 }
@@ -39,6 +37,10 @@ section {
   border-color: #eee;
 }
 
+.MuiTooltip-tooltip {
+  font-size: 10px !important;
+}
+
 .spin {
   animation: spin 1s linear infinite;
 }

src/templates/Onyx.js

@@ -1,16 +1,8 @@
-import React, { useContext, useEffect } from "react";
+import React from "react";
 import { FaGlobeAmericas, FaPhone } from "react-icons/fa";
 import { MdEmail } from "react-icons/md";
-import TemplateContext from "../contexts/TemplateContext";
 
 const Onyx = ({ data, layout, colors }) => {
-  const { setSelected, setSupportedBlocks } = useContext(TemplateContext);
-
-  useEffect(() => {
-    setSelected("Onyx");
-    setSupportedBlocks(1);
-  }, [setSelected, setSupportedBlocks]);
-
   return (
     <div
       className="p-8 grid grid-cols-10 gap-4 items-center"