Merge branch 'master' of http://176.104.105.124:3000/ntasicc/coffee into home-responsive

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

@@ -13,14 +13,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

@@ -13,6 +13,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';
 
@@ -35,7 +36,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/api/product/category/[categoryName].js

@@ -1,36 +1,89 @@
-const Product = require('../../../../models/product');
-import dbConnect from '../../../../utils/helpers/dbHelpers';
+const Product = require('../../../models/product');
+import dbConnect from '../../../utils/helpers/dbHelpers';
 
 async function handler(req, res) {
   const { method } = req;
-  const categoryName = req.query.categoryName;
+
   await dbConnect();
 
+  const pageIndex = req.query.pageIndex;
+  const category = req.query.category === 'All' ? '' : req.query.category;
+  const filterType = req.query.filterType;
+
+  if (pageIndex < 1) {
+    res.status(422).json({
+      message: 'Page does not exist ',
+    });
+    return;
+  }
+
   switch (method) {
     case 'GET': {
       try {
-        const productsByCategory = await Product.find({
-          category: categoryName,
-        });
+        const productCount = await Product.find({
+          category: { $regex: category },
+        }).countDocuments();
 
-        if (!productsByCategory) {
+        if (productCount === 0) {
           res.status(200).json({
-            message:
-              'There are currently no products in our database for the selected category.',
-            productsByCategory: [],
+            message: 'There are currently no products in our database.',
+            product: [],
+            productCount: 0,
+            next: null,
+            previous: null,
           });
+          break;
+        }
+
+        if ((pageIndex - 1) * 9 >= productCount) {
+          throw new Error('Page does not exist!');
+        }
+
+        const product = await Product.find({ category: { $regex: category } })
+          .skip((pageIndex - 1) * 9)
+          .limit(9)
+          .sort(filterType === 'asc' ? 'name' : '-name ');
+
+        if (!product) {
+          throw new Error('There are currently no products in our database.');
         }
 
+        const previousUrl =
+          pageIndex > 1
+            ? `https://localhost:3000/api/product?pageIndex=${
+                parseInt(pageIndex) - 1
+              }`
+            : null;
+        const nextUrl =
+          pageIndex * 9 < productCount
+            ? `https://localhost:3000/api/product?pageIndex=${
+                parseInt(pageIndex) + 1
+              }`
+            : null;
+
         res.status(200).json({
-          message:
-            'All products from our database for the selected category were fetched successfully.',
-          productsByCategory,
+          message: 'All products from our database were fetched successfully.',
+          product,
+          productCount,
+          next: nextUrl,
+          previous: previousUrl,
         });
       } catch (error) {
         res.status(400).json({ message: error.message });
       }
       break;
     }
+    case 'POST': {
+      try {
+        const product = await Product.create(req.body);
+        res
+          .status(201)
+          .json({ message: 'Your product was created and stored!', product });
+      } catch (error) {
+        res.status(400).json({ success: false });
+      }
+      break;
+    }
     default:
       res.status(405).json({ message: 'Method not allowed' });
       break;

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 />

requests/products/productRequest.js

@@ -1,8 +1,10 @@
-import apiEndpoints from '../apiEndpoints';
-
-export const getAllProducts = async (pageIndex) => {
+export const getAllProducts = async ({
+  url,
+  category = 'All',
+  filter = 'asc',
+}) => {
   const response = await fetch(
-    `http://localhost:3000${apiEndpoints.products}?page=${pageIndex}`
+    `${url}&category=${category}&filterType=${filter}`
   );
 
   const data = await response.json();

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;