categories pages completed

components/bagsTrial.js

@@ -0,0 +1,15 @@
+// import Link from 'next/link'
+
+
+// export default function BagsTrial({bags}) {
+//     console.log(bags)
+//     return(
+//         <ul className='h-96 w-full border-2 border-red-500'>
+//             {bags && bags.data.map(bag => {
+//                 return <li key={bag.id}>
+//                     <Link href={`bag/` + bag.attributes.slug}>{bag.attributes.product_name}</Link>
+//                 </li>
+//             })}
+//         </ul>
+//     )
+// }

components/cloths.jsx

@@ -1,14 +1,14 @@
-import Link from 'next/link'
+// import Link from 'next/link'
 
 
-export default function Bags({cloths}) {
-    return(
-        <ul>
-            {cloths && cloths.data.map(cloth => {
-                return <li key={cloth.id}>
-                    <Link href={`cloth/` + cloth.attributes.slug}>{cloth.attributes.product_name}</Link>
-                </li>
-            })}
-        </ul>
-    )
-}
+// export default function Bags({cloths}) {
+//     return(
+//         <ul>
+//             {cloths && cloths.data.map(cloth => {
+//                 return <li key={cloth.id}>
+//                     <Link href={`cloth/` + cloth.attributes.slug}>{cloth.attributes.product_name}</Link>
+//                 </li>
+//             })}
+//         </ul>
+//     )
+// }

components/globalContext.js

@@ -0,0 +1,43 @@
+import React, { useState, useContext } from 'react';
+
+const GlobalContext = React.createContext();
+
+const GlobalProvider = ({ children }) => {
+    //STATE AND FUNCTIONS FOR MANAGING CART ITEMS
+    const [cartItemsNo, setCartItemsNo] = useState(0);
+    const [cartItems, setCartItems] = useState([]);
+    const addCartItem = () => {
+        setCartItemsNo(cartItemsNo + 1)
+    };
+    const removeCartItem = () => {
+        setCartItemsNo(cartItemsNo - 1)
+    };
+    const addToCart = (item) => {
+        cartItems.every(cartItem => cartItem.id !== item.id) && (
+            setCartItems([...cartItems, item]),
+            setCartItemsNo(cartItemsNo + 1)
+        )
+    };
+
+
+
+  return (
+    <GlobalContext.Provider
+      value={{
+        cartItemsNo,
+        addCartItem,
+        removeCartItem,
+        addToCart,
+        cartItems
+      }}
+    >
+      {children}
+    </GlobalContext.Provider>
+  );
+};
+// make sure use
+export const useGlobalContext = () => {
+  return useContext(GlobalContext);
+};
+
+export { GlobalContext, GlobalProvider };

components/layout.jsx

@@ -3,7 +3,7 @@ import Head from 'next/head'
 import MobileBar from './navs/mobilebar'
 import TopNav from './navs/topNav'
 import Footer from './footer'
