Vibe-House-LLC · davisengeler · Dec 11, 2022 · Dec 10, 2022 · Dec 10, 2022 · Dec 10, 2022
diff --git a/src/App.js b/src/App.js
@@ -1,19 +1,36 @@
+import { useState } from 'react';
+import { Auth } from 'aws-amplify';
 // routes
 import Router from './routes';
 // theme
 import ThemeProvider from './theme';
 // components
 import ScrollToTop from './components/scroll-to-top';
 import { StyledChart } from './components/chart';
+import { UserContext } from './UserContext';
 
 // ----------------------------------------------------------------------
 
 export default function App() {
+  // Set up the user context
+  const [user, setUser] = useState(null);
+  if (!user) {
+    Auth.currentAuthenticatedUser().then((x) => {
+        setUser(x)  // if an authenticated user is found, set it into the context
+        console.log(x)
+    }).catch(() => {
+        setUser({username: false})  // indicate the context is ready but user is not auth'd
+        console.log("There wasn't an authenticated user found")
+    });
+  }
+  // Return the App
   return (
     <ThemeProvider>
       <ScrollToTop />
       <StyledChart />
-      <Router />
+      <UserContext.Provider value={{user, setUser}}>
+        <Router />
+      </UserContext.Provider>
     </ThemeProvider>
   );
 }
diff --git a/src/UserContext.js b/src/UserContext.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const UserContext = createContext(null);
diff --git a/src/layouts/dashboard/header/AccountPopover.js b/src/layouts/dashboard/header/AccountPopover.js
@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 // @mui
 import { alpha } from '@mui/material/styles';
 import { Box, Divider, Typography, Stack, MenuItem, Avatar, IconButton, Popover } from '@mui/material';
 // mocks_
 import { useNavigate } from 'react-router-dom';
 import { Auth } from 'aws-amplify';
+import { UserContext } from '../../../UserContext';
 import account from '../../../_mock/account';
 
 // ----------------------------------------------------------------------
