Buyankhuu/fixed queries+changed store front

src/api/supabase/queries/user_queries.ts

@@ -39,7 +39,7 @@ export async function fetchUserByUUID(uuid: string) {
     const { data: user, error } = await supabase
       .from('profiles')
       .select('*')
-      .eq('user_id', uuid)
+      .eq('id', uuid)
       .single();
 
     if (error) {
@@ -62,21 +62,22 @@ export async function getUserInfo(product: Product, isFav: boolean) {
     const { data } = await supabase
       .from('profiles')
       .select()
-      .eq('user_id', user.id);
+      .eq('id', user.id)
+      .single();
 
     if (data !== null) {
-      const CurrUserFavoriteItems = data[0].fav_items;
+      const CurrUserFavoriteItems = data.fav_items;
 
       if (isFav) {
-        CurrUserFavoriteItems[product.product_id] = 1;
+        CurrUserFavoriteItems[product.id] = 1;
       } else {
-        delete CurrUserFavoriteItems[product.product_id];
+        delete CurrUserFavoriteItems[product.id];
       }
 
       const { error } = await supabase
         .from('profiles')
         .update({ fav_items: CurrUserFavoriteItems })
-        .eq('user_id', user.id);
+        .eq('id', user.id);
     }
   }
 }
@@ -90,23 +91,25 @@ export async function arrayOfFavorites() {
     const { data: userProfileData, error: userProfileError } = await supabase
       .from('profiles')
       .select()
-      .eq('user_id', user.id)
+      .eq('id', user.id)
       .single();
 
-    const CurrUserFavoriteItems = userProfileData.fav_items;
+    if (userProfileData !== null) {
+      const CurrUserFavoriteItems = userProfileData.fav_items;
 
-    const Favkey = Object.keys(CurrUserFavoriteItems);
+      const Favkey = Object.keys(CurrUserFavoriteItems);
 
-    const { data: productData, error: productError } = await supabase
-      .from('product')
-      .select('*');
+      const { data: productData, error: productError } = await supabase
+        .from('product')
+        .select('*');
 
-    if (productData !== null && productData !== undefined) {
-      const FavArray = productData.filter(product =>
-        Favkey.includes(String(product.product_id)),
-      );
+      if (productData !== null && productData !== undefined) {
+        const FavArray = productData.filter(product =>
+          Favkey.includes(String(product.id)),
+        );
 
-      return FavArray;
+        return FavArray;
+      }
     }
   }
   return [];
@@ -134,7 +137,7 @@ export async function totalNumberOfItemsInCart() {
     const { data, error } = await supabase
       .from('profiles')
       .select()
-      .eq('user_id', user.id)
+      .eq('id', user.id)
       .single();
 
     if (data !== null) {

src/app/[productId]/page.tsx

@@ -76,7 +76,7 @@ export default function ItemDisplay({
             {Item?.category}
           </h4>
           <Buttons />
-          <p style={{ paddingTop: '50px' }}>Product ID: {Item?.product_id}</p>
+          <p style={{ paddingTop: '50px' }}>Product ID: {Item?.id}</p>
           <p style={{ paddingTop: '20px' }}>Product Details:</p>
           <p>{Item?.description}</p>
         </TextContainer>

src/app/cart/page.tsx

@@ -37,15 +37,7 @@ import {
 
 import Buttons from './Buttons';
 
-interface Product {
-  description: string;
-  category: string;
-  quantity: number;
-  photo: string;
-  product_id: number;
-  name: string;
-  updated_at: Date;
-}
+import { Product } from '../../schema/schema';
 
 export default function OrderPage() {
   const [Cart, setCart] = useState<Product[]>([]);
@@ -61,7 +53,7 @@ export default function OrderPage() {
   async function clickFunctions(props: { fav: Product }) {
     const { fav } = props;
     getUserInfo(fav, false);
-    setCart(Cart.filter(Prod => Prod.product_id !== fav.product_id));
+    setCart(Cart.filter(Prod => Prod.id !== fav.id));
   }
 
   return (
@@ -77,7 +69,7 @@ export default function OrderPage() {
           <h1>Cart</h1>
           <OutterFavoriteDiv>
             {Cart.map(cart => (
-              <FavoriteDiv key={cart.product_id}>
+              <FavoriteDiv key={cart.id}>
                 <img
                   src={cart.photo}
                   alt={cart.name}
@@ -103,7 +95,7 @@ export default function OrderPage() {
             <Qty>Qty.</Qty>
             <OrderSummaryDiv>
               {Cart.map(cart => (
-                <ItemSummaryDiv key={cart.product_id}>
+                <ItemSummaryDiv key={cart.id}>
                   <PShiftLeft>{cart.name}</PShiftLeft>
                   <PShiftRight>{cart.quantity}</PShiftRight>
                 </ItemSummaryDiv>

src/app/favorites/page.tsx

@@ -21,15 +21,7 @@ import {
   NavBarMovedUP,
 } from '../profileScreen/styles';
 
-interface Product {
-  description: string;
-  category: string;
-  quantity: number;
-  photo: string;
-  product_id: number;
-  name: string;
-  updated_at: Date;
-}
+import { Product } from '../../schema/schema';
 
 export default function FavoritesPage() {
   const [Favorites, setFavorites] = useState<Product[]>([]);
@@ -45,7 +37,7 @@ export default function FavoritesPage() {
   async function clickFunctions(props: { fav: Product }) {
     const { fav } = props;
     getUserInfo(fav, false);
-    setFavorites(Favorites.filter(Prod => Prod.product_id !== fav.product_id));
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
   }
 
   return (
@@ -60,7 +52,7 @@ export default function FavoritesPage() {
         <h1>Favorites</h1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
-            <FavoriteDiv key={favorite.product_id}>
+            <FavoriteDiv key={favorite.id}>
               <img
                 src={favorite.photo}
                 alt={favorite.name}

src/app/profileScreen/page.tsx

@@ -8,7 +8,7 @@ import {
   LogOutButton,
   GlobalStyle,
   PopUp,
-  NavBarZeroIndex,
+  NavBarMovedUP,
   FooterMoved,
 } from './styles';
 
@@ -31,7 +31,7 @@ export default function Profile() {
 
   return (
     <main>
-      <NavBarZeroIndex />
+      <NavBarMovedUP />
       <GlobalStyle />
       <LogOutButton onClick={() => showToastMessage()}>Log Out!</LogOutButton>
       <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />

src/app/profileScreen/styles.ts

@@ -31,7 +31,6 @@ export const LogOutButton = styled.button`
   width: 300px;
   height: 50px;
   z-index: 1000;
-  transform: translateY(200px);
 `;
 /* transform: translateY(200px); */
 
@@ -58,7 +57,7 @@ export const OutterFavoriteDiv = styled.div`
   background: var(--White, #fff);
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   width: 800px;
-  height: 350px;
+  height: 500px;
   overflow: scroll;
   margin-top: 10px;
 `;
@@ -97,7 +96,7 @@ export const NavBarZeroIndex = styled(NavBar)`
 `;
 
 export const FooterMoved = styled(Footer)`
-  transform: translateY(300px);
+  transform: translateY(50px);
 `;
 
 export const TransparentButton = styled.button`

src/app/storefront/IndividualItem.tsx

@@ -23,7 +23,7 @@ export default function IndividualItem(props: {
 
   useEffect(() => {
     async function fetchProducts() {
-      if (products.find(item => item.product_id === product.product_id)) {
+      if (products.find(item => item.id === product.id)) {
         setIsFavorite(false);
       }
     }
@@ -36,8 +36,8 @@ export default function IndividualItem(props: {
   }
   return (
     <div>
-      <StorefrontItem key={product.product_id}>
-        <ItemButtons onClick={() => router.push(`/${product.product_id}`)}>
+      <StorefrontItem key={product.id}>
+        <ItemButtons onClick={() => router.push(`/${product.id}`)}>
           <img
             src={product.photo}
             alt={product.name}

src/app/storefront/page.tsx

@@ -39,6 +39,15 @@ export default function App() {
   ];
   const [FilteredProducts, setFilteredProducts] = useState<Product[]>([]);
 
+  const [CategoryWord, setCategoryWord] = useState('All');
+
+  const [IsClickedButton, setIsClickedButton] = useState<boolean[]>([
+    true,
+    false,
+    false,
+    false,
+  ]);
+
   useEffect(() => {
     async function fetchProducts() {
       try {
@@ -57,16 +66,20 @@ export default function App() {
       <GlobalStyle />
       <NavBarZeroIndex />
       <ButtonsContainer>
-        {buttons.map(type => (
+        {buttons.map((type, index) => (
           <ProductButtons
             key={type.count}
             value={type.value}
             setFiltredProducts={setFilteredProducts}
             content={type.name}
+            setIsClickedButton={setIsClickedButton}
+            IsClickedButton={IsClickedButton}
+            setCategoryWord={setCategoryWord}
+            index={index}
           />
         ))}
       </ButtonsContainer>
-      <ShopAllText>Shop All</ShopAllText>
+      <ShopAllText>Shop {CategoryWord}</ShopAllText>
       <Storefront products={FilteredProducts} />
       <Footer />
     </main>

src/app/storefront/productButtons.tsx

@@ -16,15 +16,75 @@ export default function ProductButtons(props: {
   value: string;
   setFiltredProducts: (category: Product[]) => void;
   content: string;
+  setIsClickedButton: (clicked: boolean[]) => void;
+  IsClickedButton: boolean[];
+  setCategoryWord: (word: string) => void;
+  index: number;
 }) {
-  const { key, value, content, setFiltredProducts } = props;
-  const [IsClicked, setIsClicked] = useState(false);
+  const {
+    key,
+    value,
+    content,
+    setFiltredProducts,
+    setIsClickedButton,
+    IsClickedButton,
+    setCategoryWord,
+    index,
+  } = props;
+  const buttons = [
+    {
+      name: 'All',
+      value: 'All',
+      count: 0,
+    },
+    {
+      name: 'Dog',
+      value: 'Dog',
+      count: 1,
+    },
+    {
+      name: 'Cat',
+      value: 'Cat',
+      count: 2,
+    },
+    {
+      name: 'Other',
+      value: 'Other',
+      count: 3,
+    },
+  ];
 
   async function applyFilter(
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) {
-    setIsClicked(!IsClicked);
+    // which button is clicked
+
     const category = e.currentTarget.value;
+
+    for (let i = 0; i < buttons.length; i += 1) {
+      if (buttons[i].value === category) {
+        const ind = buttons[i].count;
+        if (IsClickedButton[ind] === true) {
+          const tempArray = [...IsClickedButton];
+          tempArray[ind] = !tempArray[ind];
+          tempArray[0] = true;
+          setCategoryWord('All');
+          setIsClickedButton(tempArray);
+        } else {
+          const arrayOfFalse = [false, false, false, false];
+          arrayOfFalse[ind] = true;
+          setCategoryWord(buttons[i].value);
+          setIsClickedButton(arrayOfFalse);
+        }
+
+        break;
+      }
+    }
+
+    // Changing the Color of the Button
+
+    // Applying the filter to the categories of the product
+
     if (category !== 'All') {
       const products = await filterProduct(category);
       if (products !== null) {
@@ -41,14 +101,14 @@ export default function ProductButtons(props: {
   return (
     <IndividualContainer>
       <Button
-        isClicked={IsClicked}
+        $pickColor={IsClickedButton[index]}
         key={key}
         value={value}
         onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
           applyFilter(e)
         }
       />
-      <Label isClicked={IsClicked}>{content}</Label>
+      <Label $pickColor={IsClickedButton[index]}>{content}</Label>
     </IndividualContainer>
   );
 }

src/app/storefront/storefrontItems.tsx

@@ -24,7 +24,7 @@ function Storefront({ products }: { products: Product[] }) {
         <IndividualItem
           products={Favorites}
           product={productVal}
-          key={productVal.product_id}
+          key={productVal.id}
         />
       ))}
     </StorefrontWrapper>

src/app/storefront/styles.ts

@@ -24,16 +24,16 @@ export const StickyHeader = styled.div`
   z-index: 2;
 `;
 
-export const Button = styled.button<props>`
-  background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')};
+export const Button = styled.button<{ $pickColor?: boolean }>`
+  background-color: ${props => (props.$pickColor ? '#00507f' : '#C7E1FF')};
   border-radius: 50%;
   width: 50px;
   height: 50px;
   border: transparent;
 `;
 
-export const Label = styled.p<props>`
-  color: ${props => (props.isClicked ? '#00507f' : '#000')};
+export const Label = styled.p<{ $pickColor?: boolean }>`
+  color: ${props => (props.$pickColor ? '#00507f' : '#000')};
   text-align: center;
   font-family: 'Public Sans', sans-serif;
   padding-top: 5px;