, nodeId: string) => {
+ const newCheckedValues = toggleChecked(checkedValues, nodeId);
+ onCheckedChange(newCheckedValues);
+ };
+
+ return (
+
+ Filter by Areas
+ }
+ defaultExpandIcon={}
+ >
+ {treeData.size > 0 &&
+ Array.from(treeData)
+ .sort((a, b) => a[0].localeCompare(b[0]))
+ .map(([greatArea, areas]) => (
+
+ handleCheckboxChange(e, greatArea)}
+ />
+ {greatArea}
+
+ }
+ >
+ {areas.map(area => {
+ const childNodeId = `${greatArea}_${area}`;
+ return (
+
+ handleCheckboxChange(e, childNodeId)}
+ />
+ {area}
+
+ }
+ />
+ );
+ })}
+
+ ))}
+
+
+ );
+}
+
+export default FilterByArea;
diff --git a/src/components/FilterByArea/styles.tsx b/src/components/FilterByArea/styles.tsx
new file mode 100644
index 0000000..2da6ede
--- /dev/null
+++ b/src/components/FilterByArea/styles.tsx
@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+
+export const StyledTreeItemLabel = styled('div')({
+ fontSize: '14px',
+});
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 222ed99..1a58dd7 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,8 +1,10 @@
import { Box, CircularProgress, Link, Typography } from '@mui/material';
import Papa from 'papaparse';
import { useEffect, useState } from 'react';
-import { DeadlineProps } from '../../components/Conference';
import FilterPage from '../../components/Filter';
+import FilterByArea from '../../components/FilterByArea';
+import { FilterContainer, FilterByAreaContainer } from './styles';
+import { DeadlineProps } from '../../components/Conference';
function compare(a: DeadlineProps, b: DeadlineProps) {
if (a.submissionDeadline < b.submissionDeadline) {
@@ -23,6 +25,7 @@ function compare(a: DeadlineProps, b: DeadlineProps) {
function Home() {
const [deadlines, setDeadlines] = useState([]);
const [loading, setLoading] = useState(true);
+ const [checkedValues, setCheckedValues] = useState([]);
useEffect(() => {
const sheetUrl =
@@ -33,11 +36,12 @@ function Home() {
complete(results) {
const rawDeadlines: string[][] = results.data as string[][];
const parsedDeadlines = rawDeadlines.map((deadline: string[]) => ({
+ greatArea: deadline[rawDeadlines[0].indexOf('GreatArea')],
+ area: deadline[rawDeadlines[0].indexOf('Area')],
deadlineId: deadline[rawDeadlines[0].indexOf('DeadlineId')],
conference: deadline[rawDeadlines[0].indexOf('Conference')],
website: deadline[rawDeadlines[0].indexOf('WebSite')],
conferenceDetail: deadline[rawDeadlines[0].indexOf('ConferenceDetail')],
- area: `${deadline[rawDeadlines[0].indexOf('GreatArea')]} - ${deadline[rawDeadlines[0].indexOf('Area')]}`,
conferenceDates: deadline[rawDeadlines[0].indexOf('ConferenceDates')],
location: deadline[rawDeadlines[0].indexOf('Location')],
submissionDeadline: new Date(deadline[rawDeadlines[0].indexOf('DeadlineISO')]),
@@ -52,6 +56,10 @@ function Home() {
});
}, []);
+ const handleCheckedChange = (checkedChangedValues: string[]) => {
+ setCheckedValues(checkedChangedValues);
+ };
+
return (
<>
@@ -65,7 +73,15 @@ function Home() {