Merge pull request #31 from AAISS/front/feature/filter-workshop

Front/feature/filter workshop

frontend/src/pages/workshops/WorkshopsPage.jsx

@@ -3,51 +3,85 @@ import ItemCard from '../../components/item-card/item-card.jsx';
 import Toast from '../../components/toast/Toast.jsx';
 import { Helper } from '../../utils/Helper.js';
 import useWorkshopsPage from './useWorkshopsPage.js';
+import './workshops.css'
 
 export default function WorkshopsPage() {
-  const { parsedItemsList, addToCart, toastData, setOpenToast, openToast } = useWorkshopsPage();
-
-  const getItemsList = () => {
-    if (parsedItemsList) {
-      return parsedItemsList.map((item, index) => (
-        <ItemCard
-          key={index}
-          isWorkshop={item.isWorkshop}
-          title={item.name}
-          description={item.desc && Helper.omitLongString(item.desc, 50)}
-          purchaseState={0}
-          presenterName={item.presenters.join(', ')}
-          cost={item.cost}
-          capacity={item.capacity}
-          startDate={new Date(item.start_date).toLocaleString()}
-          endDate={new Date(item.end_date).toLocaleString()}
-          level={item.level}
-          onClickAddToCart={() =>
-            addToCart({
-              id: item.id,
-              type: item.isWorkshop ? 'workshop' : 'presentation',
-            })
-          }
-        />
-      ));
+
+    const {
+        parsedItemsList,
+        addToCart,
+        gridTemplateColumnsValue,
+        toastData,
+        setOpenToast,
+        openToast,
+        options,
+        filterOption,
+        setFilterOption,
+        fileteredItems,
+        setFileteredItems
+    } = useWorkshopsPage()
+
+
+    const handleFilterChange = (option) => {
+            setFilterOption(option)
+
+            if (option == "All Items"){
+                setFileteredItems(parsedItemsList)
+            }
+
+            else if (option == 'Workshops'){
+                setFileteredItems(parsedItemsList?.filter(item => item.isWorkshop))
+            }
+
+            else if (option == 'Presentations'){
+                setFileteredItems(parsedItemsList?.filter(item => !item.isWorkshop))
+            }
     }
 
-    return <CircularProgress />;
-  };
-
-  return (
-    <section
-      style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gap: '20px',
-      }}
-    >
-      {toastData && (
-        <Toast open={openToast} setOpen={setOpenToast} alertType={toastData.type} message={toastData.message} />
-      )}
-      {getItemsList()}
-    </section>
-  );
+    return (
+        <section style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          gap: '20px',
+        }}>
+            {toastData && <Toast
+                open={openToast}
+                setOpen={setOpenToast}
+                alertType={toastData.type}
+                message={toastData.message}
+            />}
+            <div className="filter-dropdown-container">
+                <select  name="filter" id="" className="filter-dropdown-select"
+                    value={filterOption}
+                    onChange={(e) => handleFilterChange(e.target.value)}
+                >
+                     {options.map((option) => (
+                        <option key={option} value={option}>
+                        {option}
+                        </option>
+                     ))}
+                </select>
+            </div>
+            {fileteredItems && fileteredItems.map((e, index) => {
+                return (
+                    <ItemCard
+                        key={index}
+                        isWorkshop={e.isWorkshop}
+                        title={e.name}
+                        description={e.desc && Helper.omitLongString(e.desc, 50)}
+                        purchaseState={0}
+                        presenterName={e.presenters.join(", ")}
+                        startDate={new Date(e.start_date).toLocaleString()}
+                        endDate={new Date(e.end_date).toLocaleString()}
+                        level={e.level}
+                        onClickAddToCart={() => addToCart({
+                            id: e.id,
+                            type: e.isWorkshop ? "workshop" : "presentation"
+                        })}
+                    />
+                )
+            })}
+        </section>
+    )
 }

frontend/src/pages/workshops/useWorkshopsPage.js