-import { NavProvider } from './navs/navContext'
+
 export default function Layout({children}) {
     const [isDomLoaded, setIsDomLoaded] = useState(false)
 
@@ -32,10 +32,8 @@ export default function Layout({children}) {
                     <link rel="icon" href="/assets/mainIcon.png" />
                 </Head>
                 <header>
-                    <NavProvider>
-                        <MobileBar />
-                        <TopNav />
-                    </NavProvider>
+                    <MobileBar />
+                    <TopNav />
                 </header>
                 <main>
                     {children}

components/navs/mobilebar.jsx

@@ -1,45 +1,51 @@
-import React, { useRef } from 'react'
-import {GiHamburgerMenu} from 'react-icons/gi'
-import {FaTimes} from 'react-icons/fa'
+import React, { useRef, useState } from 'react'
+import {IoIosMenu} from 'react-icons/io'
+import {IoIosClose} from 'react-icons/io'
+import { BsCart } from 'react-icons/bs'
 import Link from 'next/link'
-
-import { useNavContext } from './navContext'
+import { useGlobalContext } from '../globalContext'
 
 export default function MobileBar() {
+    const [isMobileNavHeight, setIsMobileNavHeight] = useState(false);
     const ulRef = useRef(null)
+    const { cartItemsNo } = useGlobalContext()
 
-    const {isMobileNavHeight, mobileHeightFalse, mobileHeightTrue} = useNavContext()
+    // const {isMobileNavHeight, mobileHeightFalse, mobileHeightTrue} = useNavContext()
 
     const handleNav = () => {
         const element = ulRef.current
         // element.classList.contains('show') ?  element.classList.remove('show') :  element.classList.add('show')
         if(!element.classList.contains('show')) {
-            mobileHeightTrue()
+            setIsMobileNavHeight(true)
             element.classList.add('show')
         }else {
-            mobileHeightFalse()
+            setIsMobileNavHeight(false)
             element.classList.remove('show')
         }
     }
 
     return(
-        <nav className='md:hidden px-5'>
-            <div className='flex justify-between mb-4'>
-                <Link href="/homePage">
-                    <img 
-                        src='/assets/logo.png'
-                        className='h-14 w-80 ml-[-40px]'
-                    />
+        <nav className='md:hidden px-5 text-deepBlue'>
+            <div className='flex justify-between items-center mb-4'>
+                <Link href="/">
+                    <span className='font-logo'>BENAX COLLECTION</span>
                 </Link>
+                <div className=' relative flex justify-center items-center'>
+                    <Link href='/cart'>
+                        <a className='flex justify-center items-center'>
+                            <BsCart className='text-[28px]' />
+                            <span className='absolute top-[0px] text-red-500 font-bold'>{cartItemsNo}</span>
+                        </a>
+                    </Link>
+                </div>
                 {!isMobileNavHeight ? 
                     <button onClick={handleNav}>
-                        <GiHamburgerMenu className='text-5xl'/>
+                        <IoIosMenu className='text-5xl'/>
                     </button> :
                     <button onClick={handleNav}>
-                        <FaTimes className='text-5xl'/>
+                        <IoIosClose className='text-5xl'/>
                     </button>
                 }
-
             </div>
             <ul className={`text-[lightGrey] h-0 overflow-hidden duration-300 ease-linear`} ref={ulRef}>
                 <li className='h-10 flex items-center px-5 '>

components/navs/topNav.jsx

@@ -2,8 +2,10 @@ import React from 'react'
 import { BsSearch } from 'react-icons/bs'
 import { BsCart } from 'react-icons/bs'
 import Link from 'next/link'
+import { useGlobalContext } from '../globalContext'
 
 export default function TopNav() {
+    const { cartItemsNo } = useGlobalContext()
     return (
         <nav className='hidden md:grid grid-cols-3 items-center text-veryDeepBlue text-[12px] h-24 px-14'>
             <ul className='flex'>
@@ -35,15 +37,19 @@ export default function TopNav() {
             </div>
             <ul className='flex justify-self-end'>
                 <li className='mr-7 hover:border-b-2 hover:border-b-veryDeepBlue hover:font-bold cursor-pointer'>STUDIO</li>
-                <li className='mr-7 hover:border-b-2 hover:border-b-veryDeepBlue hover:font-bold cursor-pointer'>ABOUT US</li>
+                <li className='mr-7 hover:border-b-2 hover:border-b-veryDeepBlue hover:font-bold cursor-pointer'>ABOUT</li>
                 <li className='mr-7 hover:border-b-2 hover:border-b-veryDeepBlue hover:font-bold cursor-pointer'>
                     <button>
                         <BsSearch />
                     </button>
                 </li>
-                <li>
-                    <BsCart />
-                    <span>0</span>
+                <li className=' relative '>
+                    <Link href='/cart'>
+                        <a className='flex justify-center items-center'>
+                            <BsCart className='text-[28px]' />
+                            <span className='absolute top-[3px] text-red-500 font-bold'>{cartItemsNo}</span>
+                        </a>
+                    </Link>
                 </li>
             </ul>
         </nav>

next.config.js

@@ -1,28 +1,7 @@
 /** @type {import('next').NextConfig} */
-
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 }
 
-
-module.exports = {
-
-  // env: {
-  //   API_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
-  //   IMAGES_DOMAIN: process.env.IMAGES_DOMAIN
-  // },
-  // publicRuntimeConfig: {
-  //   API_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
-  //   IMAGES_DOMAIN: process.env.IMAGES_DOMAIN
-  // },
-
-  // images: {
-  //   deviceSizes: [640, 768, 1024, 1280, 1600],
-  //   imageSizes: [16, 32, 48, 64, 96],
-  //   domains: [process.env.IMAGES_DOMAIN],
-  //   path: '/_next/images',
-  //   loader: 'default'
-  // },
-  nextConfig
-}
+module.exports = nextConfig

pages/_app.js

@@ -1,13 +1,14 @@
 import '../styles/globals.css'
-
+import { GlobalProvider } from '../components/globalContext'
 import Layout from '../components/layout'
 
 function MyApp({ Component, pageProps }) {
   return (
-    <Layout>
+    <GlobalProvider>
+      <Layout>
         <Component {...pageProps} />
-    </Layout>
-
+      </Layout>
+    </GlobalProvider>
   )
 }
 

pages/bags.jsx

@@ -1,6 +1,7 @@
 import { fetcher } from "../lib/api"
 import useSWR from 'swr'
 import { MdOutlineFavorite } from 'react-icons/md'
+import { useGlobalContext } from "../components/globalContext"
 
 const BagList = ({bags}) => {
     //useSWR helps us enable pagination of our api data
@@ -10,33 +11,47 @@ const BagList = ({bags}) => {
             fallbackData: bags 
         } //third parameter. This is used to cached the data. The useSWR would send a request to the server to revalidate if there is an update in the data
     )
-    // console.log(data)
+
+    const { addCartItem, removeCartItem, addToCart, cartItems, cartItemsNo } = useGlobalContext()
+    // console.log(cartItemsNo)
+    const handleAddToCart = (id, category) => {
+        // addCartItem();
+        const item = {id, category}
+        addToCart(item)
+        console.log(cartItemsNo)
+    }
+
     return (
-        <section className="text-deepBlue mb-7 px-5 md:px-14">
-            <h2 className="text-center text-3xl mb-7">CLOTHING</h2>
+        <section className="text-deepBlue mb-7 px-5 md:px-14" style={{zIndex: '0'}}>
+            <h2 className="text-center text-3xl mb-7">BAGS</h2>
             <div className="sm:grid sm:grid-cols-2 sm-gap-5 xl:grid-cols-3 xl:gap-x-28 xl:gap-y-10">
                 {data.data.map(item => {
-                    // console.log(item.attributes);
-                    const {product_name, product_image, product_price, id} = item.attributes;
+                    const {id, attributes} = item
+                    const {product_name, product_image, product_price, slug, category} = attributes;
                     // console.log(product_image)
                     const {data} = product_image
                     const {formats} = data.attributes
                     const {large, medium, small} = formats
                     // console.log(item)
                     return (
-                        <div key={''} className="align-self-center justify-self-center relative">
+                        <div key={id} className="align-self-center justify-self-center relative">
                             <img 
                             src={'http://localhost:1337' + small.url}
                                 className='sm:h-60 sm:w-60 md:h-80 md:w-80'
                             />
                             <p>{product_name}</p>
                             <p>{`$${product_price}`}</p>
-                            <button className="absolute top-5 right-5 text-cyan-500">
+                            <button 
+                                className='bg-deepBlue text-white px-4 py-1 hover:scale-110'
+                                onClick={() => handleAddToCart(id, category)}
+                            >
+                                Add to Cart
+                            </button>
+                            <button className="absolute top-5 right-5 text-fav">
                                 <MdOutlineFavorite className="text-2xl"/>
                             </button>
                         </div>
                     )
-
                 })}
             </div>
         </section>