Skip to content

Commit

Permalink
fix: show correct cost and capacity, add circularprogress to workshop…
Browse files Browse the repository at this point in the history 
…s page
  • Loading branch information
KimiaMontazeri committed Nov 28, 2023
1 parent e9986ad commit fa8627c
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 152 deletions.
152 changes: 77 additions & 75 deletions frontend/src/pages/workshops/WorkshopsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,85 +3,87 @@ 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'
import './workshops.css';

export default function WorkshopsPage() {
const {
parsedItemsList,
addToCart,
gridTemplateColumnsValue,
toastData,
setOpenToast,
openToast,
options,
filterOption,
setFilterOption,
fileteredItems,
setFileteredItems,
} = useWorkshopsPage();

const {
parsedItemsList,
addToCart,
gridTemplateColumnsValue,
toastData,
setOpenToast,
openToast,
options,
filterOption,
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 (
<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>
)
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}
capacity={e.capacity}
cost={e.cost}
onClickAddToCart={() =>
addToCart({
id: e.id,
type: e.isWorkshop ? 'workshop' : 'presentation',
})
}
/>
);
})}
{!fileteredItems && <CircularProgress />}
</section>
);
}
153 changes: 76 additions & 77 deletions frontend/src/pages/workshops/useWorkshopsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,28 @@ 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 = ['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])


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 = () => {
Expand Down Expand Up @@ -64,64 +62,65 @@ 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["isWorkshop"] = !("presenters" in workshop)
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,
fileteredItems,
setFileteredItems,
};
}

0 comments on commit fa8627c

Please sign in to comment.