- storing user information in firestore

gatsby-config.js

@@ -17,6 +17,7 @@ module.exports = {
         ],
       },
     },
+    `gatsby-plugin-lodash`,
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-manifest`,

package-lock.json

@@ -3426,6 +3426,18 @@
         }
       }
     },
+    "babel-plugin-lodash": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz",
+      "integrity": "sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0-beta.49",
+        "@babel/types": "^7.0.0-beta.49",
+        "glob": "^7.1.1",
+        "lodash": "^4.17.10",
+        "require-package-name": "^2.0.1"
+      }
+    },
     "babel-plugin-macros": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
@@ -8381,6 +8393,16 @@
       "resolved": "https://registry.npmjs.org/gatsby-plugin-firebase/-/gatsby-plugin-firebase-0.2.0-beta.4.tgz",
       "integrity": "sha512-F1uh9T5dY38aeNvKzqj+3K655dce1QS70wuG4bhV9L3cnTJR2vitTWyIoCvRJJfPs7Xq7LgjUDmHDrEos4S3gQ=="
     },
+    "gatsby-plugin-lodash": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-lodash/-/gatsby-plugin-lodash-3.3.9.tgz",
+      "integrity": "sha512-ZfqxyWiWMn4jyVSv9VMk1HhUHfxXEcrbheMOZ06eruIzZBknP48E2wcydF59B1foowmDucVNyfP5B7p98IY6yg==",
+      "requires": {
+        "@babel/runtime": "^7.10.3",
+        "babel-plugin-lodash": "^3.3.4",
+        "lodash-webpack-plugin": "^0.11.5"
+      }
+    },
     "gatsby-plugin-manifest": {
       "version": "2.4.17",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.17.tgz",
@@ -11777,6 +11799,14 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-webpack-plugin": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/lodash-webpack-plugin/-/lodash-webpack-plugin-0.11.5.tgz",
+      "integrity": "sha512-QWfEIYxpixOdbd6KBe5g6MDWcyTgP3trDXwKHFqTlXrWiLcs/67fGQ0IWeRyhWlTITQIgMpJAYd2oeIztuV5VA==",
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -15807,6 +15837,11 @@
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
+    "require-package-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
+      "integrity": "sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.12",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
+    "gatsby-plugin-lodash": "^3.3.9",
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-postcss": "^2.3.9",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
@@ -27,6 +28,7 @@
     "gatsby-plugin-sharp": "^2.6.17",
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-sharp": "^2.5.10",
+    "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-firebase-hooks": "^2.2.0",

src/components/landing/Hero.js

@@ -1,36 +1,21 @@
 import React, { useContext } from "react";
-import { useStaticQuery, graphql } from "gatsby";
-import GatsbyImage from "gatsby-image";
 import { FaGithub } from "react-icons/fa";
 import ThemeContext from "../../contexts/ThemeContext";
 import ModalContext from "../../contexts/ModalContext";
 import UserContext from "../../contexts/UserContext";
 import Button from "../shared/Button";
+import Logo from "../shared/Logo";
 
 const Hero = () => {
   const { user, loading } = useContext(UserContext);
   const { toggleDarkMode } = useContext(ThemeContext);
   const { authModal } = useContext(ModalContext);
-  const { file } = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "logo.png" }) {
-        childImageSharp {
-          fixed(width: 256, height: 256) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-    }
-  `);
 
   const handleLogin = () => authModal.setOpen(true);
 
   return (
     <div className="flex items-center">
-      <GatsbyImage
+      <Logo size="256px" />
-        className="shadow-md rounded"
-        fixed={file.childImageSharp.fixed}
-      />
 
       <div className="ml-12">
         <h1 className="text-5xl font-bold">Reactive Resume</h1>

src/components/shared/Logo.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import GatsbyImage from "gatsby-image";
+
+const Logo = ({ size = "256px" }) => {
+  const { file } = useStaticQuery(graphql`
+    query {
+      file(relativePath: { eq: "logo.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 512) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <GatsbyImage
+      className="shadow-md rounded"
+      style={{ width: size, height: size }}
+      fluid={file.childImageSharp.fluid}
+    />
+  );
+};
+
+export default Logo;

src/contexts/UserContext.js

@@ -2,9 +2,17 @@ import React, { createContext, useState, useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import firebase from "gatsby-plugin-firebase";
 import { toast } from "react-toastify";
+import { pick } from "lodash";
+
+const defaultUser = {
+  uid: null,
+  displayName: null,
+  email: null,
+  photoURL: null,
+};
 
 const defaultState = {
-  user: null,
+  user: defaultUser,
   logout: () => {},
   loginWithGoogle: async () => {},
 };
@@ -16,7 +24,18 @@ const UserProvider = ({ children }) => {
   const [user, setUser] = useState(null);
 
   useEffect(() => {
-    setUser(firebaseUser);
+    if (firebaseUser) {
+      const user = pick(firebaseUser, Object.keys(defaultUser));
+      setUser(user);
+
+      const addUserToDatabase = async () => {
+        const docRef = firebase.firestore().collection("users").doc(user.uid);
+        const snapshot = await docRef.get();
+        !snapshot.exists && docRef.set(user);
+      };
+
+      addUserToDatabase();
+    }
   }, [firebaseUser]);
 
   const loginWithGoogle = async () => {
@@ -31,6 +50,7 @@ const UserProvider = ({ children }) => {
 
   const logout = () => {
     firebase.auth().signOut();
+    setUser(null);
   };
 
   return (

src/modals/AuthModal.js

@@ -19,9 +19,17 @@ const AuthModal = () => {
     console.log("Go to App");
   };
 
+  const getTitle = () =>
+    user ? `Welcome, ${user.displayName}` : "Who are you?";
+
+  const getMessage = () =>
+    user
+      ? `Awesome. Now that you've authenticated yourself, we can get on with the real reason you're here. Click on the Go to App button to start building your resume!`
+      : `Reactive Resume needs to know who you are so it can securely authenticate you into the app and show you only your information. Once you are in, you can start building your resume, editing it to add new skills or sharing it with the world!`;
+
   const loggedInAction = (
     <Fragment>
-      <Button className="mr-6" title="Logout" onClick={logout} />
+      <Button outline className="mr-8" title="Logout" onClick={logout} />
       <Button title="Go to App" onClick={handleGoToApp} />
     </Fragment>
   );
@@ -37,15 +45,10 @@ const AuthModal = () => {
   return (
     <BaseModal
       state={authModal}
-      title="Who are you?"
+      title={getTitle()}
       action={user ? loggedInAction : loggedOutAction}
     >
-      <p>
+      <p>{getMessage()}</p>
-        Reactive Resume needs to know who you are so it can securely
-        authenticate you into the app and show you only your information. Once
-        you are in, you can start building your resume, editing it to add new
-        skills or sharing it with the world!
-      </p>
     </BaseModal>
   );
 };

src/modals/BaseModal.module.css

@@ -20,7 +20,7 @@
 }
 
 .modal .body {
-  @apply my-8;
+  @apply mt-8 mb-10;
 }
 
 .modal .actions {