From f17f8045095077889cabbbf41958942eff60cc0b Mon Sep 17 00:00:00 2001 From: Karen Date: Fri, 21 Jul 2023 11:07:53 -0300 Subject: [PATCH 01/18] filterbyarea component --- package.json | 4 ++-- src/components/FilterByArea/index.tsx | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/components/FilterByArea/index.tsx diff --git a/package.json b/package.json index c3af510..1158e49 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -40,8 +41,7 @@ "@types/node": "^16.18.36", "@types/papaparse": "^5.3.7", "@types/react": "^18.1.0", - "@types/react-dom": "^18.2.6", - "@babel/plugin-proposal-private-property-in-object": "^7.21.11" + "@types/react-dom": "^18.2.6" }, "eslintConfig": { "extends": [ diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx new file mode 100644 index 0000000..c1923c2 --- /dev/null +++ b/src/components/FilterByArea/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Box, Link, Stack, Typography } from '@mui/material'; +import Conference, { DeadlineProps } from '../Conference'; +// import TreeView from '@mui/lab/TreeView'; +// import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +// import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +// import TreeItem from '@mui/lab/TreeItem'; + +interface FilterProps { + deadlines: DeadlineProps[]; +} + +export const FilterByArea: React.FC = ({ deadlines }) => { + return ( +
+ Filters +
+ ); +}; From d03e817f7a69d43068aff4c8f045da4e96464f6c Mon Sep 17 00:00:00 2001 From: Karen Date: Fri, 21 Jul 2023 12:41:46 -0300 Subject: [PATCH 02/18] working with treeview mui --- package-lock.json | 117 +++++++++++++++++++++----- package.json | 1 + src/components/Conference/index.tsx | 2 + src/components/FilterByArea/index.tsx | 29 +++++-- src/pages/Home/index.tsx | 36 +++++--- 5 files changed, 149 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0af6f38..1f4cfa0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@cincoders/cinnamon": "^0.4.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/lab": "^5.0.0-alpha.137", "@mui/material": "^5.13.5", "papaparse": "^5.4.1", "react": "^18.1.0", @@ -1999,9 +2000,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz", - "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz", + "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "dependencies": { "regenerator-runtime": "^0.13.11" }, @@ -3430,6 +3431,84 @@ } } }, + "node_modules/@mui/lab": { + "version": "5.0.0-alpha.137", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.137.tgz", + "integrity": "sha512-bHfcfti9/GnB657QpTdlK1fc9gjkP3SC+NrXyb9NCr0rT5Cq7TEkBGXyY5wGUSCyHR3CrMvchkIsfG5sH/NJ9A==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@mui/base": "5.0.0-beta.8", + "@mui/system": "^5.14.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.1", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/lab/node_modules/@mui/base": { + "version": "5.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.8.tgz", + "integrity": "sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.1", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/lab/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@mui/material": { "version": "5.13.6", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz", @@ -3480,12 +3559,12 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/@mui/private-theming": { - "version": "5.13.1", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz", - "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==", + "version": "5.13.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", + "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", "dependencies": { - "@babel/runtime": "^7.21.0", - "@mui/utils": "^5.13.1", + "@babel/runtime": "^7.22.5", + "@mui/utils": "^5.13.7", "prop-types": "^15.8.1" }, "engines": { @@ -3537,15 +3616,15 @@ } }, "node_modules/@mui/system": { - "version": "5.13.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz", - "integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.1.tgz", + "integrity": "sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==", "dependencies": { - "@babel/runtime": "^7.22.5", - "@mui/private-theming": "^5.13.1", + "@babel/runtime": "^7.22.6", + "@mui/private-theming": "^5.13.7", "@mui/styled-engine": "^5.13.2", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.6", + "@mui/utils": "^5.14.1", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -3589,13 +3668,13 @@ } }, "node_modules/@mui/utils": { - "version": "5.13.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz", - "integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.1.tgz", + "integrity": "sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==", "dependencies": { - "@babel/runtime": "^7.22.5", + "@babel/runtime": "^7.22.6", "@types/prop-types": "^15.7.5", - "@types/react-is": "^18.2.0", + "@types/react-is": "^18.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, diff --git a/package.json b/package.json index 1158e49..12fc09e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@cincoders/cinnamon": "^0.4.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/lab": "^5.0.0-alpha.137", "@mui/material": "^5.13.5", "papaparse": "^5.4.1", "react": "^18.1.0", diff --git a/src/components/Conference/index.tsx b/src/components/Conference/index.tsx index 6725e41..587ea36 100644 --- a/src/components/Conference/index.tsx +++ b/src/components/Conference/index.tsx @@ -3,6 +3,8 @@ import { Box, Link, Stack, Typography } from '@mui/material'; import Countdown from 'react-countdown'; export interface DeadlineProps { + greatArea: string; + areaID: string; deadlineId: string; conference: string; website: string; diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index c1923c2..06caa8e 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -1,19 +1,38 @@ import React from 'react'; import { Box, Link, Stack, Typography } from '@mui/material'; import Conference, { DeadlineProps } from '../Conference'; -// import TreeView from '@mui/lab/TreeView'; -// import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -// import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -// import TreeItem from '@mui/lab/TreeItem'; +import TreeView from '@mui/lab/TreeView'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import TreeItem from '@mui/lab/TreeItem'; interface FilterProps { deadlines: DeadlineProps[]; } export const FilterByArea: React.FC = ({ deadlines }) => { + const uniqueAreas = new Set(); + // deadlines.forEach(deadline => { + // areas.add(deadline.area); + // }); + return (
- Filters + Filters - Areas + } + defaultExpandIcon={} + > + {deadlines.map(deadline => { + if (!uniqueAreas.has(deadline.areaID)) { + uniqueAreas.add(deadline.areaID); + // return ; + } + console.log(uniqueAreas); + return ; + })} +
); }; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index d9b8c2f..3219645 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -2,6 +2,7 @@ import { DeadlineProps } from '../../components/Conference'; import Papa from 'papaparse'; import { useEffect, useState } from 'react'; import FilterPage from '../../components/Filter'; +import { FilterByArea } from '../../components/FilterByArea'; import { CircularProgress, Link, Typography } from '@mui/material'; function compare(a: DeadlineProps, b: DeadlineProps) { @@ -37,6 +38,9 @@ function Home() { website: deadline[rawDeadlines[0].indexOf('WebSite')], conferenceDetail: deadline[rawDeadlines[0].indexOf('ConferenceDetail')], area: deadline[rawDeadlines[0].indexOf('GreatArea')] + ' - ' + deadline[rawDeadlines[0].indexOf('Area')], + greatArea: deadline[rawDeadlines[0].indexOf('GreatArea')], + areaID: deadline[rawDeadlines[0].indexOf('AreaID')], + specificArea: 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')]), @@ -48,23 +52,31 @@ function Home() { parsedDeadlines.sort(compare); setDeadlines(parsedDeadlines); setLoading(false); + console.log(parsedDeadlines); }, }); }, []); return ( -
- {loading && } - {!loading && ( - - The top CS conferences are listed in{' '} - - CSRankings.org{' '} - - - )} - {!loading && } -
+ <> +
+ {loading && } + {!loading && ( + <> + + + The top CS conferences are listed in{' '} + + CSRankings.org{' '} + + + + + + )} +
+ + ); } From e916f51e6e8bca7d9c12fa24bd2cb9d590d24799 Mon Sep 17 00:00:00 2001 From: Karen Date: Fri, 21 Jul 2023 14:06:09 -0300 Subject: [PATCH 03/18] added filter tree --- src/components/Conference/index.tsx | 1 + src/components/FilterByArea/index.tsx | 41 +++++++++++++++++++------ src/pages/Home/index.tsx | 44 ++++++++++++--------------- 3 files changed, 53 insertions(+), 33 deletions(-) diff --git a/src/components/Conference/index.tsx b/src/components/Conference/index.tsx index 587ea36..91b0f0a 100644 --- a/src/components/Conference/index.tsx +++ b/src/components/Conference/index.tsx @@ -9,6 +9,7 @@ export interface DeadlineProps { conference: string; website: string; conferenceDetail: string; + subArea: string; area: string; conferenceDates: string; location: string; diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index 06caa8e..197f185 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Box, Link, Stack, Typography } from '@mui/material'; import Conference, { DeadlineProps } from '../Conference'; import TreeView from '@mui/lab/TreeView'; @@ -10,11 +10,24 @@ interface FilterProps { deadlines: DeadlineProps[]; } +interface SubArea { + id: string; + name: string; +} + +interface Area { + name: string; + subAreas: SubArea[]; +} + export const FilterByArea: React.FC = ({ deadlines }) => { const uniqueAreas = new Set(); - // deadlines.forEach(deadline => { - // areas.add(deadline.area); - // }); + const uniqueSubAreas = new Set(); + + // deadlines.forEach(deadline => { + // uniqueAreas.add(deadline.greatArea); + // uniqueSubAreas.add(deadline.subArea); + // }); return (
@@ -25,12 +38,22 @@ export const FilterByArea: React.FC = ({ deadlines }) => { defaultExpandIcon={} > {deadlines.map(deadline => { - if (!uniqueAreas.has(deadline.areaID)) { - uniqueAreas.add(deadline.areaID); - // return ; + const uniqueSubAreas = new Set(); + if (!uniqueAreas.has(deadline.greatArea)) { + uniqueAreas.add(deadline.greatArea); + if (!uniqueSubAreas.has(deadline.subArea)) { + uniqueSubAreas.add(deadline.subArea); + } + return ( + + + + ); + // iterate through areas return unique values + // iterate through subareas return unique values + // return treeview with areas and subareas } - console.log(uniqueAreas); - return ; + return null; })}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 3219645..fad7eab 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -2,8 +2,8 @@ import { DeadlineProps } from '../../components/Conference'; import Papa from 'papaparse'; import { useEffect, useState } from 'react'; import FilterPage from '../../components/Filter'; -import { FilterByArea } from '../../components/FilterByArea'; import { CircularProgress, Link, Typography } from '@mui/material'; +import { FilterByArea } from '../../components/FilterByArea'; function compare(a: DeadlineProps, b: DeadlineProps) { if (a.submissionDeadline < b.submissionDeadline) { @@ -33,14 +33,14 @@ function Home() { const rawDeadlines: string[][] = results.data as string[][]; const parsedDeadlines = rawDeadlines.map((deadline: string[]) => { return { + greatArea: deadline[rawDeadlines[0].indexOf('GreatArea')], + areaID: deadline[rawDeadlines[0].indexOf('AreaID')], deadlineId: deadline[rawDeadlines[0].indexOf('DeadlineId')], conference: deadline[rawDeadlines[0].indexOf('Conference')], website: deadline[rawDeadlines[0].indexOf('WebSite')], conferenceDetail: deadline[rawDeadlines[0].indexOf('ConferenceDetail')], + subArea: deadline[rawDeadlines[0].indexOf('Area')], area: deadline[rawDeadlines[0].indexOf('GreatArea')] + ' - ' + deadline[rawDeadlines[0].indexOf('Area')], - greatArea: deadline[rawDeadlines[0].indexOf('GreatArea')], - areaID: deadline[rawDeadlines[0].indexOf('AreaID')], - specificArea: 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,31 +52,27 @@ function Home() { parsedDeadlines.sort(compare); setDeadlines(parsedDeadlines); setLoading(false); - console.log(parsedDeadlines); }, }); }, []); return ( - <> -
- {loading && } - {!loading && ( - <> - - - The top CS conferences are listed in{' '} - - CSRankings.org{' '} - - - - - - )} -
- - +
+ + The top CS conferences are listed in{' '} + + CSRankings.org + + + {loading && } + {!loading && ( + <> + + + + + )} +
); } From 1a42efe5b47d264931b6ed4288b61cf164605bc7 Mon Sep 17 00:00:00 2001 From: Karen Date: Tue, 25 Jul 2023 09:54:40 -0300 Subject: [PATCH 04/18] fixed the filter tree --- src/components/FilterByArea/index.tsx | 75 +++++++++++++++------------ src/pages/Home/index.tsx | 1 + 2 files changed, 42 insertions(+), 34 deletions(-) diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index 197f185..63ed1fd 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -1,6 +1,8 @@ import React, { useEffect } from 'react'; import { Box, Link, Stack, Typography } from '@mui/material'; import Conference, { DeadlineProps } from '../Conference'; +import Checkbox from '@mui/material/Checkbox'; + import TreeView from '@mui/lab/TreeView'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; @@ -10,24 +12,21 @@ interface FilterProps { deadlines: DeadlineProps[]; } -interface SubArea { - id: string; - name: string; -} - -interface Area { - name: string; - subAreas: SubArea[]; -} - export const FilterByArea: React.FC = ({ deadlines }) => { - const uniqueAreas = new Set(); - const uniqueSubAreas = new Set(); - - // deadlines.forEach(deadline => { - // uniqueAreas.add(deadline.greatArea); - // uniqueSubAreas.add(deadline.subArea); - // }); + const createTreeData = (deadlines: DeadlineProps[]) => { + const treeData: { [key: string]: string[] } = {}; + deadlines.forEach(deadline => { + const { greatArea, subArea } = deadline; + if (!treeData[greatArea]) { + treeData[greatArea] = []; + } + if (!treeData[greatArea].includes(subArea)) { + treeData[greatArea].push(subArea); + } + }); + return treeData; + }; + const treeData = createTreeData(deadlines); return (
@@ -36,24 +35,32 @@ export const FilterByArea: React.FC = ({ deadlines }) => { aria-label='area-navigation system' defaultCollapseIcon={} defaultExpandIcon={} + multiSelect > - {deadlines.map(deadline => { - const uniqueSubAreas = new Set(); - if (!uniqueAreas.has(deadline.greatArea)) { - uniqueAreas.add(deadline.greatArea); - if (!uniqueSubAreas.has(deadline.subArea)) { - uniqueSubAreas.add(deadline.subArea); - } - return ( - - - - ); - // iterate through areas return unique values - // iterate through subareas return unique values - // return treeview with areas and subareas - } - return null; + {Object.keys(treeData).map(area => { + return ( + + {treeData[area].map(subArea => { + return ( + + {/* handleNodeSelect(event, nodes.id)} + /> */} + {subArea} + + } + /> + ); + })} + + ); })}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index fad7eab..6554e84 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -51,6 +51,7 @@ function Home() { parsedDeadlines.splice(0, 1); parsedDeadlines.sort(compare); setDeadlines(parsedDeadlines); + console.log(parsedDeadlines); setLoading(false); }, }); From 960672dfb81aa7958fb94dd095e60913164b9096 Mon Sep 17 00:00:00 2001 From: Karen Date: Tue, 25 Jul 2023 14:15:18 -0300 Subject: [PATCH 05/18] filter tree checkboxes working --- src/components/Filter/index.tsx | 3 +- src/components/FilterByArea/index.tsx | 76 ++++++++++++++++++++++----- src/pages/Home/index.tsx | 10 ++-- 3 files changed, 73 insertions(+), 16 deletions(-) diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx index 0a39f32..80dada3 100644 --- a/src/components/Filter/index.tsx +++ b/src/components/Filter/index.tsx @@ -5,9 +5,10 @@ import { Box, Stack, Typography, TextField } from '@mui/material'; interface FilterProps { deadlines: DeadlineProps[]; + checked: string[]; } -const FilterPage: React.FC = ({ deadlines }) => { +const FilterPage: React.FC = ({ deadlines, checked }) => { const [filterText, setFilterText] = useState(''); const handleInputChange = (event: React.ChangeEvent) => { diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index 63ed1fd..bdc11f5 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Box, Link, Stack, Typography } from '@mui/material'; import Conference, { DeadlineProps } from '../Conference'; import Checkbox from '@mui/material/Checkbox'; @@ -10,13 +10,16 @@ import TreeItem from '@mui/lab/TreeItem'; interface FilterProps { deadlines: DeadlineProps[]; + checked: string[]; + onCheckedChange: (checked: string[]) => void; } -export const FilterByArea: React.FC = ({ deadlines }) => { +export const FilterByArea: React.FC = ({ deadlines, checked, onCheckedChange }) => { const createTreeData = (deadlines: DeadlineProps[]) => { const treeData: { [key: string]: string[] } = {}; deadlines.forEach(deadline => { const { greatArea, subArea } = deadline; + // const nodeId = `${greatArea}-${subArea}`; if (!treeData[greatArea]) { treeData[greatArea] = []; } @@ -28,6 +31,48 @@ export const FilterByArea: React.FC = ({ deadlines }) => { }; const treeData = createTreeData(deadlines); + const toggleChecked = (currentChecked: string[], nodeId: string): string[] => { + const newChecked = [...currentChecked]; + const currentIndex = currentChecked.indexOf(nodeId); + if (currentIndex === -1) { + newChecked.push(nodeId); + } else { + newChecked.splice(currentIndex, 1); + } + + if (nodeId in treeData) { + treeData[nodeId].forEach(subarea => { + const childNodeId = `${nodeId}-${subarea}`; + if (!newChecked.includes(childNodeId) && newChecked.includes(nodeId)) { + newChecked.push(childNodeId); + } else if (newChecked.includes(childNodeId) && !newChecked.includes(nodeId)) { + newChecked.splice(newChecked.indexOf(childNodeId), 1); + } + newChecked.concat(toggleChecked(newChecked, childNodeId)); + }); + } + + const parentIndex = nodeId.lastIndexOf('-'); + if (parentIndex !== -1) { + const parent = nodeId.substring(0, parentIndex); + const siblings = treeData[parent]; + const siblingsChecked = siblings.every(sibling => newChecked.includes(sibling)); + if (siblingsChecked && !newChecked.includes(parent)) { + newChecked.push(parent); + } else if (!siblingsChecked && newChecked.includes(parent)) { + newChecked.splice(newChecked.indexOf(parent), 1); + } + } + // if (!currentSelected) { + return newChecked; + }; + const handleCheckboxChange = (event: React.ChangeEvent, nodeId: string) => { + const newChecked = toggleChecked(checked, nodeId); + // console.log({ nodeId }); + onCheckedChange(newChecked); + console.log(newChecked); + }; + return (
Filters - Areas @@ -35,24 +80,31 @@ export const FilterByArea: React.FC = ({ deadlines }) => { aria-label='area-navigation system' defaultCollapseIcon={} defaultExpandIcon={} - multiSelect > {Object.keys(treeData).map(area => { return ( - + + handleCheckboxChange(e, area)} /> + {area} + + } + > {treeData[area].map(subArea => { + const childNodeId = `${area}-${subArea}`; return ( - {/* handleNodeSelect(event, nodes.id)} - /> */} + handleCheckboxChange(e, childNodeId)} + /> {subArea} } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 6554e84..eac9d28 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -24,6 +24,7 @@ function compare(a: DeadlineProps, b: DeadlineProps) { function Home() { const [deadlines, setDeadlines] = useState([]); const [loading, setLoading] = useState(true); + const [checked, setChecked] = useState([]); useEffect(() => { const sheetUrl = `https://docs.google.com/spreadsheets/d/${process.env.REACT_APP_SHEET_ID}/gviz/tq?tqx=out:csv&sheet=${process.env.REACT_APP_SHEET_NAME}`; @@ -51,12 +52,15 @@ function Home() { parsedDeadlines.splice(0, 1); parsedDeadlines.sort(compare); setDeadlines(parsedDeadlines); - console.log(parsedDeadlines); setLoading(false); }, }); }, []); + const handleCheckedChange = (checked: string[]) => { + setChecked(checked); + }; + return (
@@ -68,9 +72,9 @@ function Home() { {loading && } {!loading && ( <> - + - + )}
From a3f6ed53d3d448b9e929e7e7743a67113842a9bf Mon Sep 17 00:00:00 2001 From: Karen Date: Tue, 25 Jul 2023 14:40:36 -0300 Subject: [PATCH 06/18] fixed bug with hyphen --- src/components/FilterByArea/index.tsx | 7 ++++--- src/pages/Home/index.tsx | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index bdc11f5..ae39ac2 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -42,7 +42,7 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec if (nodeId in treeData) { treeData[nodeId].forEach(subarea => { - const childNodeId = `${nodeId}-${subarea}`; + const childNodeId = `${nodeId}_${subarea}`; if (!newChecked.includes(childNodeId) && newChecked.includes(nodeId)) { newChecked.push(childNodeId); } else if (newChecked.includes(childNodeId) && !newChecked.includes(nodeId)) { @@ -52,11 +52,12 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec }); } - const parentIndex = nodeId.lastIndexOf('-'); + const parentIndex = nodeId.lastIndexOf('_'); if (parentIndex !== -1) { const parent = nodeId.substring(0, parentIndex); const siblings = treeData[parent]; const siblingsChecked = siblings.every(sibling => newChecked.includes(sibling)); + if (siblingsChecked && !newChecked.includes(parent)) { newChecked.push(parent); } else if (!siblingsChecked && newChecked.includes(parent)) { @@ -94,7 +95,7 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec } > {treeData[area].map(subArea => { - const childNodeId = `${area}-${subArea}`; + const childNodeId = `${area}_${subArea}`; return ( Date: Wed, 26 Jul 2023 13:37:30 -0300 Subject: [PATCH 07/18] filter function by area and subarea working --- src/components/Filter/index.tsx | 12 +++++++++++- src/components/FilterByArea/index.tsx | 10 +++------- src/pages/Home/index.tsx | 1 - 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx index 80dada3..fe2005a 100644 --- a/src/components/Filter/index.tsx +++ b/src/components/Filter/index.tsx @@ -15,11 +15,21 @@ const FilterPage: React.FC = ({ deadlines, checked }) => { setFilterText(event.target.value); }; - const filteredDeadlines: DeadlineProps[] = deadlines.filter(deadline => + const getCheckedAreaNames = (): string[] => { + return checked.map(nodeId => nodeId.split('_')[1]); + }; + + const filteredDeadlinesByText: DeadlineProps[] = deadlines.filter(deadline => Object.values(deadline).some( value => typeof value === 'string' && value.toLowerCase().includes(filterText.toLowerCase()), ), ); + + const filteredDeadlines: DeadlineProps[] = + checked.length > 0 + ? filteredDeadlinesByText.filter(deadline => getCheckedAreaNames().includes(deadline.subArea)) + : filteredDeadlinesByText; + return ( = ({ deadlines, checked, onChec const treeData: { [key: string]: string[] } = {}; deadlines.forEach(deadline => { const { greatArea, subArea } = deadline; - // const nodeId = `${greatArea}-${subArea}`; if (!treeData[greatArea]) { treeData[greatArea] = []; } @@ -64,14 +63,11 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec newChecked.splice(newChecked.indexOf(parent), 1); } } - // if (!currentSelected) { return newChecked; }; const handleCheckboxChange = (event: React.ChangeEvent, nodeId: string) => { const newChecked = toggleChecked(checked, nodeId); - // console.log({ nodeId }); onCheckedChange(newChecked); - console.log(newChecked); }; return ( diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 5a04d1d..eac9d28 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -53,7 +53,6 @@ function Home() { parsedDeadlines.sort(compare); setDeadlines(parsedDeadlines); setLoading(false); - console.log(parsedDeadlines); }, }); }, []); From 3e50cd67482428777a270f6605032f3f9196aba8 Mon Sep 17 00:00:00 2001 From: karen Date: Thu, 27 Jul 2023 12:13:09 -0300 Subject: [PATCH 08/18] fix on filter by area placement --- package-lock.json | 24 +++++++++++++++++++++++- package.json | 3 ++- src/pages/Home/index.tsx | 20 +++++++++++++++++--- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f4cfa0..dc1e4f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,8 @@ "@types/node": "^16.18.36", "@types/papaparse": "^5.3.7", "@types/react": "^18.1.0", - "@types/react-dom": "^18.2.6" + "@types/react-dom": "^18.2.6", + "@types/styled-components": "^5.1.26" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4679,6 +4680,16 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4879,6 +4890,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.6", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.6.tgz", diff --git a/package.json b/package.json index 12fc09e..b63813e 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,8 @@ "@types/node": "^16.18.36", "@types/papaparse": "^5.3.7", "@types/react": "^18.1.0", - "@types/react-dom": "^18.2.6" + "@types/react-dom": "^18.2.6", + "@types/styled-components": "^5.1.26" }, "eslintConfig": { "extends": [ diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index eac9d28..1dbe68b 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -4,6 +4,18 @@ import { useEffect, useState } from 'react'; import FilterPage from '../../components/Filter'; import { CircularProgress, Link, Typography } from '@mui/material'; import { FilterByArea } from '../../components/FilterByArea'; +import styled from 'styled-components'; + +const FilterContainer = styled.div` + display: flex; + flex-direction: row; + margin-top: 20px; +`; + +const FilterByAreaContainer = styled.div` + width: 20%; + margin-right: 20px; +`; function compare(a: DeadlineProps, b: DeadlineProps) { if (a.submissionDeadline < b.submissionDeadline) { @@ -71,11 +83,13 @@ function Home() { {loading && } {!loading && ( - <> - + + + + - + )} ); From f54f4b90815da1b314102552f41792274c180f59 Mon Sep 17 00:00:00 2001 From: karen Date: Thu, 27 Jul 2023 16:04:20 -0300 Subject: [PATCH 09/18] some styling on filterByArea Component --- src/components/FilterByArea/index.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index c1facee..ab4472b 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -7,12 +7,16 @@ import TreeView from '@mui/lab/TreeView'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import TreeItem from '@mui/lab/TreeItem'; +import { styled, css } from '@mui/material/styles'; interface FilterProps { deadlines: DeadlineProps[]; checked: string[]; onCheckedChange: (checked: string[]) => void; } +const StyledTreeItemLabel = styled('div')({ + fontSize: '14px', +}); export const FilterByArea: React.FC = ({ deadlines, checked, onCheckedChange }) => { const createTreeData = (deadlines: DeadlineProps[]) => { @@ -72,7 +76,7 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec return (
- Filters - Areas + Filter by Areas } @@ -84,10 +88,10 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec key={area} nodeId={area} label={ - <> + handleCheckboxChange(e, area)} /> {area} - + } > {treeData[area].map(subArea => { @@ -97,13 +101,14 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec key={childNodeId} nodeId={childNodeId} label={ - <> + handleCheckboxChange(e, childNodeId)} /> {subArea} - + } /> ); From d18ad5b4efdf000c2869e6551fed91eacc5884d7 Mon Sep 17 00:00:00 2001 From: karen Date: Fri, 28 Jul 2023 20:40:16 -0300 Subject: [PATCH 10/18] created context and provider to the shared filter by area variable. --- src/components/Filter/index.tsx | 8 ++++---- src/components/FilterByArea/index.tsx | 14 +++++++------- src/contexts/CheckedContext.tsx | 21 +++++++++++++++++++++ src/pages/Home/index.tsx | 15 +++++++++------ 4 files changed, 41 insertions(+), 17 deletions(-) create mode 100644 src/contexts/CheckedContext.tsx diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx index fe2005a..36f7747 100644 --- a/src/components/Filter/index.tsx +++ b/src/components/Filter/index.tsx @@ -1,14 +1,14 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import Conference, { DeadlineProps } from '../Conference'; - import { Box, Stack, Typography, TextField } from '@mui/material'; +import { CheckedContext, CheckedContextType } from '../../contexts/CheckedContext'; interface FilterProps { deadlines: DeadlineProps[]; - checked: string[]; } -const FilterPage: React.FC = ({ deadlines, checked }) => { +const FilterPage: React.FC = ({ deadlines }) => { + const { checked } = useContext(CheckedContext) as CheckedContextType; const [filterText, setFilterText] = useState(''); const handleInputChange = (event: React.ChangeEvent) => { diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index ab4472b..5e8df54 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -1,24 +1,24 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { Typography } from '@mui/material'; import { DeadlineProps } from '../Conference'; import Checkbox from '@mui/material/Checkbox'; - import TreeView from '@mui/lab/TreeView'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import TreeItem from '@mui/lab/TreeItem'; -import { styled, css } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; +import { CheckedContext, CheckedContextType } from '../../contexts/CheckedContext'; interface FilterProps { deadlines: DeadlineProps[]; - checked: string[]; - onCheckedChange: (checked: string[]) => void; } const StyledTreeItemLabel = styled('div')({ fontSize: '14px', }); -export const FilterByArea: React.FC = ({ deadlines, checked, onCheckedChange }) => { +export const FilterByArea: React.FC = ({ deadlines }) => { + const { checked, setChecked } = useContext(CheckedContext) as CheckedContextType; + const createTreeData = (deadlines: DeadlineProps[]) => { const treeData: { [key: string]: string[] } = {}; deadlines.forEach(deadline => { @@ -71,7 +71,7 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec }; const handleCheckboxChange = (event: React.ChangeEvent, nodeId: string) => { const newChecked = toggleChecked(checked, nodeId); - onCheckedChange(newChecked); + setChecked(newChecked); }; return ( diff --git a/src/contexts/CheckedContext.tsx b/src/contexts/CheckedContext.tsx new file mode 100644 index 0000000..0819d22 --- /dev/null +++ b/src/contexts/CheckedContext.tsx @@ -0,0 +1,21 @@ +// CheckedContext.tsx +import React, { createContext, useState } from 'react'; + +export interface CheckedContextType { + checked: string[]; + setChecked: (checked: string[]) => void; +} + +const CheckedContext = createContext(null); + +type CheckedContextProviderProps = { + children: React.ReactNode; +}; + +const CheckedContextProvider: React.FC = ({ children }) => { + const [checked, setChecked] = useState([]); + + return {children}; +}; + +export { CheckedContextProvider, CheckedContext }; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 1dbe68b..efe600f 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -5,6 +5,7 @@ import FilterPage from '../../components/Filter'; import { CircularProgress, Link, Typography } from '@mui/material'; import { FilterByArea } from '../../components/FilterByArea'; import styled from 'styled-components'; +import { CheckedContextProvider } from '../../contexts/CheckedContext'; const FilterContainer = styled.div` display: flex; @@ -83,13 +84,15 @@ function Home() { {loading && } {!loading && ( - - - - + + + + + - - + + + )} ); From ab85619e1b4366cd65aa62a3ed2f002d6adf72da Mon Sep 17 00:00:00 2001 From: karen Date: Mon, 31 Jul 2023 14:27:16 -0300 Subject: [PATCH 11/18] previous commit without usecontext --- src/components/ConferencePage/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ConferencePage/index.tsx b/src/components/ConferencePage/index.tsx index 91fa7c6..c5123a8 100644 --- a/src/components/ConferencePage/index.tsx +++ b/src/components/ConferencePage/index.tsx @@ -1,5 +1,4 @@ import { Page } from '@cincoders/cinnamon'; -// import logoCin from '../../assets/cin-logo.svg'; import logoCin from '../../assets/cin-logo.svg'; interface PageProps { From 447399a4ada2e32c1560d8d5ca649b281ce32e6a Mon Sep 17 00:00:00 2001 From: karen Date: Mon, 31 Jul 2023 15:00:24 -0300 Subject: [PATCH 12/18] Fix: updated code as requested in PR #7 --- src/components/Filter/index.tsx | 10 ++--- src/components/FilterByArea/index.tsx | 52 +++++++++++++------------- src/components/FilterByArea/styles.tsx | 5 +++ src/pages/Home/index.tsx | 23 +++--------- src/pages/Home/styles.tsx | 12 ++++++ 5 files changed, 52 insertions(+), 50 deletions(-) create mode 100644 src/components/FilterByArea/styles.tsx create mode 100644 src/pages/Home/styles.tsx diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx index fe2005a..700114b 100644 --- a/src/components/Filter/index.tsx +++ b/src/components/Filter/index.tsx @@ -1,14 +1,12 @@ import React, { useState } from 'react'; import Conference, { DeadlineProps } from '../Conference'; - import { Box, Stack, Typography, TextField } from '@mui/material'; - interface FilterProps { deadlines: DeadlineProps[]; - checked: string[]; + checkedValues: string[]; } -const FilterPage: React.FC = ({ deadlines, checked }) => { +const FilterPage: React.FC = ({ deadlines, checkedValues }) => { const [filterText, setFilterText] = useState(''); const handleInputChange = (event: React.ChangeEvent) => { @@ -16,7 +14,7 @@ const FilterPage: React.FC = ({ deadlines, checked }) => { }; const getCheckedAreaNames = (): string[] => { - return checked.map(nodeId => nodeId.split('_')[1]); + return checkedValues.map(nodeId => nodeId.split('_')[1]); }; const filteredDeadlinesByText: DeadlineProps[] = deadlines.filter(deadline => @@ -26,7 +24,7 @@ const FilterPage: React.FC = ({ deadlines, checked }) => { ); const filteredDeadlines: DeadlineProps[] = - checked.length > 0 + checkedValues.length > 0 ? filteredDeadlinesByText.filter(deadline => getCheckedAreaNames().includes(deadline.subArea)) : filteredDeadlinesByText; diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index ab4472b..8249680 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -7,18 +7,14 @@ import TreeView from '@mui/lab/TreeView'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import TreeItem from '@mui/lab/TreeItem'; -import { styled, css } from '@mui/material/styles'; - +import { StyledTreeItemLabel } from './styles'; interface FilterProps { deadlines: DeadlineProps[]; - checked: string[]; + checkedValues: string[]; onCheckedChange: (checked: string[]) => void; } -const StyledTreeItemLabel = styled('div')({ - fontSize: '14px', -}); -export const FilterByArea: React.FC = ({ deadlines, checked, onCheckedChange }) => { +const FilterByArea: React.FC = ({ deadlines, checkedValues, onCheckedChange }) => { const createTreeData = (deadlines: DeadlineProps[]) => { const treeData: { [key: string]: string[] } = {}; deadlines.forEach(deadline => { @@ -34,24 +30,24 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec }; const treeData = createTreeData(deadlines); - const toggleChecked = (currentChecked: string[], nodeId: string): string[] => { - const newChecked = [...currentChecked]; - const currentIndex = currentChecked.indexOf(nodeId); + const toggleChecked = (currentCheckedValues: string[], nodeId: string): string[] => { + const newCheckedValues = [...currentCheckedValues]; + const currentIndex = currentCheckedValues.indexOf(nodeId); if (currentIndex === -1) { - newChecked.push(nodeId); + newCheckedValues.push(nodeId); } else { - newChecked.splice(currentIndex, 1); + newCheckedValues.splice(currentIndex, 1); } if (nodeId in treeData) { treeData[nodeId].forEach(subarea => { const childNodeId = `${nodeId}_${subarea}`; - if (!newChecked.includes(childNodeId) && newChecked.includes(nodeId)) { - newChecked.push(childNodeId); - } else if (newChecked.includes(childNodeId) && !newChecked.includes(nodeId)) { - newChecked.splice(newChecked.indexOf(childNodeId), 1); + if (!newCheckedValues.includes(childNodeId) && newCheckedValues.includes(nodeId)) { + newCheckedValues.push(childNodeId); + } else if (newCheckedValues.includes(childNodeId) && !newCheckedValues.includes(nodeId)) { + newCheckedValues.splice(newCheckedValues.indexOf(childNodeId), 1); } - newChecked.concat(toggleChecked(newChecked, childNodeId)); + newCheckedValues.concat(toggleChecked(newCheckedValues, childNodeId)); }); } @@ -59,19 +55,19 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec if (parentIndex !== -1) { const parent = nodeId.substring(0, parentIndex); const siblings = treeData[parent]; - const siblingsChecked = siblings.every(sibling => newChecked.includes(sibling)); + const siblingsChecked = siblings.every(sibling => newCheckedValues.includes(sibling)); - if (siblingsChecked && !newChecked.includes(parent)) { - newChecked.push(parent); - } else if (!siblingsChecked && newChecked.includes(parent)) { - newChecked.splice(newChecked.indexOf(parent), 1); + if (siblingsChecked && !newCheckedValues.includes(parent)) { + newCheckedValues.push(parent); + } else if (!siblingsChecked && newCheckedValues.includes(parent)) { + newCheckedValues.splice(newCheckedValues.indexOf(parent), 1); } } - return newChecked; + return newCheckedValues; }; const handleCheckboxChange = (event: React.ChangeEvent, nodeId: string) => { - const newChecked = toggleChecked(checked, nodeId); - onCheckedChange(newChecked); + const newCheckedValues = toggleChecked(checkedValues, nodeId); + onCheckedChange(newCheckedValues); }; return ( @@ -89,7 +85,7 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec nodeId={area} label={ - handleCheckboxChange(e, area)} /> + handleCheckboxChange(e, area)} /> {area} } @@ -104,7 +100,7 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec handleCheckboxChange(e, childNodeId)} /> {subArea} @@ -120,3 +116,5 @@ export const FilterByArea: React.FC = ({ deadlines, checked, onChec
); }; + +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 5b328d7..7f72e94 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -4,18 +4,7 @@ import { useEffect, useState } from 'react'; import FilterPage from '../../components/Filter'; import { CircularProgress, Link, Typography } from '@mui/material'; import FilterByArea from '../../components/FilterByArea'; -import styled from 'styled-components'; - -const FilterContainer = styled.div` - display: flex; - flex-direction: row; - margin-top: 20px; -`; - -const FilterByAreaContainer = styled.div` - width: 20%; - margin-right: 20px; -`; +import { FilterContainer, FilterByAreaContainer } from './styles'; function compare(a: DeadlineProps, b: DeadlineProps) { if (a.submissionDeadline < b.submissionDeadline) { @@ -36,7 +25,7 @@ function compare(a: DeadlineProps, b: DeadlineProps) { function Home() { const [deadlines, setDeadlines] = useState([]); const [loading, setLoading] = useState(true); - const [checked, setChecked] = useState([]); + const [checkedValues, setCheckedValues] = useState([]); useEffect(() => { const sheetUrl = `https://docs.google.com/spreadsheets/d/${process.env.REACT_APP_SHEET_ID}/gviz/tq?tqx=out:csv&sheet=${process.env.REACT_APP_SHEET_NAME}`; @@ -69,8 +58,8 @@ function Home() { }); }, []); - const handleCheckedChange = (checked: string[]) => { - setChecked(checked); + const handleCheckedChange = (checkedValues: string[]) => { + setCheckedValues(checkedValues); }; return ( @@ -85,10 +74,10 @@ function Home() { {!loading && ( - + - + )} diff --git a/src/pages/Home/styles.tsx b/src/pages/Home/styles.tsx new file mode 100644 index 0000000..0d2c279 --- /dev/null +++ b/src/pages/Home/styles.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const FilterContainer = styled.div` + display: flex; + flex-direction: row; + margin-top: 20px; +`; + +export const FilterByAreaContainer = styled.div` + width: 20%; + margin-right: 20px; +`; From 11fcc116e564a255a9367e2567fce86d978791c8 Mon Sep 17 00:00:00 2001 From: karen Date: Mon, 31 Jul 2023 15:19:09 -0300 Subject: [PATCH 13/18] Removed unused 'useContext' imports --- src/components/FilterByArea/index.tsx | 2 +- src/contexts/CheckedContext.tsx | 21 --------------------- 2 files changed, 1 insertion(+), 22 deletions(-) delete mode 100644 src/contexts/CheckedContext.tsx diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index be8a66d..fd73013 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { Typography } from '@mui/material'; import { DeadlineProps } from '../Conference'; import Checkbox from '@mui/material/Checkbox'; diff --git a/src/contexts/CheckedContext.tsx b/src/contexts/CheckedContext.tsx deleted file mode 100644 index 0819d22..0000000 --- a/src/contexts/CheckedContext.tsx +++ /dev/null @@ -1,21 +0,0 @@ -// CheckedContext.tsx -import React, { createContext, useState } from 'react'; - -export interface CheckedContextType { - checked: string[]; - setChecked: (checked: string[]) => void; -} - -const CheckedContext = createContext(null); - -type CheckedContextProviderProps = { - children: React.ReactNode; -}; - -const CheckedContextProvider: React.FC = ({ children }) => { - const [checked, setChecked] = useState([]); - - return {children}; -}; - -export { CheckedContextProvider, CheckedContext }; From b0ac88fcc56f0f470106f6becb333926c06f2613 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Brand=C3=A3o?= Date: Tue, 1 Aug 2023 17:54:55 -0300 Subject: [PATCH 14/18] Remove unnecessary package --- package-lock.json | 44 +++++++++++++++++--------------------------- package.json | 2 -- 2 files changed, 17 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 91ecf4c..3ea7443 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,6 @@ "react-dom": "^18.1.0", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", - "styled-components": "^6.0.5", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -34,7 +33,6 @@ "@types/papaparse": "^5.3.7", "@types/react": "^18.1.0", "@types/react-dom": "^18.2.6", - "@types/styled-components": "^5.1.26", "eslint": "^8.46.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.9.0", @@ -85,6 +83,7 @@ "version": "7.22.9", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.9.tgz", "integrity": "sha512-nb2O7AThqRo7/E53EGiuAkMaRbb7J5Qp3RvN+dmua1U+kydm0oznkhqbTEG15yk26G/C3yL6OdZjzgl+DMXVVA==", + "peer": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.17", "commander": "^4.0.1", @@ -113,6 +112,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "peer": true, "engines": { "node": ">= 6" } @@ -121,6 +121,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "peer": true, "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -133,6 +134,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "peer": true, "engines": { "node": ">=6" } @@ -141,6 +143,7 @@ "version": "5.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "peer": true, "bin": { "semver": "bin/semver" } @@ -149,6 +152,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "peer": true, "engines": { "node": ">=6" } @@ -647,6 +651,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz", "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" }, @@ -724,6 +729,7 @@ "version": "7.20.7", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz", "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==", + "peer": true, "dependencies": { "@babel/compat-data": "^7.20.5", "@babel/helper-compilation-targets": "^7.20.7", @@ -3847,7 +3853,8 @@ "version": "2.1.8-no-fsevents.3", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", - "optional": true + "optional": true, + "peer": true }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", @@ -4843,16 +4850,6 @@ "@types/node": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", - "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", - "dev": true, - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -5053,21 +5050,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, - "node_modules/@types/styled-components": { - "version": "5.1.26", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", - "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", - "dev": true, - "dependencies": { - "@types/hoist-non-react-statics": "*", - "@types/react": "*", - "csstype": "^3.0.2" - } - }, "node_modules/@types/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", - "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==", + "peer": true }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.6", @@ -9554,7 +9541,8 @@ "node_modules/fs-readdir-recursive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", - "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==" + "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", + "peer": true }, "node_modules/fs.realpath": { "version": "1.0.0", @@ -17192,6 +17180,7 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.5.tgz", "integrity": "sha512-308zi5o7LrA9cVaP4nPD0TaUpOjGPePkAUFb/OGB0xRI3I9ozpW5UyASvRVi9wJcYASG+Y3mLDLDUZC7nqzimw==", + "peer": true, "dependencies": { "@babel/cli": "^7.21.0", "@babel/core": "^7.21.0", @@ -17234,7 +17223,8 @@ "node_modules/styled-components/node_modules/stylis": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", - "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==", + "peer": true }, "node_modules/stylehacks": { "version": "5.1.1", diff --git a/package.json b/package.json index 2002de8..6c1b532 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "react-dom": "^18.1.0", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", - "styled-components": "^6.0.5", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -45,7 +44,6 @@ "@types/papaparse": "^5.3.7", "@types/react": "^18.1.0", "@types/react-dom": "^18.2.6", - "@types/styled-components": "^5.1.26", "eslint": "^8.46.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.9.0", From ed2a5132afd7a8142988a82df6a78f7d5d082f16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Brand=C3=A3o?= Date: Tue, 1 Aug 2023 17:55:26 -0300 Subject: [PATCH 15/18] Fix styles and change styled-components to mui styled --- src/pages/Home/styles.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/pages/Home/styles.tsx b/src/pages/Home/styles.tsx index 0d2c279..73f283c 100644 --- a/src/pages/Home/styles.tsx +++ b/src/pages/Home/styles.tsx @@ -1,12 +1,14 @@ -import styled from 'styled-components'; +import { styled } from '@mui/material'; -export const FilterContainer = styled.div` - display: flex; - flex-direction: row; - margin-top: 20px; -`; +export const FilterContainer = styled('div')({ + display: 'flex', + flexDirection: 'row', + flexGrow: 1, + marginTop: '20px', + width: '100%', +}); -export const FilterByAreaContainer = styled.div` - width: 20%; - margin-right: 20px; -`; +export const FilterByAreaContainer = styled('div')({ + width: '20%', + marginRight: '20px', +}); From 7c57f860c33ece43939c0447845727cf7c3abf33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Brand=C3=A3o?= Date: Tue, 1 Aug 2023 17:55:41 -0300 Subject: [PATCH 16/18] Fix home layout --- src/pages/Home/index.tsx | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 97e19cf..1a58dd7 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,23 +1,10 @@ -import { CircularProgress, Link, Typography } from '@mui/material'; +import { Box, CircularProgress, Link, Typography } from '@mui/material'; import Papa from 'papaparse'; import { useEffect, useState } from 'react'; import FilterPage from '../../components/Filter'; import FilterByArea from '../../components/FilterByArea'; import { FilterContainer, FilterByAreaContainer } from './styles'; - -interface DeadlineProps { - deadlineId: string; - conference: string; - website: string; - conferenceDetail: string; - area: string; - conferenceDates: string; - location: string; - submissionDeadline: Date; - deadlineDetails: string; - subArea: string; - greatArea: string; -} +import { DeadlineProps } from '../../components/Conference'; function compare(a: DeadlineProps, b: DeadlineProps) { if (a.submissionDeadline < b.submissionDeadline) { @@ -50,12 +37,11 @@ function Home() { 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')], - subArea: deadline[rawDeadlines[0].indexOf('Area')], - 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')]), @@ -75,14 +61,18 @@ function Home() { }; return ( -
+ <> {'The top CS conferences are listed in '} CSRankings.org - {loading && } + {loading && ( + + + + )} {!loading && ( @@ -92,7 +82,7 @@ function Home() { )} -
+ ); } From fc1a7f98f121bf0fdbae400c283f71deda8afad6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Brand=C3=A3o?= Date: Tue, 1 Aug 2023 17:56:54 -0300 Subject: [PATCH 17/18] Fix greatArea/area/subArea names and props --- .eslintrc.json | 1 + src/components/Conference/index.tsx | 8 ++- src/components/Filter/index.tsx | 24 ++----- src/components/FilterByArea/index.tsx | 91 ++++++++++++++------------- 4 files changed, 60 insertions(+), 64 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 89ffe83..e5659dd 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -32,6 +32,7 @@ "rules": { "react/jsx-wrap-multilines": ["error", { "prop": "ignore" }], "react/jsx-props-no-spreading": "off", + "react/no-array-index-key": "off", "object-curly-newline": ["off"], "implicit-arrow-linebreak": ["off"], "max-len": ["error", 120], diff --git a/src/components/Conference/index.tsx b/src/components/Conference/index.tsx index db6f638..759802d 100644 --- a/src/components/Conference/index.tsx +++ b/src/components/Conference/index.tsx @@ -1,11 +1,12 @@ import { Box, Link, Stack, Typography } from '@mui/material'; import Countdown from 'react-countdown'; -interface ConferenceDeadlineProps { +export interface DeadlineProps { deadlineId: string; conference: string; website: string; conferenceDetail: string; + greatArea: string; area: string; conferenceDates: string; location: string; @@ -18,12 +19,13 @@ export function Conference({ conference, website, conferenceDetail, + greatArea, area, conferenceDates, location, submissionDeadline, deadlineDetails, -}: ConferenceDeadlineProps) { +}: DeadlineProps) { const renderCountdown = () => { const now = new Date(); const timeDiff = submissionDeadline.getTime() - now.getTime(); @@ -91,7 +93,7 @@ export function Conference({ {conferenceDetail} - {area} + {`${greatArea} - ${area}`} diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx index 656c482..ae31940 100644 --- a/src/components/Filter/index.tsx +++ b/src/components/Filter/index.tsx @@ -1,21 +1,9 @@ import React, { useState } from 'react'; import { Box, Stack, Typography, TextField } from '@mui/material'; -import { Conference } from '../Conference'; - -interface FilterDeadlineProps { - deadlineId: string; - conference: string; - website: string; - conferenceDetail: string; - area: string; - conferenceDates: string; - location: string; - submissionDeadline: Date; - deadlineDetails: string; - subArea: string; -} +import { Conference, DeadlineProps } from '../Conference'; + interface FilterProps { - deadlines: FilterDeadlineProps[]; + deadlines: DeadlineProps[]; checkedValues: string[]; } @@ -28,15 +16,15 @@ function FilterPage({ deadlines, checkedValues }: FilterProps) { const getCheckedAreaNames = (): string[] => checkedValues.map(nodeId => nodeId.split('_')[1]); - const filteredDeadlinesByText: FilterDeadlineProps[] = deadlines.filter(deadline => + const filteredDeadlinesByText: DeadlineProps[] = deadlines.filter(deadline => Object.values(deadline).some( value => typeof value === 'string' && value.toLowerCase().includes(filterText.toLowerCase()), ), ); - const filteredDeadlines: FilterDeadlineProps[] = + const filteredDeadlines: DeadlineProps[] = checkedValues.length > 0 - ? filteredDeadlinesByText.filter(deadline => getCheckedAreaNames().includes(deadline.subArea)) + ? filteredDeadlinesByText.filter(deadline => getCheckedAreaNames().includes(deadline.area)) : filteredDeadlinesByText; return ( diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index 92996fa..cf74223 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -9,7 +9,7 @@ import { StyledTreeItemLabel } from './styles'; interface FilterByAreaDeadlineProps { greatArea: string; - subArea: string; + area: string; } interface FilterProps { deadlines: FilterByAreaDeadlineProps[]; @@ -19,14 +19,14 @@ interface FilterProps { function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps) { const createTreeData = (deadlinesValue: FilterByAreaDeadlineProps[]) => { - const treeData: { [key: string]: string[] } = {}; + const treeData = new Map(); deadlinesValue.forEach(deadline => { - const { greatArea, subArea } = deadline; - if (!treeData[greatArea]) { - treeData[greatArea] = []; + const { greatArea, area } = deadline; + if (!treeData.has(greatArea)) { + treeData.set(greatArea, []); } - if (!treeData[greatArea].includes(subArea)) { - treeData[greatArea].push(subArea); + if (!treeData.get(greatArea)?.includes(area)) { + treeData.get(greatArea)?.push(area); } }); return treeData; @@ -42,8 +42,8 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps newCheckedValues.splice(currentIndex, 1); } - if (nodeId in treeData) { - treeData[nodeId].forEach(subarea => { + if (treeData.has(nodeId)) { + treeData.get(nodeId)?.forEach(subarea => { const childNodeId = `${nodeId}_${subarea}`; if (!newCheckedValues.includes(childNodeId) && newCheckedValues.includes(nodeId)) { newCheckedValues.push(childNodeId); @@ -57,8 +57,8 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps const parentIndex = nodeId.lastIndexOf('_'); if (parentIndex !== -1) { const parent = nodeId.substring(0, parentIndex); - const siblings = treeData[parent]; - const siblingsChecked = siblings.every(sibling => newCheckedValues.includes(sibling)); + const siblings = treeData.get(parent); + const siblingsChecked = siblings?.every(sibling => newCheckedValues.includes(sibling)); if (siblingsChecked && !newCheckedValues.includes(parent)) { newCheckedValues.push(parent); @@ -68,6 +68,7 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps } return newCheckedValues; }; + const handleCheckboxChange = (event: React.ChangeEvent, nodeId: string) => { const newCheckedValues = toggleChecked(checkedValues, nodeId); onCheckedChange(newCheckedValues); @@ -81,38 +82,42 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps defaultCollapseIcon={} defaultExpandIcon={} > - {Object.keys(treeData).map(area => ( - - handleCheckboxChange(e, area)} /> - {area} - - } - > - {treeData[area].map(subArea => { - const childNodeId = `${area}_${subArea}`; - return ( - - handleCheckboxChange(e, childNodeId)} - /> - {subArea} - - } - /> - ); - })} - - ))} + {treeData.size > 0 && + Array.from(treeData).map(([greatArea, areas]) => ( + + handleCheckboxChange(e, greatArea)} + /> + {greatArea} + + } + > + {areas.map(area => { + const childNodeId = `${greatArea}_${area}`; + return ( + + handleCheckboxChange(e, childNodeId)} + /> + {area} + + } + /> + ); + })} + + ))}
); From c9a5f9006011348d58e33e3e03dd121411ebf9fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Brand=C3=A3o?= Date: Tue, 1 Aug 2023 18:02:01 -0300 Subject: [PATCH 18/18] Sort Great Areas --- src/components/FilterByArea/index.tsx | 72 ++++++++++++++------------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx index cf74223..af2030d 100644 --- a/src/components/FilterByArea/index.tsx +++ b/src/components/FilterByArea/index.tsx @@ -83,41 +83,43 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps defaultExpandIcon={} > {treeData.size > 0 && - Array.from(treeData).map(([greatArea, areas]) => ( - - handleCheckboxChange(e, greatArea)} - /> - {greatArea} - - } - > - {areas.map(area => { - const childNodeId = `${greatArea}_${area}`; - return ( - - handleCheckboxChange(e, childNodeId)} - /> - {area} - - } - /> - ); - })} - - ))} + 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} + + } + /> + ); + })} + + ))} );