From 853ffaa018eebc2bb673cfc0232cff348791d9cb Mon Sep 17 00:00:00 2001
From: Buyankhuu Tsolmonkhuu <Buyankhuuts@Berkeley.edu>
Date: Wed, 10 Apr 2024 00:26:51 -0700
Subject: [PATCH] attemptToRebase

---
 src/api/supabase/queries/product_queries.ts |   1 +
 src/app/cart/cartItem.tsx                   |   6 +-
 src/app/cart/page.tsx                       |  10 +-
 src/app/favorites/page.tsx                  |   2 +-
 src/app/layout.tsx                          |   3 +-
 src/app/pickup/page.tsx                     |   9 --
 src/app/profileScreen/page.tsx              |   2 -
 src/app/profileScreen/styles.ts             |   2 +-
 src/app/storefront/IndividualItem.tsx       |  73 +++++-------
 src/app/storefront/page.tsx                 |  13 ++-
 src/app/storefront/productButtons.tsx       |  29 +++--
 src/app/storefront/storefrontItems.tsx      |   6 +-
 src/app/storefront/styles.ts                | 123 ++++++++++----------
 13 files changed, 123 insertions(+), 156 deletions(-)

diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts
index 85ec9fbb..509bc8ea 100644
--- a/src/api/supabase/queries/product_queries.ts
+++ b/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
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
index f0970f5c..357fb340 100644
--- a/src/app/cart/cartItem.tsx
+++ b/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';
 
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 66b96ba0..fb0c230e 100644
--- a/src/app/cart/page.tsx
+++ b/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>
diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx
index b205c97a..1cefe242 100644
--- a/src/app/favorites/page.tsx
+++ b/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}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4a385bbe..42fb4ff2 100644
--- a/src/app/layout.tsx
+++ b/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',
diff --git a/src/app/pickup/page.tsx b/src/app/pickup/page.tsx
index c45c4715..b8d0dd3b 100644
--- a/src/app/pickup/page.tsx
+++ b/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,
diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx
index 5c3cc6e4..2bb15b08 100644
--- a/src/app/profileScreen/page.tsx
+++ b/src/app/profileScreen/page.tsx
@@ -10,9 +10,7 @@ import {
   Heading1,
   Body1Bold,
   Body2Bold,
-  Body1,
   Body2,
-  Heading4,
 } from '@/styles/fonts';
 import {
   addOrRemoveProductFromFavorite,
diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts
index cce909c1..884f01b1 100644
--- a/src/app/profileScreen/styles.ts
+++ b/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;
diff --git a/src/app/storefront/IndividualItem.tsx b/src/app/storefront/IndividualItem.tsx
index e0975f53..9687e7e6 100644
--- a/src/app/storefront/IndividualItem.tsx
+++ b/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>
   );
 }
diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx
index 21ad1ce9..2997f665 100644
--- a/src/app/storefront/page.tsx
+++ b/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,7 +32,7 @@ export default function App() {
   }, []);
 
   return (
-    <Fullscreen>
+    <div>
       <StoreFrontNavBar
         setFilteredProducts={setFilteredProducts}
         setCategoryWord={setCategoryWord}
@@ -39,12 +40,12 @@ export default function App() {
         setClickedButton={setClickedButton}
       />
 
-      <ShopAllText>Shop {CategoryWord}</ShopAllText>
-      <StorefrontBox>
+      <StorefrontWrapper>
+        <Heading1Bold>Shop {CategoryWord}</Heading1Bold>
         <Storefront products={FilteredProducts} />
-      </StorefrontBox>
+      </StorefrontWrapper>
 
       <Footer />
-    </Fullscreen>
+    </div>
   );
 }
diff --git a/src/app/storefront/productButtons.tsx b/src/app/storefront/productButtons.tsx
index 0cc824b7..fcc01f5a 100644
--- a/src/app/storefront/productButtons.tsx
+++ b/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>
   );
 }
diff --git a/src/app/storefront/storefrontItems.tsx b/src/app/storefront/storefrontItems.tsx
index f4ab2d0b..e23174e0 100644
--- a/src/app/storefront/storefrontItems.tsx
+++ b/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,7 +19,7 @@ function Storefront({ products }: { products: Product[] }) {
   }, []);
 
   return (
-    <StorefrontWrapper>
+    <StorefrontItemsWrapper>
       {products.map(productVal => (
         <IndividualItem
           products={Favorites}
@@ -27,7 +27,7 @@ function Storefront({ products }: { products: Product[] }) {
           key={productVal.id}
         />
       ))}
-    </StorefrontWrapper>
+    </StorefrontItemsWrapper>
   );
 }
 
diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts
index d0466320..f1734250 100644
--- a/src/app/storefront/styles.ts
+++ b/src/app/storefront/styles.ts
@@ -8,7 +8,9 @@ import {
   ChevronRight,
 } from 'react-feather';
 
-import { Body1 } from '@/styles/fonts';
+import { Body3 } from '@/styles/fonts';
+
+import Link from 'next/link';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
@@ -23,17 +25,18 @@ export const StickyHeader = styled.div`
   z-index: 2;
 `;
 
-export const Button = styled.button<{ $pickColor?: boolean }>`
+export const CategoryButton = styled.button<{ $selected?: boolean }>`
   background-color: ${props =>
-    props.$pickColor ? COLORS.navy : COLORS.babyBlue};
+    props.$selected ? COLORS.navy : COLORS.babyBlue};
   border-radius: 50%;
   width: 60px;
   height: 60px;
   border: transparent;
