attemptToRebase

src/api/supabase/queries/product_queries.ts

@@ -103,6 +103,7 @@ export async function convertCategoryToNumber(
 export async function fetchUnprescribedCategory(
   productType: string,
 ): Promise<Product[]> {
+  console.log(productType);
   const productTypeConverted = await convertCategoryToNumber(productType);
 
   const { data: products, error } = await supabase

src/app/cart/cartItem.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import { useState } from 'react';
+import { Body2, Heading4Bold } from '@/styles/fonts';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
-import { Body2,Body2Light,Heading4Bold } from '@/styles/fonts';
 import {
   FavoriteDiv,
   TrashIcon,
   TransparentButton,
-  Label,
+
   LabelBox,
-  ImageDiv,
+
   ImageBackground,
 } from './styles';
 

src/app/cart/page.tsx

@@ -3,8 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
-import BackButton from '../../components/BackButton/BackButton';
 import { Heading1 } from '@/styles/fonts';
+import BackButton from '../../components/BackButton/BackButton';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 
@@ -15,12 +15,6 @@ import {
 import CartItem from './cartItem';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
-  OrderButton,
-  DeliveryContainer,
-  OrderContainer,
-  BackButtonDiv,
-  InformationContainer,
-  OutterDiv,
   CartItemsDiv,
   PageDiv,
   CheckoutButton,
@@ -82,7 +76,7 @@ export default function OrderPage() {
             <CheckoutButton
               // change this function so that the flow makes sense and that there is items within the cart
               onClick={() => checkDelivery()}
-              disabled={numberOfItems == 0}
+              disabled={numberOfItems === 0}
             >
               Check Out
             </CheckoutButton>

src/app/favorites/page.tsx

@@ -53,7 +53,7 @@ export default function FavoritesPage() {
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
             <FavoriteDiv key={favorite.id}>
-              <ImageLinkWrapper href={'' + favorite.id}>
+              <ImageLinkWrapper href={`${  favorite.id}`}>
                 <img
                   src={favorite.photo}
                   alt={favorite.name}

src/app/layout.tsx

@@ -1,8 +1,9 @@
 import './globals.css';
 import type { Metadata } from 'next';
+// eslint-disable-next-line camelcase
 import { Public_Sans } from 'next/font/google';
 
-const publicSans =  Public_Sans({ subsets: ['latin'] });
+const publicSans = Public_Sans({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Shanti Project',

src/app/pickup/page.tsx

@@ -16,21 +16,12 @@ import { Pickup, User, ProductWithQuantity } from '@/schema/schema';
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 import NavBar from '../../components/NavBarFolder/NavBar';
 import {
-  HeaderShiftLeft,
-  OrderSummaryDiv,
-  HeaderShiftRight,
-  OrderTotalDiv,
-  PShiftLeft,
-  WhiteBackgroundDiv,
   BackDiv,
   Backtext,
   PageDiv,
   CheckoutButton,
-  ItemSummaryDiv,
   ForceColumnDiv,
   RightColumnDiv,
-  Qty,
-  PShiftRight,
   PickupContent,
   PickupContainer,
   PickupTimeButton,

src/app/profileScreen/page.tsx

@@ -10,9 +10,7 @@ import {
   Heading1,
   Body1Bold,
   Body2Bold,
-  Body1,
   Body2,
-  Heading4,
 } from '@/styles/fonts';
 import {
   addOrRemoveProductFromFavorite,

src/app/profileScreen/styles.ts

@@ -4,10 +4,10 @@ import { ToastContainer } from 'react-toastify';
 
 import { Heart } from 'react-feather';
 
+import COLORS from '@/styles/colors';
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import Footer from '../../components/FooterFolder/Footer';
-import COLORS from '@/styles/colors';
 
 export const TextSpacing = styled.div`
   margin-top: 10px;

src/app/storefront/IndividualItem.tsx

@@ -1,17 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
-import { Body3 } from '@/styles/fonts';
+import { Body1, Body3 } from '@/styles/fonts';
 
 import {
-  StorefrontItem,
-  ItemButtons,
+  ImageLinkWrapper,
   HeartIcon,
-  Body1Translated,
   HeartContainer,
-  Hover,
-  OutterDiv,
+  FavoritePopup,
+  OuterDiv,
 } from './styles';
 
 import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
@@ -23,48 +19,35 @@ export default function IndividualItem(props: {
   products: Product[];
 }) {
   const { product, products } = props;
-  const [IsFavorite, setIsFavorite] = useState(false);
-  const router = useRouter();
-  const [hovering, setHovering] = useState(false);
-
-  useEffect(() => {
-    async function fetchProducts() {
-      if (products.find(item => item.id === product.id)) {
-        setIsFavorite(true);
-      }
-    }
-    fetchProducts();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [products]);
+  const [IsFavorite, setIsFavorite] = useState(
+    !!products.find(item => item.id === product.id),
+  );
 
-  async function clickFunction() {
-    addOrRemoveProductFromFavorite(product, !IsFavorite);
+  async function handleFavorite() {
+    await addOrRemoveProductFromFavorite(product, !IsFavorite);
     setIsFavorite(!IsFavorite);
   }
   return (
-    <OutterDiv>
-      <StorefrontItem>
-        <ItemButtons onClick={() => router.push(`/${product.id}`)}>
-          <img
-            src={product.photo}
-            alt={product.name}
-            style={{ width: '250px', height: '250px' }}
-          />
-        </ItemButtons>
-        <HeartContainer
-          onClick={() => clickFunction()}
-          onMouseEnter={() => setHovering(true)}
-          onMouseLeave={() => setHovering(false)}
-        >
-          <HeartIcon $isclicked={IsFavorite} />
-        </HeartContainer>
-        <Hover $ishovering={hovering}>
+    <OuterDiv>
+      {/* <StorefrontItem> */}
+      <ImageLinkWrapper href={product.id.toString()}>
+        <img
+          src={product.photo}
+          alt={product.name}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      </ImageLinkWrapper>
+      <HeartContainer onClick={() => handleFavorite()}>
+        <FavoritePopup>
           <Body3>
             {IsFavorite ? 'Remove from favorites' : 'Add to favorites'}
           </Body3>
-        </Hover>
-      </StorefrontItem>
-      <Body1Translated>{product.name}</Body1Translated>
-    </OutterDiv>
+        </FavoritePopup>
+        <HeartIcon $favorited={IsFavorite} />
+      </HeartContainer>
+
+      {/* </StorefrontItem> */}
+      <Body1>{product.name}</Body1>
+    </OuterDiv>
   );
 }

src/app/storefront/page.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { Heading1Bold } from '@/styles/fonts';
 import Storefront from './storefrontItems';
 
 import Footer from '../../components/FooterFolder/Footer';
-import { ShopAllText, Fullscreen, StorefrontBox } from './styles';
+import { StorefrontWrapper } from './styles';
 import { fetchUserProducts } from '../../api/supabase/queries/product_queries';
 import { Product } from '../../schema/schema';
 
@@ -31,20 +32,20 @@ export default function App() {
   }, []);
 
   return (
-    <Fullscreen>
+    <div>
       <StoreFrontNavBar
         setFilteredProducts={setFilteredProducts}
         setCategoryWord={setCategoryWord}
         clickedButton={clickedButton}
         setClickedButton={setClickedButton}
       />
 
-      <ShopAllText>Shop {CategoryWord}</ShopAllText>
-      <StorefrontBox>
+      <StorefrontWrapper>
+        <Heading1Bold>Shop {CategoryWord}</Heading1Bold>
         <Storefront products={FilteredProducts} />
-      </StorefrontBox>
+      </StorefrontWrapper>
 
       <Footer />
-    </Fullscreen>
+    </div>
   );
 }

src/app/storefront/productButtons.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
 import { fetchButtonCategories } from '@/api/supabase/queries/button_queries';
-import { Button, Label, IndividualContainer } from './styles';
+import {
+  CategoryButton,
+  CategoryButtonLabel,
+  IndividualContainer,
+} from './styles';
 
 import {
   fetchUserProducts,
@@ -42,11 +46,8 @@ export default function ProductButtons(props: {
       if (buttonCategories[i].name === category) {
         const ind = buttonCategories[i].id - 1;
         if (ind === clickedButton) {
-          // const tempArray = [...IsClickedButton];
-          // tempArray[ind] = !tempArray[ind];
-          // tempArray[0] = true;
           setCategoryWord('All');
-          // setIsClickedButton(tempArray);
+
           setClickedButton(0);
 
           if (productItem !== null) {
@@ -55,10 +56,8 @@ export default function ProductButtons(props: {
           return;
         }
         setClickedButton(ind);
-        // const arrayOfFalse = [false, false, false, false];
-        // arrayOfFalse[ind] = true;
+
         setCategoryWord(buttonCategories[i].name);
-        // setIsClickedButton(arrayOfFalse);
 
         break;
       }
@@ -69,7 +68,6 @@ export default function ProductButtons(props: {
     // Applying the filter to the categories of the product
 
     if (category !== 'All') {
-      console.log(category);
       const products = await filterUserProducts(category);
       if (products !== null) {
         setFiltredProducts(products);
@@ -84,15 +82,14 @@ export default function ProductButtons(props: {
 
   return (
     <IndividualContainer>
-      <Button
-        $pickColor={index === clickedButton}
+      <CategoryButton
+        $selected={index === clickedButton}
         key={value}
-        value={value}
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
-          applyFilter(e)
-        }
+        onClick={e => applyFilter(e)}
       />
-      <Label $pickColor={index === clickedButton}>{content}</Label>
+      <CategoryButtonLabel $selected={index === clickedButton}>
+        {content}
+      </CategoryButtonLabel>
     </IndividualContainer>
   );
 }

src/app/storefront/storefrontItems.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { StorefrontWrapper } from './styles';
+import { StorefrontItemsWrapper } from './styles';
 
 import IndividualItem from './IndividualItem';
 
@@ -19,15 +19,15 @@ function Storefront({ products }: { products: Product[] }) {
   }, []);
 
   return (
-    <StorefrontWrapper>
+    <StorefrontItemsWrapper>
       {products.map(productVal => (
         <IndividualItem
           products={Favorites}
           product={productVal}
           key={productVal.id}
         />
       ))}
-    </StorefrontWrapper>
+    </StorefrontItemsWrapper>
   );
 }