From 6d3e5823fcc0ddf514616dc5483a38f52f1fb536 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Mon, 6 Jul 2020 10:02:17 +0530 Subject: [PATCH] - implement tips on loading screen - implement centralized sections - removed react-spinner package --- package-lock.json | 9 ------- package.json | 1 - src/components/builder/left/LeftNavbar.js | 12 +++++----- src/components/builder/left/LeftSidebar.js | 11 ++++++--- .../builder/left/LeftSidebar.module.css | 3 ++- .../builder/sections/SocialNetwork.js | 12 ++++++++++ src/components/dashboard/ResumePreview.js | 2 +- src/components/router/LoadingScreen.js | 5 ++-- src/components/router/PrivateRoute.js | 2 +- src/components/shared/Button.js | 9 ++----- src/components/shared/SectionIcon.js | 16 +++++++++++++ src/contexts/TemplateContext.js | 24 ++++++++++++------- src/data/leftSections.js | 19 +++++++++++++++ src/data/tips.js | 18 ++++++++++++++ src/pages/app/builder.js | 2 +- src/pages/app/dashboard.js | 2 +- src/styles/global.css | 6 +++-- src/templates/Onyx.js | 10 +------- 18 files changed, 111 insertions(+), 52 deletions(-) create mode 100644 src/components/builder/sections/SocialNetwork.js create mode 100644 src/components/shared/SectionIcon.js create mode 100644 src/data/leftSections.js create mode 100644 src/data/tips.js diff --git a/package-lock.json b/package-lock.json index 51b730dd..5e197f37 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 56978e6c..9a027544 100644 --- a/package.json +++ b/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" diff --git a/src/components/builder/left/LeftNavbar.js b/src/components/builder/left/LeftNavbar.js index d578d7a8..2189173a 100644 --- a/src/components/builder/left/LeftNavbar.js +++ b/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 = () => {
-
- +
+ {sections.map((x) => ( + + ))}
diff --git a/src/components/builder/left/LeftSidebar.js b/src/components/builder/left/LeftSidebar.js index b6ce284b..8be1a5a5 100644 --- a/src/components/builder/left/LeftSidebar.js +++ b/src/components/builder/left/LeftSidebar.js @@ -1,5 +1,5 @@ -import React from "react"; -import Profile from "../sections/Profile"; +import React, { Fragment } from "react"; +import sections from "../../../data/leftSections"; import LeftNavbar from "./LeftNavbar"; import styles from "./LeftSidebar.module.css"; @@ -9,7 +9,12 @@ const LeftSidebar = () => {
- + {sections.map(({ id, component: Component }) => ( + + +
+ + ))}
); diff --git a/src/components/builder/left/LeftSidebar.module.css b/src/components/builder/left/LeftSidebar.module.css index 3e6abd80..f5a18db3 100644 --- a/src/components/builder/left/LeftSidebar.module.css +++ b/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; } diff --git a/src/components/builder/sections/SocialNetwork.js b/src/components/builder/sections/SocialNetwork.js new file mode 100644 index 00000000..0488b7f2 --- /dev/null +++ b/src/components/builder/sections/SocialNetwork.js @@ -0,0 +1,12 @@ +import React from "react"; +import Heading from "../../shared/Heading"; + +const SocialNetwork = () => { + return ( +
+ Social Network +
+ ); +}; + +export default SocialNetwork; diff --git a/src/components/dashboard/ResumePreview.js b/src/components/dashboard/ResumePreview.js index fdc764d7..b7dd5bce 100644 --- a/src/components/dashboard/ResumePreview.js +++ b/src/components/dashboard/ResumePreview.js @@ -72,7 +72,7 @@ const ResumePreview = ({ resume }) => {
{resume.name} {resume.updatedAt && ( - Last updated {moment(resume.updatedAtR).fromNow()} + Last updated {moment(resume.updatedAt).fromNow()} )}
diff --git a/src/components/router/LoadingScreen.js b/src/components/router/LoadingScreen.js index f51743d4..14441e95 100644 --- a/src/components/router/LoadingScreen.js +++ b/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 (
- Fetching {type} + {getRandomTip()}
diff --git a/src/components/router/PrivateRoute.js b/src/components/router/PrivateRoute.js index b5dc4c40..a1e06458 100644 --- a/src/components/router/PrivateRoute.js +++ b/src/components/router/PrivateRoute.js @@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, location, ...props }) => { const { user, loading } = useContext(UserContext); if (loading) { - return ; + return ; } if (!user) { diff --git a/src/components/shared/Button.js b/src/components/shared/Button.js index c54ddb97..6ee91653 100644 --- a/src/components/shared/Button.js +++ b/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 && } - {isLoading ? ( - - ) : ( - title - )} + {isLoading ? "Loading..." : title} ); }; diff --git a/src/components/shared/SectionIcon.js b/src/components/shared/SectionIcon.js new file mode 100644 index 00000000..eda6b705 --- /dev/null +++ b/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 ( + +
+ +
+ + ); +}; + +export default SectionIcon; diff --git a/src/contexts/TemplateContext.js b/src/contexts/TemplateContext.js index 3793ca73..8de319de 100644 --- a/src/contexts/TemplateContext.js +++ b/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: [ - ["profile", "work"], - ["education", "skills", "hobbies"], - ], + blocks: [leftSections.map((x) => x.id)], 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 ( {children} diff --git a/src/data/leftSections.js b/src/data/leftSections.js new file mode 100644 index 00000000..d06a677e --- /dev/null +++ b/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, + }, +]; diff --git a/src/data/tips.js b/src/data/tips.js new file mode 100644 index 00000000..039cb95e --- /dev/null +++ b/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}`; +}; diff --git a/src/pages/app/builder.js b/src/pages/app/builder.js index 8cd3ff80..dd1187f7 100644 --- a/src/pages/app/builder.js +++ b/src/pages/app/builder.js @@ -21,7 +21,7 @@ const Builder = ({ user, id }) => { }, [id, getResume, dispatch]); if (loading) { - return ; + return ; } return ( diff --git a/src/pages/app/dashboard.js b/src/pages/app/dashboard.js index dc42f879..6010fbb2 100644 --- a/src/pages/app/dashboard.js +++ b/src/pages/app/dashboard.js @@ -13,7 +13,7 @@ const Dashboard = ({ user }) => { ); if (loading) { - return ; + return ; } return ( diff --git a/src/styles/global.css b/src/styles/global.css index ed585215..8df398ee 100644 --- a/src/styles/global.css +++ b/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; } diff --git a/src/templates/Onyx.js b/src/templates/Onyx.js index 9379731a..f42eacf3 100644 --- a/src/templates/Onyx.js +++ b/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 (