feat: change dropdown to radio buttons

AAISS · Nov 28, 2023 · 8f19020 · 8f19020
1 parent 6356b11
commit 8f19020
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 188 deletions.
diff --git a/frontend/src/css/workshops-page.css b/frontend/src/css/workshops-page.css
@@ -0,0 +1,13 @@
+#radio-container-workshops {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    margin-bottom: 30px;
+}
+
+@media only screen and (max-width: 500px) {
+    #radio-container-workshops {
+        flex-direction: column;
+
+    }
+}
diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -1,89 +1,129 @@
-import { CircularProgress } from '@mui/material';
+import {CircularProgress, FormControlLabel, FormLabel, Radio, RadioGroup} from '@mui/material';
+import "../../css/workshops-page.css"
 import ItemCard from '../../components/item-card/item-card.jsx';
 import Toast from '../../components/toast/Toast.jsx';
-import { Helper } from '../../utils/Helper.js';
+import {Helper} from '../../utils/Helper.js';
 import useWorkshopsPage from './useWorkshopsPage.js';
 import './workshops.css';
+import {useCallback} from "react";
 
 export default function WorkshopsPage() {
-  const {
-    parsedItemsList,
-    addToCart,
-    gridTemplateColumnsValue,
-    toastData,
-    setOpenToast,
-    openToast,
-    options,
-    filterOption,
-    setFilterOption,
-    fileteredItems,
-    setFileteredItems,
-  } = useWorkshopsPage();
+    const {
+        parsedItemsList,
+        addToCart,
+        gridTemplateColumnsValue,
+        toastData,
+        setOpenToast,
+        openToast,
+        radioSelectedItem,
+        options,
+        filterOption,
+        handleCheckbox,
+        setFilterOption,
+        fileteredItems,
+        setFileteredItems,
+    } = useWorkshopsPage();
 
-  const handleFilterChange = (option) => {
-    setFilterOption(option);
+    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));
-    }
-  };
+        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 (
-    <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 (
+    const getRenderedItems = useCallback((item, 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}
-              capacity={e.capacity}
-              cost={e.cost}
-              onClickAddToCart={() =>
-                addToCart({
-                  id: e.id,
-                  type: e.isWorkshop ? 'workshop' : 'presentation',
-                })
-              }
+                key={index}
+                isWorkshop={item.isWorkshop}
+                title={item.name}
+                description={item.desc && Helper.omitLongString(item.desc, 50)}
+                purchaseState={0}
+                presenterName={item.presenters.join(', ')}
+                startDate={new Date(item.start_date).toLocaleString()}
+                endDate={new Date(item.end_date).toLocaleString()}
+                level={item.level}
+                capacity={item.capacity}
+                cost={item.cost}
+                onClickAddToCart={() =>
+                    addToCart({
+                        id: item.id,
+                        type: item.isWorkshop ? 'workshop' : 'presentation',
+                    })
+                }
             />
-          );
-        })}
-      {!fileteredItems && <CircularProgress />}
-    </section>
-  );
+        );
+    }, [])
+
+    return (
+        <section
+        >
+            {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>*/}
+            <section style={{
+                display: "flex",
+                alignItems: "center",
+                flexDirection: 'column'
+            }}>
+                <div>
+                    <FormLabel id={"radio-container-workshops-container-label"}>
+                        Filter By:
+                    </FormLabel>
+                    <RadioGroup
+                        id={"radio-container-workshops"}
+                        value={radioSelectedItem}
+                        onChange={handleCheckbox}
+                        name={"radio-container-workshops-container-label"}
+                    >
+                        {options.map((item, index) => (
+                            <FormControlLabel
+                                value={item.id}
+                                control={<Radio/>}
+                                key={index}
+                                label={item.label}
+                            />
+                        ))}
+                    </RadioGroup>
+                </div>
+                <div style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: 'center',
+                    gap: '20px',
+                }}>
+                    {(radioSelectedItem === "all-items") && fileteredItems &&
+                        fileteredItems.map((e, index) => getRenderedItems(e, index))
+                    }
+                    {(radioSelectedItem === "workshops") && fileteredItems &&
+                        fileteredItems.filter(e => e.isWorkshop === true).map((e, index) => getRenderedItems(e, index))
+                    }
+                    {(radioSelectedItem === "presentations") && fileteredItems &&
+                        fileteredItems.filter(e => e.isWorkshop === false).map((e, index) => getRenderedItems(e, index))
+                    }
+                    {!fileteredItems && <CircularProgress/>}
+                </div>
+            </section>
+        </section>
+    );
 }