@@ -2,24 +2,30 @@ import { useCallback, useEffect, useState } from 'react';
 import { useAPI } from '../../providers/APIProvider/APIProvider.jsx';
 
 export default function useWorkshopsPage() {
-  const {
-    getWorkshopsData,
-    workshopsData,
-    getPresentationsData,
-    presentationsData,
-    addToCartResponse,
-    addItemToCart,
-    teachersData,
-    getTeachersData,
-    presenterData,
-    getPresenterData,
-    setAddToCartResponse,
-  } = useAPI();
+    const {
+        getWorkshopsData,
+        workshopsData,
+        getPresentationsData,
+        presentationsData,
+        addToCartResponse,
+        addItemToCart,
+        teachersData,
+        getTeachersData,
+        presenterData,
+        getPresenterData,
+        setAddToCartResponse,
+    } = useAPI()
 
-  const [parsedItemsList, setParsedItemsList] = useState();
-  const [gridTemplateColumnsValue, setGridTemplateColumnsValue] = useState('');
-  const [toastData, setToastData] = useState(false);
-  const [openToast, setOpenToast] = useState(false);
+    const options = ["All Items", "Workshops", "Presentations"]
+
+    const [parsedItemsList, setParsedItemsList] = useState()
+    const [fileteredItems, setFileteredItems] = useState()
+    const [gridTemplateColumnsValue, setGridTemplateColumnsValue] = useState("")
+    const [toastData, setToastData] = useState(false)
+    const [openToast, setOpenToast] = useState(false)
+    const [filterOption, setFilterOption] = useState(options[0])
+
+
 
   useEffect(() => {
     const func = () => {
@@ -58,59 +64,64 @@ export default function useWorkshopsPage() {
     getPresenterData();
   }, [getPresentationsData, getWorkshopsData]);
 
-  useEffect(() => {
-    if (workshopsData == null || presentationsData == null || teachersData == null || presenterData == null) return;
+    useEffect(() => {
+        if (workshopsData == null
+          || presentationsData == null
+        || teachersData == null
+        || presenterData == null) return
 
-    const parsedData = workshopsData
-      .concat(presentationsData)
-      .map((workshop) => {
-        if ('is_full' in workshop && !('id' in workshop)) return null;
-        if (workshop.year < 2023) return;
-        const item = {};
+        const parsedData = workshopsData.concat(presentationsData).map(workshop => {
+            if ("is_full" in workshop && !("id" in workshop)) return null
+            if (workshop.year < 2023)
+              return
+            const item = {}
 
-        const presenters = [];
-        if (workshop.teachers) {
-          workshop.teachers.forEach((item) => {
-            presenters.push(teachersData.filter((el) => el.id === item)[0].name);
-          });
-        } else {
-          workshop.presenters.forEach((item) => {
-            presenters.push(presenterData.filter((el) => el.id === item)[0].name);
-          });
-        }
-        item.presenters = presenters;
+            const presenters = []
+            if (workshop.teachers) {
+              workshop.teachers.forEach(item => {
+                presenters.push(teachersData.filter(el => el.id === item)[0].name);
+              })
+            } else {
+              workshop.presenters.forEach(item => {
+                presenters.push(presenterData.filter(el => el.id === item)[0].name);
+              })
+            }
+            item.presenters = presenters
 
-        item['id'] = workshop.id;
-        item['name'] = workshop.name;
-        item['start_date'] = workshop.start_date;
-        item['end_date'] = workshop.end_date;
-        item['level'] = workshop.level;
-        item['desc'] = workshop.desc;
-        item['cost'] = workshop.cost;
-        item['capacity'] = workshop.capacity;
-        item['isWorkshop'] = !('presenters' in workshop);
-        return item;
-      })
-      .filter((e) => e != null);
-    setParsedItemsList(parsedData);
-  }, [workshopsData, presentationsData, presenterData, teachersData]);
+            item["id"] = workshop.id
+            item["name"] = workshop.name
+            item["start_date"] = workshop.start_date
+            item["end_date"] = workshop.end_date
+            item["level"] = workshop.level
+            item["desc"] = workshop.desc
+            item["isWorkshop"] = !("presenters" in workshop)
+            return item
+        }).filter(e => e != null)
+        setParsedItemsList(parsedData)
+        setFileteredItems(parsedData)
+    }, [workshopsData, presentationsData, presenterData, teachersData])
 
-  const addToCart = useCallback(
-    ({ id, type }) => {
-      addItemToCart({
-        id,
-        type,
-      });
-    },
-    [addItemToCart],
-  );
+    const addToCart = useCallback(({
+                                       id,
+                                       type
+                                   }) => {
+        addItemToCart({
+            id,
+            type,
+        })
+    }, [addItemToCart])
 
-  return {
-    parsedItemsList,
-    addToCart,
-    gridTemplateColumnsValue,
-    toastData,
-    setOpenToast,
-    openToast,
-  };
+    return {
+        parsedItemsList,
+        addToCart,
+        gridTemplateColumnsValue,
+        toastData,
+        setOpenToast,
+        openToast,
+        options,
+        filterOption,
+        setFilterOption,
+        fileteredItems,
+        setFileteredItems
+    }
 }

frontend/src/pages/workshops/workshops.css

@@ -0,0 +1,32 @@
+.filter-dropdown-container {
+    margin-bottom: 20px;
+    width: 100%;
+    height:3rem;
+    display: flex;
+    justify-content: center;
+  }
+
+.filter-dropdown-container label {
+    margin-right: 10px;
+  }
+
+.filter-dropdown-select {
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+    width: 70%;
+    background-color: #e3f2fd;
+  }
+
+.filter-dropdown-select:hover {
+    border-color: #888;
+  }
+
+.filter-dropdown-select:focus {
+    border-color: #333;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  }
+