+  cursor: pointer;
 `;
 
-export const Label = styled.p<{ $pickColor?: boolean }>`
-  color: ${props => (props.$pickColor ? COLORS.navy : COLORS.black)};
+export const CategoryButtonLabel = styled.p<{ $selected?: boolean }>`
+  color: ${props => (props.$selected ? COLORS.navy : COLORS.black)};
   text-align: center;
   font-family: 'Public Sans', sans-serif;
   padding-top: 5px;
@@ -44,7 +47,6 @@ export const Label = styled.p<{ $pickColor?: boolean }>`
 `;
 
 export const IndividualContainer = styled.div`
-  width: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -57,13 +59,15 @@ export const ItemContainer = styled.div`
 `;
 
 export const ButtonsContainer = styled.div`
-  margin-left: 100px;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
   position: flex;
   align-items: center;
-  z-index: 1100;
+  padding-left: 32px;
+  padding-right: 32px;
+  max-width: 750px;
+  width: 100%;
 `;
 
 export const NavButton = styled.button`
@@ -84,49 +88,47 @@ export const NavButton = styled.button`
   float: right;
 `;
 
-export const ItemButtons = styled.button`
-  width: 290px;
-  height: 290px;
-  border: transparent;
-  background-color: var(--lightGrey, #f4f4f4);
-`;
-
-export const StorefrontWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 295px);
-  grid-gap: 2%;
-  padding-top: 20px;
+export const ImageLinkWrapper = styled(Link)`
+  width: 300px;
+  height: 300px;
+  background-color: ${COLORS.lightGrey};
+  padding: 32px;
+  margin-bottom: 8px;
+  display: flex;
   justify-content: center;
-  padding-bottom: 150px;
+  align-items: center;
+  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.10);
 `;
 
-export const StorefrontItem = styled.div`
-  width: calc(25% - 40px);
-  margin-bottom: 50px;
+export const StorefrontWrapper = styled.div`
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
 `;
 
-export const ShopAllText = styled.h1`
-  padding-top: 80px;
-  padding-bottom: 38px;
-  height: 100px;
-  margin-left: 60px;
-  font-family: 'Public Sans', sans-serif;
-  color: ${COLORS.black};
+export const StorefrontItemsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 300px);
+  grid-gap: 32px;
+  justify-content: space-between;
 `;
 
-export const HeartIcon = styled(Heart)<{ $isclicked?: boolean }>`
-  color: ${props => (props.$isclicked ? '#333286' : 'black')};
+export const HeartIcon = styled(Heart)<{ $favorited: boolean }>`
   width: 30px;
   height: 30px;
-  fill: ${props => (props.$isclicked ? '#333286' : 'none')};
+  color: ${props => (props.$favorited ? COLORS.marineBlue : COLORS.black)};
+  fill: ${props => (props.$favorited ? COLORS.marineBlue : 'none')};
   position: relative;
 `;
 
 export const HeartContainer = styled.button`
-  transform: translate(230px, -260px);
-  position: relative;
+  position: absolute;
+  right: 16px;
+  top: 16px;
   background-color: transparent;
   border: none;
+  cursor: pointer;
 `;
 
 export const NavBarZeroIndex = styled(NavBar)`
@@ -192,29 +194,33 @@ export const Addie = styled.p`
   margin-bottom: 30px;
 `;
 
-export const Hover = styled.div<{ $ishovering?: boolean }>`
-  visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')};
-  transform: translate(170px, -335px);
-  color: ${COLORS.black};
-  border: none;
-  width: 156px;
-  height: 26px;
+export const FavoritePopup = styled.div`
+  position: absolute;
+  visibility: hidden;
+  width: 150px;
   border-radius: 8px;
-  background: var(--Light-Periwinkle, #f4f7ff);
+  padding: 8px;
+  // Find better way to refactor this, it shouldn't need a calc
+  transform: translate(calc(-50% + 15px), -40px);
+  z-index: 1;
+
+  color: ${COLORS.black};
+  background: ${COLORS.lightPeriwinkle};
   box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2);
-  padding-top: 6px;
-  padding-bottom: 6px;
-  position: relative;
-  text-align: center;
-`;
 
-export const Body1Translated = styled(Body1)`
-  transform: translateY(-100px);
+  ${Body3} {
+    display: inline;
+  }
+
+  ${HeartContainer}:hover & {
+    visibility: visible;
+  }
 `;
 
-export const OutterDiv = styled.div`
+export const OuterDiv = styled.div`
   width: 300px;
   height: 375px;
+  position: relative;
 `;
 
 export const FrontArrow = styled(ChevronLeft)`
@@ -229,6 +235,7 @@ export const FrontButton = styled.button<{ $reachedStart?: boolean }>`
   background-color: transparent;
   border: none;
   visibility: ${props => (props.$reachedStart ? 'visible' : 'hidden')};
+  cursor: pointer;
 `;
 
 export const BackArrow = styled(ChevronRight)`
@@ -243,11 +250,5 @@ export const BackButton = styled.button<{ $reachedEnd?: boolean }>`
   background-color: transparent;
   border: none;
   visibility: ${props => (props.$reachedEnd ? 'visible' : 'hidden')};
-`;
-export const Fullscreen = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-export const StorefrontBox = styled.div`
-  margin: auto;
-`;
+  cursor: pointer;
+`;
\ No newline at end of file