@@ -27,6 +28,8 @@ const MENU_OPTIONS = [
 // ----------------------------------------------------------------------
 
 export default function AccountPopover() {
+  const {user, setUser} = useContext(UserContext)
+
   const [open, setOpen] = useState(null);
 
   const navigate = useNavigate();
@@ -40,9 +43,12 @@ export default function AccountPopover() {
   };
 
   const logout = () => {
-    Auth.signOut().then(
-      () => navigate('/login', { replace: true })
-    ).catch((err) => alert(err))
+    Auth.signOut().then(() => {
+      setUser(null);
+      navigate('/login', { replace: true })
+    }).catch((err) => {
+      alert(err)
+    })
   }
 
   return (
@@ -88,10 +94,10 @@ export default function AccountPopover() {
       >
         <Box sx={{ my: 1.5, px: 2.5 }}>
           <Typography variant="subtitle2" noWrap>
-            {account.displayName}
+            {user.username}
           </Typography>
           <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
-            {account.email}
+            {user.attributes.email}
           </Typography>
         </Box>
 

diff --git a/src/layouts/dashboard/header/NotificationsPopover.js b/src/layouts/dashboard/header/NotificationsPopover.js
@@ -96,7 +96,7 @@ export default function NotificationsPopover() {
         description: item.message,
         avatar: null,
         type: 'example',
-        createdAt: item.createdAt,
+        createdAt: new Date(item.createdAt),
         isUnRead: true,
       }
     ))

diff --git a/src/pages/AuthPage.js b/src/pages/AuthPage.js
@@ -1,20 +1,12 @@
 import { Helmet } from 'react-helmet-async';
-
-import { useState } from 'react';
-// @mui
+import { useContext } from 'react';
 import { styled } from '@mui/material/styles';
-
 import { Container, Typography } from '@mui/material';
 import { LoginForm } from '../sections/auth/login';
-
-// hooks
-import useResponsive from '../hooks/useResponsive';
-
-// components
 import Logo from '../components/logo';
-// sections
 import VerifyForm from '../sections/auth/login/VerifyForm';
 import SignupForm from '../sections/auth/login/SignupForm';
+import { UserContext } from '../UserContext';
 
 // ----------------------------------------------------------------------
 
@@ -47,26 +39,24 @@ const StyledContent = styled('div')(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function AuthPage(props) {
-  const mdUp = useResponsive('up', 'md');
-
-  const [userState, setUserState] = useState("");
-
-  const AuthForm = () => {
-    let formType = <LoginForm />
-    if (props.method === "signup") {
-      if (userState.username) {
-          formType = <VerifyForm username={userState.username} />
-      } else {
-          formType = <SignupForm setUserState={setUserState}/>
-      }
-    }
-    return formType
+  // Set up the user context
+  const {user, setUser} = useContext(UserContext)
+
+  // Prep the auth page content depending on the situation
+  // TODO: fix issue where you can get "stuck" verifying 
+  // TODO: add auto-login functionality after confirmation
+  let formType = props.method === "signin" ? <LoginForm /> : <SignupForm setUser={setUser}/>
+  let formTitle = props.method === "signup" ? "Create Account" : "Sign in"
+  if (user && user.userConfirmed === false) {
+    formType = <VerifyForm username={user.username} />
+    formTitle = "Verify Account"
   }
 
+  // Return the page
   return (
     <>
       <Helmet>
-        <title> Verify Email | Minimal UI </title>
+        <title> {formTitle} • memeSRC </title>
       </Helmet>
 
       <StyledRoot>
@@ -78,21 +68,12 @@ export default function AuthPage(props) {
           }}
         />
 
-        {mdUp && (
-          <StyledSection>
-            <Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
-              Hi, Welcome Back
-            </Typography>
-            <img src="/assets/illustrations/illustration_login.png" alt="login" />
-          </StyledSection>
-        )}
-
         <Container maxWidth="sm">
           <StyledContent>
             <Typography variant="h4" gutterBottom marginBottom={8}>
-              Verify your account
+              {formTitle}
             </Typography>
-            <AuthForm />
+            {formType}
           </StyledContent>
         </Container>
       </StyledRoot>

diff --git a/src/pages/DashboardAppPage.js b/src/pages/DashboardAppPage.js
@@ -26,25 +26,25 @@ import { createGlobalMessage } from '../graphql/mutations';
 export default function DashboardAppPage() {
   const theme = useTheme();
 
-  async function createNewGlobalMessage(title, message, timestamp) {
-    const newGlobalMessage = {
-      input: {
-        title,
-        message,
-        timestamp,
-      },
-    };
+  // async function createNewGlobalMessage(title, message, timestamp) {
+  //   const newGlobalMessage = {
+  //     input: {
+  //       title,
+  //       message,
+  //       timestamp,
+  //     },
+  //   };
 
-    const result = await API.graphql(graphqlOperation(createGlobalMessage, newGlobalMessage));
+  //   const result = await API.graphql(graphqlOperation(createGlobalMessage, newGlobalMessage));
 
-    return result.data.createGlobalMessage;
-  }
+  //   return result.data.createGlobalMessage;
+  // }
 
-  createNewGlobalMessage("Example 1", "This is the first example message.", Date.now()).then( x => {
-    console.log(x)
-  }).catch( x => {
-    console.log(x)
-  })
+  // createNewGlobalMessage("Example 1", "This is the first example message.", Date.now()).then( x => {
+  //   console.log(x)
+  // }).catch( x => {
+  //   console.log(x)
+  // })
 
   return (
     <>

diff --git a/src/sections/auth/login/CheckAuth.js b/src/sections/auth/login/CheckAuth.js
@@ -1,25 +1,22 @@
 import { Auth } from "aws-amplify";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { UserContext } from "../../../UserContext";
 
 export default function CheckAuth(props) {
     const navigate = useNavigate();
-    const [isSignedIn, setSignedIn] = useState(null);
+    const [content, setContent] = useState(null);
+    const {user, setUser} = useContext(UserContext);
 
     useEffect(() => {
-        Auth.currentAuthenticatedUser().then(() =>
-        {
-            setSignedIn(true)
-        }).catch(() => {
-            setSignedIn(false)
-        });
-    });
+        if (user) {  // we only want this logic to occur after user context is prepped
+            if (user.username) {
+                setContent(props.children);
+            } else {
+                navigate('/login', { replace: true });
+            }
+        }
+    })
 
-    if (isSignedIn === true) {
-        return props.children;
-    } 
-
-    if (isSignedIn === false) {
-        navigate('/login', { replace: true });
-    }
+    return content
 }
diff --git a/src/sections/auth/login/LoginForm.js b/src/sections/auth/login/LoginForm.js
@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 // @mui
-import { Link, Stack, IconButton, InputAdornment, TextField, Checkbox } from '@mui/material';
+import { Link, Stack, IconButton, InputAdornment, TextField, Checkbox, FormControlLabel } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // components
 import { Auth } from 'aws-amplify';
 import Iconify from '../../../components/iconify';
+import { UserContext } from '../../../UserContext';
 
 
 // ----------------------------------------------------------------------
@@ -16,18 +17,22 @@ export default function LoginForm() {
   const [showPassword, setShowPassword] = useState(false);
 
   const [staySignedIn, setStaySignedIn] = useState(false);
-  
+
   const [username, setUsername] = useState(null);
 
   const [password, setPassword] = useState(null);
 
+  const {user, setUser} = useContext(UserContext)
+
+
   const handleClick = () => {
     if (!staySignedIn) {
       Auth.configure({ storage: window.sessionStorage })
     } else {
       Auth.configure({ storage: window.localStorage })
     }
-    Auth.signIn(username, password).then(() => {
+    Auth.signIn(username, password).then((x) => {
+      setUser(x)
       navigate('/dashboard/app', { replace: true })
     }).catch((err
DB95
) => {
       alert(err);
@@ -57,9 +62,17 @@ export default function LoginForm() {
       </Stack>
 
       <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
-        <Checkbox name="remember" label="Remember me"  => setStaySignedIn(x.target.checked)}/>
+        <FormControlLabel
+          control={
+            <Checkbox
+              name="remember"
+               => setStaySignedIn(event.target.checked)}
+            />
+          }
+          label="Remember me"
+        />
         <Link variant="subtitle2" underline="hover">
-          Forgot password?
+          Forgot your password?
         </Link>
       </Stack>
 

diff --git a/src/sections/auth/login/SignupForm.js b/src/sections/auth/login/SignupForm.js
@@ -51,9 +51,8 @@ export default function SignupForm(props) {
         'disabled': true,
         'text': 'Sign Up Complete'
       });
-      props.setUserState({
-        username: result.user.username
-      })
+      console.log(result)
+      props.setUser(result.user)
       console.log(result);
     }).catch((err) => {
       setSignupStatus({
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createContext } from 'react'

		export const UserContext = createContext(null);