feat: user context

components/forms/shipping-details/ShippingDetailsForm.jsx

@@ -1,10 +1,10 @@
 import { Box, Button, Paper, TextField } from '@mui/material';
 import { useFormik } from 'formik';
-import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import PropType from 'prop-types';
 import { useState } from 'react';
 import { shippingDetailsSchema } from '../../../schemas/shippingDetailsSchema';
+import { useUserData } from '../../../store/user-context';
 import ErrorMessageComponent from '../../mui/ErrorMessageComponent';
 
 const ShippingDetailsForm = ({
@@ -14,7 +14,7 @@ const ShippingDetailsForm = ({
   enableBtn = true,
 }) => {
   const [error] = useState({ hasError: false, errorMessage: '' });
-  const { data: session } = useSession();
+  const { userStorage } = useUserData();
   const router = useRouter();
 
   const formikSubmitHandler = async (values) => {
@@ -23,12 +23,12 @@ const ShippingDetailsForm = ({
 
   const formik = useFormik({
     initialValues: {
-      fullName: session?.user ? session.user.fullName : '',
-      address: session?.user ? session.user.address : '',
-      address2: session?.user ? session.user.address2 : '',
-      city: session?.user ? session.user.city : '',
-      country: session?.user ? session.user.country : '',
-      postcode: session?.user ? session.user.postcode : '',
+      fullName: userStorage ? userStorage.fullName : '',
+      address: userStorage ? userStorage.address : '',
+      address2: userStorage ? userStorage.address2 : '',
+      city: userStorage ? userStorage.city : '',
+      country: userStorage ? userStorage.country : '',
+      postcode: userStorage ? userStorage.postcode : '',
     },
     validationSchema: shippingDetailsSchema,
     onSubmit: formikSubmitHandler,

components/layout/navbar/Navbar.jsx

@@ -12,14 +12,17 @@ import {
   PROFILE_PAGE,
 } from '../../../constants/pages';
 import { useStore } from '../../../store/cart-context';
+import { useUserUpdate } from '../../../store/user-context';
 
 const Navbar = () => {
   const router = useRouter();
   const { totalQuantity } = useStore();
   const { data: session } = useSession();
+  const { clearUser } = useUserUpdate();
 
   const signOutHandler = async () => {
     const data = await signOut({ redirect: false, callbackUrl: '/' });
+    clearUser();
     router.push(data.url);
   };
 

components/profile-content/ProfileContent.jsx

@@ -1,20 +1,22 @@
 import { Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
-import { signOut, useSession } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { updateUser } from '../../requests/user/userUpdateRequest';
+import { useUserUpdate } from '../../store/user-context';
 import OrderCard from '../cards/order-card/OrderCard';
 import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';
 
 const ProfileContent = ({ orders }) => {
   const { data: session } = useSession();
+  const { updateUserInfo } = useUserUpdate();
   const [enableBtn, setEnableBtn] = useState(true);
 
   const updateUserHandler = async (values) => {
     try {
       setEnableBtn(false);
+      updateUserInfo(values);
       await updateUser(values, session.user._id);
-      signOut();
     } catch (error) {
       console.log(error);
       setTimeout(() => {

pages/_app.js

@@ -12,6 +12,7 @@ import Layout from '../components/layout/base-layout/Layout';
 import CircularIndeterminate from '../components/loader/route-loader/CircularIndeterminate';
 import StorageProvider from '../store/cart-context';
 import CheckoutProvider from '../store/checkout-context';
+import UserProvider from '../store/user-context';
 import '../styles/globals.css';
 import theme from '../styles/muiTheme';
 
@@ -34,7 +35,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
       <Hydrate state={pageProps.dehydratedState}>
         <SessionProvider session={session}>
           <ThemeProvider theme={theme}>
-            <Providers components={[CheckoutProvider, StorageProvider]}>
+            <Providers
+              components={[CheckoutProvider, StorageProvider, UserProvider]}
+            >
               <Layout>
                 <Head>
                   <title>Coffee Shop</title>

pages/index.js

@@ -1,17 +1,33 @@
 import { Box } from '@mui/system';
+import { useSession } from 'next-auth/react';
 import Head from 'next/head';
+import { useEffect } from 'react';
 import CompanyInfo from '../components/company-info/CompanyInfo';
 import Features from '../components/features/Features';
 import Hero from '../components/hero/Hero';
 import FeaturedProductsList from '../components/products/featured-products-list/FeaturedPorductsList';
 import { getFeaturedProducts } from '../requests/products/featuredProductsRequest';
+import { useUserUpdate } from '../store/user-context';
+import { getStorage } from '../utils/helpers/storage';
 
 const Home = (props) => {
+  const { data: session } = useSession();
+  const { addUser } = useUserUpdate();
+
+  useEffect(() => {
+    const userData = getStorage('user-data');
+    console.log(userData);
+    if (session?.user && userData.length === 0) {
+      addUser(session.user);
+      console.log('added');
+    }
+  }, [session, addUser]);
+
   return (
     <>
       <Box sx={{ width: '100%', height: '100%' }}>
         <Head>
-          <title>NextJS template</title>
+          <title>Coffee Shop</title>
           <meta name="description" content="Random data with pagination..." />
         </Head>
         <Hero></Hero>

store/user-context.js

@@ -0,0 +1,72 @@
+import { createContext, useContext, useState } from 'react';
+import {
+  getStorage,
+  removeStorage,
+  setStorage,
+} from '../utils/helpers/storage';
+
+const UserContext = createContext({
+  userStorage: [],
+});
+const UserDispatchContext = createContext({
+  addUser: (userData) => {},
+  clearUser: () => {},
+  updateUserInfo: (newUserData) => {},
+});
+
+export const useUserData = () => {
+  return useContext(UserContext);
+};
+export const useUserUpdate = () => {
+  return useContext(UserDispatchContext);
+};
+
+const useUser = () => {
+  const USER_KEY = 'user-data';
+  const [userStorage, setUserStorage] = useState(getStorage(USER_KEY));
+
+  const addUser = (userData) => {
+    setStorage(USER_KEY, userData);
+    setUserStorage(userData);
+  };
+
+  const updateUserInfo = (newUserData) => {
+    setStorage(USER_KEY, newUserData);
+    setUserStorage(newUserData);
+  };
+
+  const clearUser = () => {
+    removeStorage(USER_KEY);
+    setUserStorage(null);
+  };
+
+  return {
+    userStorage,
+    setUserStorage,
+    addUser,
+    updateUserInfo,
+    clearUser,
+  };
+};
+
+const UserProvider = ({ children }) => {
+  const { userStorage, setUserStorage, addUser, updateUserInfo, clearUser } =
+    useUser();
+
+  return (
+    <UserContext.Provider value={{ userStorage }}>
+      <UserDispatchContext.Provider
+        value={{
+          setUserStorage,
+          addUser,
+          updateUserInfo,
+          clearUser,
+        }}
+      >
+        {children}
+      </UserDispatchContext.Provider>
+    </UserContext.Provider>
+  );
+};
+
+export default UserProvider;