From 2e393c2d9cafb3fc72d8785937b438a935540bea Mon Sep 17 00:00:00 2001
From: Moataz Nabil <moataznabil2019@gmail.com>
Date: Tue, 3 Dec 2024 22:01:28 +0100
Subject: [PATCH] fix add review

---
 src/components/product/AddReview.tsx      | 13 +++++-
 src/components/product/ProductReviews.tsx | 35 ++++++++++++---
 src/database/db.ts                        | 40 +++++++++++++----
 src/store/useStore.ts                     | 55 +++++++++++++----------
 4 files changed, 104 insertions(+), 39 deletions(-)

diff --git a/src/components/product/AddReview.tsx b/src/components/product/AddReview.tsx
index 58c35ce..4127a36 100644
--- a/src/components/product/AddReview.tsx
+++ b/src/components/product/AddReview.tsx
@@ -12,15 +12,17 @@ export const AddReview: React.FC<AddReviewProps> = ({ productId, onReviewSubmit
   const [rating, setRating] = useState(5);
   const [comment, setComment] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const { auth, addReview } = useStore();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!auth.user) return;
+
     setIsSubmitting(true);
+    setError(null);
 
     try {
-      if (!auth.user) throw new Error('User not authenticated');
-
       await addReview({
         productId,
         userId: auth.user.id,
@@ -34,6 +36,7 @@ export const AddReview: React.FC<AddReviewProps> = ({ productId, onReviewSubmit
       setRating(5);
       onReviewSubmit();
     } catch (error) {
+      setError('Failed to submit review. Please try again.');
       console.error('Failed to submit review:', error);
     } finally {
       setIsSubmitting(false);
@@ -79,6 +82,12 @@ export const AddReview: React.FC<AddReviewProps> = ({ productId, onReviewSubmit
         />
       </div>
 
+      {error && (
+        <p className="text-red-600 text-sm" data-testid="review-error">
+          {error}
+        </p>
+      )}
+
       <Button
         type="submit"
         isLoading={isSubmitting}
diff --git a/src/components/product/ProductReviews.tsx b/src/components/product/ProductReviews.tsx
index 0a2d700..0988469 100644
--- a/src/components/product/ProductReviews.tsx
+++ b/src/components/product/ProductReviews.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Star } from 'lucide-react';
 import { useStore } from '../../store/useStore';
 import { AddReview } from './AddReview';
+import { Review } from '../../types';
 
 interface ProductReviewsProps {
   productId: string;
@@ -9,11 +10,27 @@ interface ProductReviewsProps {
 
 export const ProductReviews: React.FC<ProductReviewsProps> = ({ productId }) => {
   const { auth, getProductReviews } = useStore();
-  const reviews = getProductReviews(productId);
-  const [refreshKey, setRefreshKey] = useState(0);
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
-  const handleReviewSubmit = () => {
-    setRefreshKey(prev => prev + 1);
+  useEffect(() => {
+    const loadReviews = async () => {
+      try {
+        const productReviews = await getProductReviews(productId);
+        setReviews(productReviews);
+      } catch (error) {
+        console.error('Failed to load reviews:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadReviews();
+  }, [productId, getProductReviews]);
+
+  const handleReviewSubmit = async () => {
+    const updatedReviews = await getProductReviews(productId);
+    setReviews(updatedReviews);
   };
 
   const StarRating = ({ value }: { value: number }) => (
@@ -28,6 +45,14 @@ export const ProductReviews: React.FC<ProductReviewsProps> = ({ productId }) =>
     </div>
   );
 
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6" data-testid="product-reviews">
       <h2 className="text-2xl font-bold">Customer Reviews</h2>
diff --git a/src/database/db.ts b/src/database/db.ts
index 7ce7ce6..10117e6 100644
--- a/src/database/db.ts
+++ b/src/database/db.ts
@@ -4,7 +4,7 @@ import { User, Order, Review } from '../types';
 interface ShopDB extends DBSchema {
   users: {
     key: string;
-    value: User;
+    value: User & { password: string };
     indexes: { 'by-email': string };
   };
   orders: {
@@ -36,7 +36,7 @@ const dbPromise = openDB<ShopDB>('shop-db', 1, {
 });
 
 export const UserDB = {
-  create: async (user: Omit<User, 'id'>) => {
+  create: async (user: Omit<User & { password: string }, 'id'>) => {
     const db = await dbPromise;
     const id = crypto.randomUUID();
     const newUser = { ...user, id };
@@ -54,6 +54,15 @@ export const UserDB = {
     return await db.get('users', id);
   },
 
+  update: async (id: string, data: Partial<User>) => {
+    const db = await dbPromise;
+    const user = await db.get('users', id);
+    if (!user) throw new Error('User not found');
+    const updatedUser = { ...user, ...data };
+    await db.put('users', updatedUser);
+    return updatedUser;
+  },
+
   delete: async (id: string) => {
     const db = await dbPromise;
     await db.delete('users', id);
@@ -85,6 +94,15 @@ export const OrderDB = {
     return await db.getAllFromIndex('orders', 'by-user', userId);
   },
 
+  update: async (id: string, data: Partial<Order>) => {
+    const db = await dbPromise;
+    const order = await db.get('orders', id);
+    if (!order) throw new Error('Order not found');
+    const updatedOrder = { ...order, ...data, updatedAt: new Date().toISOString() };
+    await db.put('orders', updatedOrder);
+    return updatedOrder;
+  },
+
   delete: async (id: string) => {
     const db = await dbPromise;
     await db.delete('orders', id);
@@ -92,14 +110,10 @@ export const OrderDB = {
 };
 
 export const ReviewDB = {
-  create: async (review: Omit<Review, 'id' | 'createdAt'>) => {
+  create: async (review: Omit<Review, 'id'>) => {
     const db = await dbPromise;
     const id = crypto.randomUUID();
-    const newReview = {
-      ...review,
-      id,
-      createdAt: new Date().toISOString()
-    };
+    const newReview = { ...review, id };
     await db.add('reviews', newReview);
     return newReview;
   },
@@ -114,13 +128,21 @@ export const ReviewDB = {
     return await db.getAllFromIndex('reviews', 'by-product', productId);
   },
 
+  update: async (id: string, data: Partial<Review>) => {
+    const db = await dbPromise;
+    const review = await db.get('reviews', id);
+    if (!review) throw new Error('Review not found');
+    const updatedReview = { ...review, ...data };
+    await db.put('reviews', updatedReview);
+    return updatedReview;
+  },
+
   delete: async (id: string) => {
     const db = await dbPromise;
     await db.delete('reviews', id);
   }
 };
 
-// Function to clean the database (for development/testing)
 export const cleanDatabase = async () => {
   const db = await dbPromise;
   await db.clear('reviews');
diff --git a/src/store/useStore.ts b/src/store/useStore.ts
index 7022f31..36adb86 100644
--- a/src/store/useStore.ts
+++ b/src/store/useStore.ts
@@ -80,20 +80,6 @@ export const useStore = create<Store>((set, get) => ({
     maxPrice: Number.MAX_SAFE_INTEGER,
     sortBy: '',
   },
-  updateProductStock: (productId: string, quantity: number) => {
-    set((state) => ({
-      products: state.products.map((product) =>
-        product.id === productId
-          ? { ...product, stock: Math.max(0, product.stock - quantity) }
-          : product
-      ),
-      filteredProducts: state.filteredProducts.map((product) =>
-        product.id === productId
-          ? { ...product, stock: Math.max(0, product.stock - quantity) }
-          : product
-      ),
-    }));
-  },
   setFilters: (newFilters) => {
     const currentFilters = get().filters;
     const updatedFilters = { ...currentFilters, ...newFilters };
@@ -133,13 +119,25 @@ export const useStore = create<Store>((set, get) => ({
       };
     });
   },
+  updateProductStock: (productId: string, quantity: number) => {
+    set((state) => ({
+      products: state.products.map((product) =>
+        product.id === productId
+          ? { ...product, stock: Math.max(0, product.stock - quantity) }
+          : product
+      ),
+      filteredProducts: state.filteredProducts.map((product) =>
+        product.id === productId
+          ? { ...product, stock: Math.max(0, product.stock - quantity) }
+          : product
+      ),
+    }));
+  },
 
   // Cart
   cart: [],
   addToCart: (product) => {
-    if (product.stock === 0) {
-      return;
-    }
+    if (product.stock === 0) return;
     
     set((state) => {
       const existingItem = state.cart.find((item) => item.id === product.id);
@@ -324,14 +322,25 @@ export const useStore = create<Store>((set, get) => ({
   // Reviews
   reviews: [],
   addReview: async (review) => {
-    const newReview = await ReviewDB.create(review);
-    if (newReview) {
-      set((state) => ({
-        reviews: [...state.reviews, newReview],
-      }));
+    try {
+      const newReview = await ReviewDB.create(review);
+      if (newReview) {
+        set((state) => ({
+          reviews: [...state.reviews, newReview],
+        }));
+      }
+    } catch (error) {
+      console.error('Failed to add review:', error);
+      throw error;
     }
   },
   getProductReviews: async (productId) => {
-    return await ReviewDB.findByProduct(productId);
+    try {
+      const reviews = await ReviewDB.findByProduct(productId);
+      return reviews;
+    } catch (error) {
+      console.error('Failed to get product reviews:', error);
+      return [];
+    }
   },
 }));
\ No newline at end of file