Merge pull request #223 from Project-Juniors-Club/sltsheryl/fix-cart

fix cart bug
sltsheryl · Jan 14, 2024 · a2fa4fe · a2fa4fe
2 parents d8ac0ab + dd4aa09
commit a2fa4fe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/components/navbar/UserDropdown.tsx b/components/navbar/UserDropdown.tsx
@@ -20,4 +20,4 @@ const UserDropdown = () => {
   );
 };
 
-export default UserDropdown;
+export default UserDropdown;
diff --git a/pages/apply-vouchers/index.tsx b/pages/apply-vouchers/index.tsx
@@ -12,18 +12,22 @@ import { createImportSpecifier } from 'typescript';
 const ApplyVouchers = () => {
   const router = useRouter();
   const [cartCourses, setCartCourses] = useState([]);
+  const [total, setTotal] = useState(0);
 
   useEffect(() => {
     const courseList = JSON.parse(localStorage.getItem('Cart'));
-    console.log(courseList);
     const numPriceCourseList = courseList.map(course => {
       course.price = parseInt(course.price).toFixed(2);
       return course;
     });
-    console.log(numPriceCourseList);
     setCartCourses(numPriceCourseList);
   }, []);
 
+  useEffect(() => {
+    const newTotal = cartCourses.reduce((acc, course) => acc + parseFloat(course.price), 0);
+    setTotal(newTotal.toFixed(2));
+  }, [cartCourses, total]);
+
   const handleBack = () => {
     router.push('/view-cart');
   };
@@ -41,25 +45,25 @@ const ApplyVouchers = () => {
         </Text>
         <Text pl='160px'>Apply voucher codes, if any</Text>
       </Box>
-      <VoucherTable cartCourses={cartCourses} />
-      <TotalSummaryBox cartCourses={cartCourses} handleBack={handleBack} handleCheckout={handleCheckout} />
+      <VoucherTable cartCourses={cartCourses} setCartCourses={setCartCourses} />
+      <TotalSummaryBox cartCourses={cartCourses} handleBack={handleBack} handleCheckout={handleCheckout} total={total} />
     </Layout>
   );
 };
 
-const VoucherTable = ({ cartCourses }) => {
+const VoucherTable = ({ cartCourses, setCartCourses }) => {
   return (
     <Table variant='simple'>
       <tbody>
         {cartCourses.map((course, index) => (
-          <VoucherEntry course={course} key={index} />
+          <VoucherEntry course={course} cartCourses={cartCourses} setCartCourses={setCartCourses} key={index} />
         ))}
       </tbody>
     </Table>
   );
 };
 
-const VoucherEntry = ({ course }) => {
+const VoucherEntry = ({ course, cartCourses, setCartCourses }) => {
   const [text, setText] = useState('');
   const [voucherSaving, setVoucherSaving] = useState(0);
 
@@ -74,7 +78,21 @@ const VoucherEntry = ({ course }) => {
     //   setVoucherSaving(voucher.discount);
     // }
     setVoucherSaving(1); // for testing
-    course.price -= voucherSaving;
+
+    setCartCourses(prevCartCourses => {
+      const updatedCartCourses = prevCartCourses.map(c => {
+        if (c.id === course.id) {
+          const newPrice = parseFloat(c.price) - voucherSaving;
+          return {
+            ...c,
+            price: newPrice.toFixed(2),
+          };
+        }
+        return c;
+      });
+
+      return updatedCartCourses;
+    });
   };
 
   return (
@@ -118,7 +136,7 @@ const VoucherEntry = ({ course }) => {
   );
 };
 
-const TotalSummaryBox = ({ cartCourses, handleBack, handleCheckout }) => {
+const TotalSummaryBox = ({ cartCourses, handleBack, handleCheckout, total }) => {
   return (
     <Box
       marginInline='25%'
@@ -138,7 +156,7 @@ const TotalSummaryBox = ({ cartCourses, handleBack, handleCheckout }) => {
           Total ({cartCourses.length} {cartCourses.length > 1 ? 'courses' : 'course'})
         </Text>
         <Text fontWeight='700' fontSize='28px'>
-          ${cartCourses.reduce((acc, course) => acc + course.price, 0)}
+          ${total}
         </Text>
       </Box>
       <Box display='flex' flexDir='row'>

diff --git a/pages/view-cart/index.tsx b/pages/view-cart/index.tsx
@@ -28,7 +28,7 @@ const ViewCart = ({ courses }) => {
     setCartCourses(coursesObjWithPrice);
   }, [courses]);
   const [checkedItems, setCheckedItems] = useState([]);
-  const allChecked = useMemo(() => (checkedItems.length > 0 ? checkedItems.every(Boolean) : false), [checkedItems]);
+  const allChecked = useMemo(() => checkedItems.length === cartCourses.length && checkedItems.every(Boolean), [checkedItems, cartCourses]);
   const handleRemove = async index => {
     await axios.delete(`/api/cart/${cartCourses[index].id}`, {
       data: {