feat: added remove-from-cart

frontend/src/pages/my-account/MyAccount.jsx

@@ -2,11 +2,19 @@ import React, { useState } from 'react';
 import { Box, Button, Divider, Stack, Tab, Tabs, Typography } from '@mui/material';
 import ItemCard from '../../components/item-card/item-card.jsx';
 import useMyAccount from './useMyAccount.js';
+import {Helper} from "../../utils/Helper.js";
+import Toast from "../../Components/toast/Toast.jsx";
 
 const TAB_ITEMS = ['Workshops', 'Talks', 'Cart'];
 
 const MyAccount = () => {
-  const { talks, workshops, cart } = useMyAccount();
+  const { talks,
+    workshops,
+    cart,
+    removeFromCartHandler,
+    toastData,
+    openToast,
+    setOpenToast } = useMyAccount();
   const [tabValue, setTabValue] = useState(TAB_ITEMS[0]);
 
   const handleChangeTab = (event, newValue) => {
@@ -27,17 +35,19 @@ const MyAccount = () => {
   };
 
   const List = ({ type, items }) => {
+    if (items == null)
+      return
     return items.map((item, index) => (
       <ItemCard
         key={index}
         isWorkshop={type === 'Workshops'}
         purchaseState={type === 'Cart' ? 1 : 2}
         title={item.name}
-        description={item.desc}
+        description={Helper.omitLongString(item.desc, 100)}
         level={item.level}
         startDate={item.start_date}
         endDate={item.end_date}
-        presenterName={item.presenters[0]}
+        presenterName={item.presenters?.[0]}
         cost={item.cost}
         hasProject={item.hasProject}
         prerequisites={item.prerequisites}
@@ -46,22 +56,29 @@ const MyAccount = () => {
         isFull={item.isFull}
         addToCalendarLink={item.addToCalendarLink}
         onClickAddToCart={() => {}}
-        onClickRemoveFromCart={() => {}}
+        onClickRemoveFromCart={() => removeFromCartHandler({id: item.id, type: item.type})}
       />
     ));
   };
 
   const calculateTotalCost = () => {
+    if (!cart)
+      return 0
     let total = 0;
     cart.forEach(({ cost }) => {
-      console.log(cost);
       total += cost;
     });
     return total;
   };
 
   return (
     <Stack alignItems="center">
+      <Toast
+          open={openToast}
+          setOpen={setOpenToast}
+          alertType={toastData?.alertType}
+          message={toastData?.message}
+      />
       <Box sx={{ bgcolor: 'var(--background-color)', px: 4, pb: 8, borderRadius: '30px', width: '80%' }}>
         <Box sx={{ width: '100%' }}>
           <Tabs value={tabValue} onChange={handleChangeTab} centered>

frontend/src/pages/my-account/useMyAccount.js

@@ -1,163 +1,130 @@
+import {useCallback, useEffect, useState} from "react";
+import {useAPI} from "../../providers/APIProvider/APIProvider.jsx";
+import {useConfig} from "../../providers/config-provider/ConfigProvider.jsx";
+
 export default function useMyAccount() {
-  const talks = [
-    {
-      id: 1,
-      name: 'Discriminative Feature Learning and Face Recognition',
-      desc: 'پیش‌نیازهای کارگاه: \r\nKeras, Tensorflow, Convnet',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-31T18:00:00Z',
-      presenters: [],
-      cost: 50000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 30,
-      isFull: false,
-      addToCalendarLink: 'https://google.com',
-    },
-    {
-      id: 2,
-      name: 'A tutorial on evaluating generative models',
-      desc: 'A tutorial on evaluating generative models',
-      year: 2021,
-      level: 'Elementary',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-31T18:00:00Z',
-      presenters: [10],
-      cost: 50000,
-      hasProject: false,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 50,
-      isFull: false,
-      addToCalendarLink: 'https://google.com',
-    },
-    {
-      id: 3,
-      name: 'on the privacy Risks of algorithmic fairness',
-      desc: 'on the privacy Risks of algorithmic fairness',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [11],
-      cost: 12000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 20,
-      isFull: true,
-      addToCalendarLink: 'https://google.com',
-    },
-  ];
 
-  const workshops = [
-    {
-      id: 4,
-      name: 'Foundations of Data Augmentation',
-      desc: 'Foundations of Data Augmentation',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [13],
-      cost: 50000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 50,
-      isFull: true,
-      addToCalendarLink: 'https://google.com',
-    },
-    {
-      id: 5,
-      name: 'Representation Learning Without Labels',
-      desc: 'Representation Learning Without Labels',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [16],
-      cost: 20000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 20,
-      isFull: false,
-      addToCalendarLink: 'https://google.com',
-    },
-    {
-      id: 6,
-      name: '3D CNNs with Adaptive Temporal Feature Resolutions',
-      desc: '3D CNNs with Adaptive Temporal Feature Resolutions',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [14],
-      cost: 50000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 50,
-      isFull: false,
-      addToCalendarLink: 'https://google.com',
-    },
-    {
-      id: 7,
-      name: 'Learning Representations on Graphs',
-      desc: 'Learning Representations on Graphs',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [17],
-      cost: 50000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 50,
-      isFull: false,
-      addToCalendarLink: 'https://google.com',
-    },
-    {
-      id: 8,
-      name: 'An Introduction to Autonomous Vehicles',
-      desc: 'An Introduction to Autonomous Vehicles',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [18],
-      cost: 50000,
-      hasProject: true,
-      prerequisites: 'Basic knowledge of machine learning',
-      syllabus: 'GANs in different type of problems - Various types of GANs - Coding',
-      capacity: 50,
-      isFull: false,
-      addToCalendarLink: 'https://google.com',
-    },
-  ];
+    const {
+        getUserWorkshops,
+        getUserPresentations,
+        userPresentationsData,
+        userWorkshopsData,
+        getWorkshopsData,
+        getPresentationsData,
+        workshopsData,
+        presentationsData,
+        removeFromUserCart,
+        removeFromCartResponse,
+        setRemoveFromCartResponse,
+        setWorkshopsData,
+        setPresentationsData,
+    } = useAPI()
+
+    const {
+        accessToken
+    } = useConfig()
+
+    const [talks, setTalks] = useState()
+    const [workshops, setWorkshops] = useState()
+    const [cart, setCart] = useState()
+    const [openToast, setOpenToast] = useState()
+    const [toastData, setToastData] = useState()
+
+    const removeFromCartHandler = useCallback(({id, type}) => {
+        removeFromUserCart({
+            id: id,
+            type: type,
+        })
+    }, [removeFromUserCart])
+
+    useEffect(() => {
+        if (removeFromCartResponse == null)
+            return
+
+        const toastDataTemp = {}
+        switch (removeFromCartResponse.status) {
+            case "200":
+                toastDataTemp.message = "Item Removed Successfully"
+                toastDataTemp.alertType = "success"
+                break;
+            case "400":
+                toastDataTemp.message = "Failed to Remove Item"
+                toastDataTemp.alertType = "error"
+                break;
+            default:
+                toastDataTemp.message = "Unknown Error. Please Try Again Later"
+                toastDataTemp.alertType = "error"
+                break;
+        }
+
+        setRemoveFromCartResponse(null)
+        setToastData(toastDataTemp)
+        setOpenToast(true)
+        setWorkshopsData(null)
+        setPresentationsData(null)
+        getUserWorkshops()
+        getUserPresentations()
+    }, [removeFromCartResponse])
+
+    useEffect(() => {
+        if (!accessToken)
+            return
+
+        getWorkshopsData()
+        getPresentationsData()
+        getUserWorkshops()
+        getUserPresentations()
+    }, [accessToken, getUserPresentations, getUserWorkshops])
+
+    useEffect(() => {
+        if (!userPresentationsData
+            || !userWorkshopsData
+            || !workshopsData
+            || !presentationsData)
+            return
+
+        console.log("thing")
+
+        const userTempPresentations = []
+        const userTempWorkshops = []
+        const userTempCart = []
+        for (const presentation of presentationsData) {
+            for (const userPresentation of userPresentationsData.data) {
+                if (presentation.id === userPresentation.id) {
+                    presentation.type = "presentation"
+                    if (userPresentation.status !== "AWAITING_PAYMENT") {
+                        userTempPresentations.push(presentation)
+                    } else {
+                        userTempCart.push(presentation)
+                    }
+                }
+            }
+        }
+        for (const workshop of workshopsData) {
+            for (const userWorkshop of userWorkshopsData.data) {
+                if (workshop.id === userWorkshop.id) {
+                    workshop.type = "workshop"
+                    if (userWorkshop.status !== "AWAITING_PAYMENT") {
+                        userTempWorkshops.push(workshop)
+                    } else {
+                        userTempCart.push(workshop)
+                    }
+                }
+            }
+        }
 
-  const cart = [
-    {
-      id: 4,
-      name: 'Foundations of Data Augmentation',
-      desc: 'Foundations of Data Augmentation',
-      year: 2021,
-      level: 'NOT_ASSIGNED',
-      start_date: '2021-08-27T06:00:00Z',
-      end_date: '2021-08-30T18:00:00Z',
-      presenters: [13],
-      cost: 120000,
-    },
-  ];
+        setTalks(userTempPresentations)
+        setWorkshops(userTempWorkshops)
+        setCart(userTempCart)
+    }, [userPresentationsData, workshopsData, presentationsData, userWorkshopsData])
 
-  return {
-    talks,
-    workshops,
-    cart,
-  };
+    return {
+        talks,
+        workshops,
+        removeFromCartHandler,
+        cart,
+        toastData,
+        openToast,
+        setOpenToast
+    };
 }