- integrating sign in with google

- set up dark mode context and other services

src/modals/AuthModal.js

@@ -1,10 +1,45 @@
-import React from "react";
+import React, { useState, useContext, Fragment } from "react";
 import BaseModal from "./BaseModal";
 import Button from "../components/shared/Button";
+import ModalContext from "../contexts/ModalContext";
+import UserContext from "../contexts/UserContext";
+
+const AuthModal = () => {
+  const [isLoading, setLoading] = useState(false);
+  const { authModal } = useContext(ModalContext);
+  const { user, loginWithGoogle, logout } = useContext(UserContext);
+
+  const handleSignInWithGoogle = async () => {
+    setLoading(true);
+    await loginWithGoogle();
+    setLoading(false);
+  };
+
+  const handleGoToApp = () => {
+    console.log("Go to App");
+  };
+
+  const loggedInAction = (
+    <Fragment>
+      <Button className="mr-6" title="Go to App" onClick={handleGoToApp} />
+      <Button title="Logout" onClick={logout} />
+    </Fragment>
+  );
+
+  const loggedOutAction = (
+    <Button
+      isLoading={isLoading}
+      title="Sign in with Google"
+      onClick={handleSignInWithGoogle}
+    />
+  );
 
-const AuthModal = ({ state }) => {
   return (
-    <BaseModal state={state} title="Who are you?" action={action}>
+    <BaseModal
+      state={authModal}
+      title="Who are you?"
+      action={user ? loggedInAction : loggedOutAction}
+    >
       <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
@@ -15,6 +50,4 @@ const AuthModal = ({ state }) => {
   );
 };
 
-const action = <Button title="Sign in with Google" />;
-
 export default AuthModal;

src/modals/BaseModal.js

@@ -1,35 +1,45 @@
 import React from "react";
 import Modal from "@material-ui/core/Modal";
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
 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 [isOpen, setOpen] = state;
+  const { isOpen, setOpen } = state;
 
   const handleClose = () => setOpen(false);
 
   return (
-    <Modal open={isOpen} onClose={handleClose} className={styles.root}>
-      <div className={styles.modal}>
-        <div className={styles.title}>
-          <h2>{title}</h2>
-          <MdClose size="18" onClick={handleClose} />
+    <Modal
+      open={isOpen}
+      onClose={handleClose}
+      closeAfterTransition
+      className={styles.root}
+      BackdropComponent={Backdrop}
+    >
+      <Fade in={isOpen}>
+        <div className={styles.modal}>
+          <div className={styles.title}>
+            <h2>{title}</h2>
+            <MdClose size="18" onClick={handleClose} />
+          </div>
+
+          <div className={styles.body}>{children}</div>
+
+          <div className={styles.actions}>
+            <Button
+              outline
+              title="Cancel"
+              className="mr-8"
+              onClick={handleClose}
+            />
+
+            {action}
+          </div>
         </div>
-
-        <div className={styles.body}>{children}</div>
-
-        <div className={styles.actions}>
-          <Button
-            outline
-            title="Cancel"
-            className="mr-8"
-            onClick={handleClose}
-          />
-
-          {action}
-        </div>
-      </div>
+      </Fade>
     </Modal>
   );
 };

src/modals/ModalRegistrar.js

@@ -0,0 +1,12 @@
+import React, { Fragment } from "react";
+import AuthModal from "./AuthModal";
+
+const ModalRegistrar = () => {
+  return (
+    <Fragment>
+      <AuthModal />
+    </Fragment>
+  );
+};
+
+export default ModalRegistrar;