From b4dd754013e919e1f9942bb45663d95eaef07685 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Wed, 5 Jun 2024 09:17:56 +0530 Subject: [PATCH 001/173] added supabase database to store cart items with username --- src/components/Product.tsx | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/components/Product.tsx b/src/components/Product.tsx index b8896a0..d8008b5 100644 --- a/src/components/Product.tsx +++ b/src/components/Product.tsx @@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom"; import Button from "./Button"; import { toast } from 'react-toastify'; import { MdOutlineShoppingCart } from "react-icons/md"; +import { supabase } from "../utils/client"; interface Data { name: string; @@ -12,9 +13,32 @@ interface Data { function Product({ name, image, price, desc }: Data) { const navigate = useNavigate(); - const addToCart = () => { - // logic for adding in cart - toast.success('Added to Cart', { autoClose: 2000 }); + const addToCart = async () => { + try { + const product = { + name, + image, + price, + desc, + quantity: 1, // assuming quantity as 1, replace with actual quantity + ratings: 5, // assuming ratings as 5, replace with actual ratings + }; + + const { data, error } = await supabase + .from("Cart") + .insert([ + { + username: "username", // replace with actual username + products: [product], + }, + ]); + + if (error) throw error; + console.log("Product added to cart:", data); + toast.success('Product added to cart'); + } catch (error) { + console.error("Error adding product to cart:", error); + } }; const handleNavigate = () => { navigate("/home/shop/product", { state: { name, image, price, desc } }); @@ -37,7 +61,7 @@ function Product({ name, image, price, desc }: Data) { - - ) - }) + availableSizes.map((value) => ( + + )) } -

Rating: @@ -180,16 +211,12 @@ function ProductDetail() { ))} {`${filledStars} out of 5 `} -

