Reactive Resume
@@ -27,7 +30,7 @@ const Hero = () => {
{user ? (
) : (
diff --git a/src/components/router/LoadingScreen.js b/src/components/router/LoadingScreen.js
new file mode 100644
index 00000000..e1190ec8
--- /dev/null
+++ b/src/components/router/LoadingScreen.js
@@ -0,0 +1,19 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import Loader from "react-loader-spinner";
+import Logo from "../shared/Logo";
+
+const LoadingScreen = () => {
+ return (
+
+
+
+ );
+};
+
+export default LoadingScreen;
diff --git a/src/components/router/PrivateRoute.js b/src/components/router/PrivateRoute.js
new file mode 100644
index 00000000..63ca723d
--- /dev/null
+++ b/src/components/router/PrivateRoute.js
@@ -0,0 +1,21 @@
+import React, { useContext } from "react";
+import { navigate } from "gatsby";
+import UserContext from "../../contexts/UserContext";
+import LoadingScreen from "./LoadingScreen";
+
+const PrivateRoute = ({ component: Component, location, ...props }) => {
+ const { user, loading } = useContext(UserContext);
+
+ if (loading) {
+ return
;
+ }
+
+ if (!user) {
+ navigate("/");
+ return null;
+ }
+
+ return
;
+};
+
+export default PrivateRoute;
diff --git a/src/components/shared/Input.js b/src/components/shared/Input.js
new file mode 100644
index 00000000..9c0065ec
--- /dev/null
+++ b/src/components/shared/Input.js
@@ -0,0 +1,32 @@
+import React from "react";
+import { v4 as uuidv4 } from "uuid";
+import styles from "./Input.module.css";
+
+const Input = ({
+ label,
+ name,
+ value,
+ onChange,
+ placeholder,
+ type = "text",
+}) => {
+ const uuid = uuidv4();
+
+ return (
+
+
+
+ );
+};
+
+export default Input;
diff --git a/src/components/shared/Input.module.css b/src/components/shared/Input.module.css
new file mode 100644
index 00000000..b61c6fa1
--- /dev/null
+++ b/src/components/shared/Input.module.css
@@ -0,0 +1,15 @@
+.container > label {
+ @apply flex flex-col;
+}
+
+.container > label > span {
+ @apply mb-1 text-gray-600 font-medium text-sm uppercase;
+}
+
+.container > label > input {
+ @apply py-4 px-4 rounded bg-gray-200 border border-gray-200;
+}
+
+.container > label > input:focus {
+ @apply outline-none border-gray-500;
+}
diff --git a/src/components/shared/Logo.js b/src/components/shared/Logo.js
index b0c6d2fd..37f24e38 100644
--- a/src/components/shared/Logo.js
+++ b/src/components/shared/Logo.js
@@ -2,7 +2,7 @@ import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import GatsbyImage from "gatsby-image";
-const Logo = ({ size = "256px" }) => {
+const Logo = ({ size = "256px", className }) => {
const { file } = useStaticQuery(graphql`
query {
file(relativePath: { eq: "logo.png" }) {
@@ -18,7 +18,7 @@ const Logo = ({ size = "256px" }) => {
return (
diff --git a/src/contexts/ModalContext.js b/src/contexts/ModalContext.js
index 77cba699..2864aeaa 100644
--- a/src/contexts/ModalContext.js
+++ b/src/contexts/ModalContext.js
@@ -2,17 +2,23 @@ import React, { createContext, useState } from "react";
const defaultState = {
authModal: {},
+ createResumeModal: {},
};
const ModalContext = createContext(defaultState);
const ModalProvider = ({ children }) => {
const [authOpen, setAuthOpen] = useState(false);
+ const [createResumeOpen, setCreateResumeOpen] = useState(false);
return (
{children}
diff --git a/src/contexts/UserContext.js b/src/contexts/UserContext.js
index 97ac01fd..b9782df5 100644
--- a/src/contexts/UserContext.js
+++ b/src/contexts/UserContext.js
@@ -13,7 +13,7 @@ const defaultUser = {
const defaultState = {
user: defaultUser,
- logout: () => {},
+ logout: async () => {},
loginWithGoogle: async () => {},
};
@@ -23,10 +23,16 @@ const UserProvider = ({ children }) => {
const [firebaseUser, loading] = useAuthState(firebase.auth());
const [user, setUser] = useState(null);
+ useEffect(() => {
+ const user = JSON.parse(localStorage.getItem("user"));
+ setUser(user);
+ }, []);
+
useEffect(() => {
if (firebaseUser) {
const user = pick(firebaseUser, Object.keys(defaultUser));
setUser(user);
+ localStorage.setItem("user", JSON.stringify(user));
const addUserToDatabase = async () => {
const docRef = firebase.firestore().collection("users").doc(user.uid);
@@ -48,8 +54,9 @@ const UserProvider = ({ children }) => {
}
};
- const logout = () => {
- firebase.auth().signOut();
+ const logout = async () => {
+ await firebase.auth().signOut();
+ localStorage.removeItem("user");
setUser(null);
};
@@ -57,8 +64,8 @@ const UserProvider = ({ children }) => {
diff --git a/src/modals/AuthModal.js b/src/modals/AuthModal.js
index 6d6631ab..00fd9e6a 100644
--- a/src/modals/AuthModal.js
+++ b/src/modals/AuthModal.js
@@ -3,6 +3,7 @@ import BaseModal from "./BaseModal";
import Button from "../components/shared/Button";
import ModalContext from "../contexts/ModalContext";
import UserContext from "../contexts/UserContext";
+import { navigate } from "gatsby";
const AuthModal = () => {
const [isLoading, setLoading] = useState(false);
@@ -15,8 +16,9 @@ const AuthModal = () => {
setLoading(false);
};
- const handleGoToApp = () => {
- console.log("Go to App");
+ const handleGotoApp = () => {
+ navigate("/app/dashboard");
+ authModal.setOpen(false);
};
const getTitle = () =>
@@ -30,7 +32,7 @@ const AuthModal = () => {
const loggedInAction = (
-
+
);
diff --git a/src/modals/BaseModal.js b/src/modals/BaseModal.js
index b93c9f7e..6e9952dd 100644
--- a/src/modals/BaseModal.js
+++ b/src/modals/BaseModal.js
@@ -1,4 +1,5 @@
import React from "react";
+import { isFunction } from "lodash";
import Modal from "@material-ui/core/Modal";
import Backdrop from "@material-ui/core/Backdrop";
import Fade from "@material-ui/core/Fade";
@@ -6,10 +7,13 @@ import { MdClose } from "react-icons/md";
import styles from "./BaseModal.module.css";
import Button from "../components/shared/Button";
-const BaseModal = ({ title, state, children, action }) => {
+const BaseModal = ({ title, state, children, action, onDestroy }) => {
const { isOpen, setOpen } = state;
- const handleClose = () => setOpen(false);
+ const handleClose = () => {
+ setOpen(false);
+ isFunction(onDestroy) && onDestroy();
+ };
return (
{
+ const { createResumeModal } = useContext(ModalContext);
+ const formik = useFormik({
+ initialValues: {
+ name: "",
+ },
+ onSubmit: (values) => {
+ alert(JSON.stringify(values, null, 2));
+ },
+ });
+
+ const submitAction = (
+ 
+