From 8f190201ea94022d4985c748868c079336dd91fd Mon Sep 17 00:00:00 2001 From: Alireza Date: Tue, 28 Nov 2023 18:52:38 +0330 Subject: [PATCH] feat: change dropdown to radio buttons --- frontend/src/css/workshops-page.css | 13 + .../src/pages/workshops/WorkshopsPage.jsx | 194 ++++++++------ .../src/pages/workshops/useWorkshopsPage.js | 243 ++++++++++-------- 3 files changed, 262 insertions(+), 188 deletions(-) create mode 100644 frontend/src/css/workshops-page.css diff --git a/frontend/src/css/workshops-page.css b/frontend/src/css/workshops-page.css new file mode 100644 index 0000000..80b1872 --- /dev/null +++ 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 index 56e5162..b841036 100644 --- 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 ( -
- {toastData && ( - - )} -
- -
- {fileteredItems && - fileteredItems.map((e, index) => { - return ( + const getRenderedItems = useCallback((item, index) => { + return ( - 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 && } -
- ); + ); + }, []) + + return ( +
+ {toastData && ( + + )} + {/*
*/} + {/* handleFilterChange(e.target.value)}*/} + {/* >*/} + {/* {options.map((option) => (*/} + {/* */} + {/* ))}*/} + {/* */} + {/*
*/} +
+
+ + Filter By: + + + {options.map((item, index) => ( + } + key={index} + label={item.label} + /> + ))} + +
+
+ {(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 && } +
+
+
+ ); } diff --git a/frontend/src/pages/workshops/useWorkshopsPage.js b/frontend/src/pages/workshops/useWorkshopsPage.js index 5053bf9..0953b97 100644 --- a/frontend/src/pages/workshops/useWorkshopsPage.js +++ b/frontend/src/pages/workshops/useWorkshopsPage.js @@ -1,126 +1,147 @@ -import { useCallback, useEffect, useState } from 'react'; -import { useAPI } from '../../providers/APIProvider/APIProvider.jsx'; +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 options = ['All Items', 'Workshops', 'Presentations']; + const options = [ + { + label: "All Items", + id: "all-items", + }, + { + label: "Workshops", + id: 'workshops', + }, + { + label: 'Presentations', + id: "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]); + 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]); + const [radioSelectedItem, setRadioSelectedItem] = useState(options[0].id) - useEffect(() => { - const func = () => { - setGridTemplateColumnsValue('1fr '.repeat(Math.floor(window.innerWidth / 400))); - }; - func(); - window.addEventListener('resize', func); - }, []); + const handleCheckbox = useCallback(e => { + setRadioSelectedItem(e.target.value) + console.log(e.target.value) + }, []) + + useEffect(() => { + const func = () => { + setGridTemplateColumnsValue('1fr '.repeat(Math.floor(window.innerWidth / 400))); + }; + func(); + window.addEventListener('resize', func); + }, []); - useEffect(() => { - if (addToCartResponse == null) return; + useEffect(() => { + if (addToCartResponse == null) return; - const toastDataTemp = {}; - switch (addToCartResponse.status) { - case 200: - toastDataTemp.type = 'success'; - toastDataTemp.message = 'Item Successfully Added to Cart!'; - break; - case 400: - toastDataTemp.type = 'error'; - toastDataTemp.message = 'Failed to Add Item to Cart: Item Is Already In Your Cart!'; - break; - case 401: - toastDataTemp.type = 'error'; - toastDataTemp.message = 'Failed to Add Item to Cart: You Should Login First!'; - } - setToastData(toastDataTemp); - setOpenToast(true); - setAddToCartResponse(null); - }, [addToCartResponse]); + const toastDataTemp = {}; + switch (addToCartResponse.status) { + case 200: + toastDataTemp.type = 'success'; + toastDataTemp.message = 'Item Successfully Added to Cart!'; + break; + case 400: + toastDataTemp.type = 'error'; + toastDataTemp.message = 'Failed to Add Item to Cart: Item Is Already In Your Cart!'; + break; + case 401: + toastDataTemp.type = 'error'; + toastDataTemp.message = 'Failed to Add Item to Cart: You Should Login First!'; + } + setToastData(toastDataTemp); + setOpenToast(true); + setAddToCartResponse(null); + }, [addToCartResponse]); - useEffect(() => { - getWorkshopsData(); - getPresentationsData(); - getTeachersData(); - getPresenterData(); - }, [getPresentationsData, getWorkshopsData]); + useEffect(() => { + getWorkshopsData(); + getPresentationsData(); + getTeachersData(); + 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['isWorkshop'] = !('presenters' in workshop); - item['capacity'] = workshop.capacity; - item['cost'] = workshop.cost; - return item; - }) - .filter((e) => e != null); - setParsedItemsList(parsedData); - setFileteredItems(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); + item['capacity'] = workshop.capacity; + item['cost'] = workshop.cost; + 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, - options, - filterOption, - setFilterOption, - fileteredItems, - setFileteredItems, - }; + return { + parsedItemsList, + addToCart, + gridTemplateColumnsValue, + toastData, + setOpenToast, + openToast, + options, + filterOption, + setFilterOption, + handleCheckbox, + fileteredItems, + setFileteredItems, + radioSelectedItem, + }; }