-
- +
-
@@ -198,9 +225,8 @@ function ProductDetail() { - ) } -export default ProductDetail \ No newline at end of file +export default ProductDetail; diff --git a/src/utils/client.ts b/src/utils/client.ts index b4c74fa..eac1469 100644 --- a/src/utils/client.ts +++ b/src/utils/client.ts @@ -1,6 +1,7 @@ +// client.ts import { createClient } from "@supabase/supabase-js"; -const supabaseUrl = import.meta.env.VITE_PROJECT_KEY -const supabaseAnonKey = import.meta.env.VITE_ANON_KEY +const supabaseUrl = import.meta.env.VITE_PROJECT_KEY; +const supabaseAnonKey = import.meta.env.VITE_ANON_KEY; -export const supabase = createClient(supabaseUrl, supabaseAnonKey) \ No newline at end of file +export const supabase = createClient(supabaseUrl, supabaseAnonKey); diff --git a/src/utils/cors.ts b/src/utils/cors.ts new file mode 100644 index 0000000..bafbdef --- /dev/null +++ b/src/utils/cors.ts @@ -0,0 +1,6 @@ +// cors.ts +export const corsHeaders = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type', + }; + \ No newline at end of file From 27552c4f8326c7c74c0e164cd2ecf3c2220d4332 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sat, 8 Jun 2024 17:08:12 +0530 Subject: [PATCH 011/173] update ui or cart --- src/pages/Cart/Cart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx index 94ebe7f..64b0e38 100644 --- a/src/pages/Cart/Cart.tsx +++ b/src/pages/Cart/Cart.tsx @@ -60,7 +60,7 @@ const Cart: React.FC = () => {
{cartItems.map((item: ITEM) => ( -
+
From 55983b8400cf8e65b56548029e4e052d4ebd03c7 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sun, 9 Jun 2024 18:58:37 +0530 Subject: [PATCH 012/173] remove unnessary file --- src/utils/cors.ts | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 src/utils/cors.ts diff --git a/src/utils/cors.ts b/src/utils/cors.ts deleted file mode 100644 index bafbdef..0000000 --- a/src/utils/cors.ts +++ /dev/null @@ -1,6 +0,0 @@ -// cors.ts -export const corsHeaders = { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type', - }; - \ No newline at end of file From cf4964e1a2891b015c6f6307d85b48438f3b4e08 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sun, 9 Jun 2024 19:45:02 +0530 Subject: [PATCH 013/173] resolve bug --- src/pages/Shop/ProductDetail.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Shop/ProductDetail.tsx b/src/pages/Shop/ProductDetail.tsx index 87882be..bccd7ee 100644 --- a/src/pages/Shop/ProductDetail.tsx +++ b/src/pages/Shop/ProductDetail.tsx @@ -87,9 +87,9 @@ function ProductDetail() { .from('Cart') .select('*') .eq('username', userName) - .maybeSingle(); + .single(); - if (fetchError) { + if (fetchError && fetchError.code !== 'PGRST116') { // Ignore "No such record" error console.error("Fetch error:", fetchError); throw fetchError; } From 3109dfbc8bf0984bb96f3dbbb9ece316cafc9873 Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Sun, 9 Jun 2024 22:00:18 +0530 Subject: [PATCH 014/173] update cart fetch data from supabase --- src/pages/Cart/Cart.tsx | 43 ++++++++++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx index 64b0e38..b6d90e1 100644 --- a/src/pages/Cart/Cart.tsx +++ b/src/pages/Cart/Cart.tsx @@ -1,6 +1,7 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; -import {useNavigate} from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; +import { supabase } from '../../utils/client'; // Ensure supabase client is properly configured // components import Head from '../../components/Head'; @@ -13,13 +14,41 @@ export interface ITEM { description: string; price: string; title: string; - image: string; + image: string; } const Cart: React.FC = () => { - + const [cartItems, setCartItems] = useState([]); const navigate = useNavigate(); - const cartItems = useSelector((state: RootState) => state.cart.item); + const userName = useSelector((state: RootState) => state.auth.user.username); + + useEffect(() => { + const fetchCartData = async () => { + try { + const { data, error } = await supabase + .from('Cart') + .select('*') + .eq('username', userName) + .maybeSingle(); + + if (error) { + throw error; + } + + if (data && data.products) { + setCartItems(data.products); + } else { + setCartItems([]); + } + } catch (error) { + console.error('Error fetching cart data:', error); + } + }; + + if (userName) { + fetchCartData(); + } + }, [userName]); useEffect(() => { window.scrollTo(0, 0); @@ -60,7 +89,7 @@ const Cart: React.FC = () => {
{cartItems.map((item: ITEM) => ( -
+
@@ -108,7 +137,7 @@ const Cart: React.FC = () => { placeholder="x304k45" />
From 8c6b179b651fec071b88fcb84d45503efd666f9f Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Mon, 10 Jun 2024 18:22:27 +0530 Subject: [PATCH 015/173] added loading skeleton --- package-lock.json | 9 ++++ package.json | 1 + src/pages/Cart/Cart.tsx | 102 ++++++++++++++++++++++++++-------------- 3 files changed, 76 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index a33cf97..3112cd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-hook-form": "^7.51.4", "react-icons": "^5.2.1", "react-intersection-observer": "^9.10.2", + "react-loading-skeleton": "^3.4.0", "react-redux": "^9.1.2", "react-router-dom": "^6.22.1", "react-toastify": "^10.0.5", @@ -3551,6 +3552,14 @@ } } }, + "node_modules/react-loading-skeleton": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz", + "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-redux": { "version": "9.1.2", "license": "MIT", diff --git a/package.json b/package.json index 36fa50e..c04584f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-hook-form": "^7.51.4", "react-icons": "^5.2.1", "react-intersection-observer": "^9.10.2", + "react-loading-skeleton": "^3.4.0", "react-redux": "^9.1.2", "react-router-dom": "^6.22.1", "react-toastify": "^10.0.5", diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx index b6d90e1..8639f0e 100644 --- a/src/pages/Cart/Cart.tsx +++ b/src/pages/Cart/Cart.tsx @@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { supabase } from '../../utils/client'; // Ensure supabase client is properly configured +import Skeleton from 'react-loading-skeleton'; +import 'react-loading-skeleton/dist/skeleton.css'; // components import Head from '../../components/Head'; @@ -19,6 +21,7 @@ export interface ITEM { const Cart: React.FC = () => { const [cartItems, setCartItems] = useState([]); + const [loading, setLoading] = useState(true); const navigate = useNavigate(); const userName = useSelector((state: RootState) => state.auth.user.username); @@ -42,6 +45,8 @@ const Cart: React.FC = () => { } } catch (error) { console.error('Error fetching cart data:', error); + } finally { + setLoading(false); } }; @@ -88,49 +93,74 @@ const Cart: React.FC = () => {
- {cartItems.map((item: ITEM) => ( -
-
-
-
-
- + {loading ? ( + Array(3).fill(0).map((_, index) => ( +
+
+
+
+ +
+
+ +
-
-
-

- {item.title} -

-

- {item.description} -

+
+ +
+
+ +
+
+ +
-
-

- ${item.price} -

-
-
- -
-
-

- ${item.price} -

+ )) + ) : ( + cartItems.map((item: ITEM) => ( +
+
+
+
+
+ +
+
+
+

+ {item.title} +

+

+ {item.description} +

+
+
+
+
+

+ ${item.price} +

+
+
+ +
+
+

+ ${item.price} +

+
-
- ))} + )) + )}
- - Apply Coupon - + Apply Coupon Date: Mon, 10 Jun 2024 18:47:05 +0530 Subject: [PATCH 016/173] update cart --- src/pages/Cart/Cart.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx index 8639f0e..2385d8e 100644 --- a/src/pages/Cart/Cart.tsx +++ b/src/pages/Cart/Cart.tsx @@ -13,9 +13,9 @@ import { RootState } from '../../utils/features/store'; export interface ITEM { id: string; - description: string; + desc: string; price: string; - title: string; + name: string; image: string; } @@ -134,10 +134,10 @@ const Cart: React.FC = () => {

- {item.title} + {item.name}

- {item.description} + {item.desc}

From 27ce987bf7b10d9807d507bf52ee6cc95971f40f Mon Sep 17 00:00:00 2001 From: Soni Dhruv Date: Mon, 10 Jun 2024 19:57:59 +0530 Subject: [PATCH 017/173] update cart lenght --- src/components/Navbar.tsx | 47 +++++++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 2c32eec..229e0e1 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -8,37 +8,55 @@ import Button from "./Button"; import { RootState } from "../utils/features/store"; import { logout } from "../utils/features/Auth/authSlice"; import { Slide, toast } from "react-toastify"; - +import { supabase } from '../utils/client'; // Ensure the correct path to your Supabase client function Screensize() { - const [windowSize, setWindowSize] = useState({ width: window.innerWidth}); + const [windowSize, setWindowSize] = useState({ width: window.innerWidth }); useEffect(() => { const handleResize = () => { - setWindowSize({ width: window.innerWidth}); + setWindowSize({ width: window.innerWidth }); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); - return ( - windowSize.width - ) + return windowSize.width; } -function Floatingnav(){ - if(Screensize() > 1024){ - return( - - ) + +function Floatingnav() { + if (Screensize() > 1024) { + return ; } } + function Navbar() { const userName = useSelector((state: RootState) => state.auth.user?.username); const dispatch = useDispatch(); - const itemsInCart = useSelector((state: RootState) => state.cart.item).length; + const [itemsInCart, setItemsInCart] = useState(0); const [showMenu, setShowMenu] = useState(false); + useEffect(() => { + const fetchCartData = async () => { + if (userName) { + const { data, error } = await supabase + .from('Cart') + .select('products') + .eq('username', userName) + .maybeSingle(); + + if (error) { + console.error('Error fetching cart data:', error); + } else { + setItemsInCart(data?.products?.length || 0); + } + } + }; + + fetchCartData(); + }, [userName]); + const toastNotification = (message: string) => { toast(message, { position: "top-right", @@ -48,10 +66,11 @@ function Navbar() { transition: Slide, }); }; - + const handleToggleMenu = () => { setShowMenu((prev) => !prev); }; + const handleCloseMenu = () => { setShowMenu(false); }; @@ -82,7 +101,7 @@ function Navbar() { >
- + {itemsInCart}
From 695f42a2b1dd37ca7bddfafbe422f66d3e520906 Mon Sep 17 00:00:00 2001 From: nagalakshmi08 Date: Mon, 10 Jun 2024 20:02:07 +0530 Subject: [PATCH 018/173] Shop header --- package-lock.json | 8 ++++---- src/pages/Shop/Shop.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index a33cf97..be2783d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1433,12 +1433,12 @@ }, "node_modules/@types/prop-types": { "version": "15.7.11", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.2.55", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -1456,7 +1456,7 @@ }, "node_modules/@types/scheduler": { "version": "0.16.8", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@types/semver": { @@ -2049,7 +2049,7 @@ }, "node_modules/csstype": { "version": "3.1.3", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/culori": { diff --git a/src/pages/Shop/Shop.tsx b/src/pages/Shop/Shop.tsx index 584ecfa..123dda5 100644 --- a/src/pages/Shop/Shop.tsx +++ b/src/pages/Shop/Shop.tsx @@ -129,9 +129,9 @@ function Shop() { return ( <> -
+
-
+
{/* The button to open modal */}