Merge pull request #31 from calblueprint/buyankhuu/orders

Buyankhuu/orders

package.json

@@ -24,6 +24,9 @@
     "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "react-feather": "^2.0.10",
+    "react-router-dom": "^6.17.0",
+    "react-toastify": "^9.1.3",
     "styled-components": "^6.0.8"
   },
   "devDependencies": {

src/api/supabase/queries/tests/user_test.ts

@@ -1,11 +1,7 @@
 /* eslint-disable no-console */
 //
 
-import {
-  fetchUserData,
-  fetchUserByUUID,
-  fetchFavoriteItems,
-} from '../user_queries';
+import { fetchUserData, fetchUserByUUID } from '../user_queries';
 
 export async function runFetchUserData() {
   try {
@@ -25,17 +21,3 @@ export async function runFetchUserByUUID() {
     console.error('Error in fetchUserByUUID:', error);
   }
 }
-
-export async function fullFavItemTest() {
-  const testUserId = '4a934844-76fa-4a1a-80d7-fa00597398e1';
-  try {
-    const result = await fetchUserByUUID(testUserId);
-    console.log('fetchUserData Result:', result);
-    let result1 = await fetchFavoriteItems(testUserId);
-    console.log('fetchFavoriteItems Result:', result1);
-    result1 = await fetchFavoriteItems(testUserId);
-    console.log('fetchFavoriteItems Result:', result1);
-  } catch (error) {
-    console.error('Error in incrementCartItemByOne:', error);
-  }
-}

src/api/supabase/queries/user_queries.ts

@@ -7,7 +7,7 @@ import {
   PostgrestError,
   createClient,
 } from '@supabase/supabase-js';
-import { User } from '../../../schema/schema';
+import { User, Product } from '../../../schema/schema';
 
 // Replace these with your Supabase project URL and API key
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
@@ -53,25 +53,107 @@ export async function fetchUserByUUID(uuid: string) {
   }
 }
 
-export async function fetchFavoriteItems(
-  userId: string,
-): Promise<Record<string, number>> {
-  // Fetch fav_items for the specified user
-  const { data, error } = await supabase
-    .from('profiles')
-    .select('fav_items')
-    .eq('user_id', userId)
-    .single();
-
-  if (error) {
-    throw new Error(
-      `An error occurred when trying to fetch favorite items: ${error.message}`,
-    );
-  } else if (!data) {
-    throw new Error('No user found with the specified user_id.');
+export async function getUserInfo(product: Product, isFav: boolean) {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user !== null) {
+    const { data } = await supabase
+      .from('profiles')
+      .select()
+      .eq('user_id', user.id);
+
+    if (data !== null) {
+      const CurrUserFavoriteItems = data[0].fav_items;
+
+      if (isFav) {
+        CurrUserFavoriteItems[product.product_id] = 1;
+      } else {
+        delete CurrUserFavoriteItems[product.product_id];
+      }
+
+      const { error } = await supabase
+        .from('profiles')
+        .update({ fav_items: CurrUserFavoriteItems })
+        .eq('user_id', user.id);
+    }
+  }
+}
+
+export async function arrayOfFavorites() {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user !== null) {
+    const { data: userProfileData, error: userProfileError } = await supabase
+      .from('profiles')
+      .select()
+      .eq('user_id', user.id)
+      .single();
+
+    const CurrUserFavoriteItems = userProfileData.fav_items;
+
+    const Favkey = Object.keys(CurrUserFavoriteItems);
+
+    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)),
+      );
+
+      return FavArray;
+    }
   }
+  return [];
+}
+
+export async function getProduct() {
+  const { data } = await supabase.from('product').select('*');
+  return data;
+}
 
-  return data.fav_items;
+export async function filterProduct(productType: string) {
+  const { data } = await supabase
+    .from('product')
+    .select('*')
+    .eq('category', productType);
+  return data;
 }
 
+export async function totalNumberOfItemsInCart() {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user !== null) {
+    const { data, error } = await supabase
+      .from('profiles')
+      .select()
+      .eq('user_id', user.id)
+      .single();
+
+    if (data !== null) {
+      const CurrUserCart = data.cart;
+
+      if (CurrUserCart === null || CurrUserCart === undefined) {
+        return 0;
+      }
+
+      const itemNumb = Object.values(CurrUserCart) as number[];
+
+      let sum = 0;
 
+      for (let i = 0; i < itemNumb.length; i += 1) {
+        sum += itemNumb[i];
+      }
+
+      return sum;
+    }
+  }
+  return 0;
+}

src/app/[productId]/Buttons.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { toast } from 'react-toastify';
 import {
   ButtonsWrapper,
   AddToCartButton,
@@ -20,6 +21,8 @@ export default function Buttons() {
   };
 
   // used hyphen instead of dash for display
+  const notify = () => toast(`you have added ${quantity} items to the cart!`);
+
   return (
     <ButtonsWrapper>
       <QuantityButton>
@@ -31,7 +34,8 @@ export default function Buttons() {
           +
         </PlusMinusButton>
       </QuantityButton>
-      <AddToCartButton>Add to cart</AddToCartButton>
+
+      <AddToCartButton onClick={notify}>Add to cart</AddToCartButton>
     </ButtonsWrapper>
   );
 }

src/app/[productId]/page.tsx

@@ -4,11 +4,14 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { fetchProductByID } from '../../api/supabase/queries/product_queries';
+import 'react-toastify/dist/ReactToastify.css';
+
 import {
   BackButton,
   ImageContainer,
   TextContainer,
   DescriptionContainer,
+  ToastPopUP,
 } from './styles';
 import { GlobalStyle } from '../../styles/components';
 import NavBar from '../../components/NavBar';
@@ -40,7 +43,14 @@ export default function ItemDisplay({
   return (
     <main>
       <GlobalStyle />
+
       <NavBar />
+      <ToastPopUP
+        position="top-right"
+        autoClose={500}
+        limit={1}
+        hideProgressBar
+      />
       <BackButton>
         <Link href="/storefront">
           <Image

src/app/[productId]/styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
 import COLORS from '../../styles/colors';
 
 export const BackButton = styled.button`
@@ -76,3 +77,10 @@ export const AddToCartButton = styled.button`
   color: ${COLORS.white};
   border-color: transparent;
 `;
+
+export const ToastPopUP = styled(ToastContainer)`
+  position: fixed;
+  z-index: 100;
+
+  transform: translatey(130px);
+`;

src/app/cart/Buttons.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+import { ButtonsWrapper, QuantityButton, PlusMinusButton } from './styles';
+
+export default function Buttons() {
+  const [quantity, setQuantity] = useState<number>(1);
+
+  const increaseQuantity = () => {
+    setQuantity(quantity + 1);
+  };
+
+  const decreaseQuantity = () => {
+    if (quantity > 1) {
+      setQuantity(quantity - 1);
+    }
+  };
+
+  // used hyphen instead of dash for display
+
+  return (
+    <ButtonsWrapper>
+      <QuantityButton>
+        <PlusMinusButton type="button" onClick={decreaseQuantity}>
+          –
+        </PlusMinusButton>
+        <span>{quantity}</span>
+        <PlusMinusButton type="button" onClick={increaseQuantity}>
+          +
+        </PlusMinusButton>
+      </QuantityButton>
+    </ButtonsWrapper>
+  );
+}