ntasicc
/
coffee
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'user-context'

pagination
ntasicc 3 years ago
parent
5f7cc4d262 884e63cc11
commit
e9ddb3bc33
6 changed files with 108 additions and 12 deletions
Unified View Show Diff Stats
  1. 8
    8
      components/forms/shipping-details/ShippingDetailsForm.jsx
  2. 3
    0
      components/layout/navbar/Navbar.jsx
  3. 4
    2
      components/profile-content/ProfileContent.jsx
  4. 4
    1
      pages/_app.js
  5. 17
    1
      pages/index.js
  6. 72
    0
      store/user-context.js

+ 8
- 8
components/forms/shipping-details/ShippingDetailsForm.jsx View File

import { Box, Button, Paper, TextField } from '@mui/material'; import { Box, Button, Paper, TextField } from '@mui/material';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import PropType from 'prop-types'; import PropType from 'prop-types';
import { useState } from 'react'; import { useState } from 'react';
import { shippingDetailsSchema } from '../../../schemas/shippingDetailsSchema'; import { shippingDetailsSchema } from '../../../schemas/shippingDetailsSchema';
import { useUserData } from '../../../store/user-context';
import ErrorMessageComponent from '../../mui/ErrorMessageComponent'; import ErrorMessageComponent from '../../mui/ErrorMessageComponent';


const ShippingDetailsForm = ({ const ShippingDetailsForm = ({
enableBtn = true, enableBtn = true,
}) => { }) => {
const [error] = useState({ hasError: false, errorMessage: '' }); const [error] = useState({ hasError: false, errorMessage: '' });
const { data: session } = useSession();
const { userStorage } = useUserData();
const router = useRouter(); const router = useRouter();


const formikSubmitHandler = async (values) => { const formikSubmitHandler = async (values) => {


const formik = useFormik({ const formik = useFormik({
initialValues: { 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, validationSchema: shippingDetailsSchema,
onSubmit: formikSubmitHandler, onSubmit: formikSubmitHandler,

+ 3
- 0
components/layout/navbar/Navbar.jsx View File

PROFILE_PAGE, PROFILE_PAGE,
} from '../../../constants/pages'; } from '../../../constants/pages';
import { useStore } from '../../../store/cart-context'; import { useStore } from '../../../store/cart-context';
import { useUserUpdate } from '../../../store/user-context';


const Navbar = () => { const Navbar = () => {
const router = useRouter(); const router = useRouter();
const { totalQuantity } = useStore(); const { totalQuantity } = useStore();
const { data: session } = useSession(); const { data: session } = useSession();
const { clearUser } = useUserUpdate();


const signOutHandler = async () => { const signOutHandler = async () => {
const data = await signOut({ redirect: false, callbackUrl: '/' }); const data = await signOut({ redirect: false, callbackUrl: '/' });
clearUser();
router.push(data.url); router.push(data.url);
}; };



+ 4
- 2
components/profile-content/ProfileContent.jsx View File

import { Grid, Typography } from '@mui/material'; import { Grid, Typography } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { signOut, useSession } from 'next-auth/react';
import { useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
import { updateUser } from '../../requests/user/userUpdateRequest'; import { updateUser } from '../../requests/user/userUpdateRequest';
import { useUserUpdate } from '../../store/user-context';
import OrderCard from '../cards/order-card/OrderCard'; import OrderCard from '../cards/order-card/OrderCard';
import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm'; import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';


const ProfileContent = ({ orders }) => { const ProfileContent = ({ orders }) => {
const { data: session } = useSession(); const { data: session } = useSession();
const { updateUserInfo } = useUserUpdate();
const [enableBtn, setEnableBtn] = useState(true); const [enableBtn, setEnableBtn] = useState(true);


const updateUserHandler = async (values) => { const updateUserHandler = async (values) => {
try { try {
setEnableBtn(false); setEnableBtn(false);
updateUserInfo(values);
await updateUser(values, session.user._id); await updateUser(values, session.user._id);
signOut();
} catch (error) { } catch (error) {
console.log(error); console.log(error);
setTimeout(() => { setTimeout(() => {

+ 4
- 1
pages/_app.js View File

import CircularIndeterminate from '../components/loader/route-loader/CircularIndeterminate'; import CircularIndeterminate from '../components/loader/route-loader/CircularIndeterminate';
import StorageProvider from '../store/cart-context'; import StorageProvider from '../store/cart-context';
import CheckoutProvider from '../store/checkout-context'; import CheckoutProvider from '../store/checkout-context';
import UserProvider from '../store/user-context';
import '../styles/globals.css'; import '../styles/globals.css';
import theme from '../styles/muiTheme'; import theme from '../styles/muiTheme';


<Hydrate state={pageProps.dehydratedState}> <Hydrate state={pageProps.dehydratedState}>
<SessionProvider session={session}> <SessionProvider session={session}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Providers components={[CheckoutProvider, StorageProvider]}>
<Providers
components={[CheckoutProvider, StorageProvider, UserProvider]}
>
<Layout> <Layout>
<Head> <Head>
<title>Coffee Shop</title> <title>Coffee Shop</title>

+ 17
- 1
pages/index.js View File

import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { useSession } from 'next-auth/react';
import Head from 'next/head'; import Head from 'next/head';
import { useEffect } from 'react';
import CompanyInfo from '../components/company-info/CompanyInfo'; import CompanyInfo from '../components/company-info/CompanyInfo';
import Features from '../components/features/Features'; import Features from '../components/features/Features';
import Hero from '../components/hero/Hero'; import Hero from '../components/hero/Hero';
import FeaturedProductsList from '../components/products/featured-products-list/FeaturedPorductsList'; import FeaturedProductsList from '../components/products/featured-products-list/FeaturedPorductsList';
import { getFeaturedProducts } from '../requests/products/featuredProductsRequest'; import { getFeaturedProducts } from '../requests/products/featuredProductsRequest';
import { useUserUpdate } from '../store/user-context';
import { getStorage } from '../utils/helpers/storage';


const Home = (props) => { 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 ( return (
<> <>
<Box sx={{ width: '100%', height: '100%' }}> <Box sx={{ width: '100%', height: '100%' }}>
<Head> <Head>
<title>NextJS template</title>
<title>Coffee Shop</title>
<meta name="description" content="Random data with pagination..." /> <meta name="description" content="Random data with pagination..." />
</Head> </Head>
<Hero></Hero> <Hero></Hero>

+ 72
- 0
store/user-context.js View File

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;

Write Preview
Loading…
Cancel
Save