Fix greatArea/area/subArea names and props

CinCoders · Aug 1, 2023 · fc1a7f9 · fc1a7f9
1 parent 7c57f86
commit fc1a7f9
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 64 deletions.
diff --git 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
@@ -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}
             </Typography>
             <Typography variant='body2' fontWeight='bold'>
-              {area}
+              {`${greatArea} - ${area}`}
             </Typography>
           </Stack>
         </Stack>

diff --git 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
@@ -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<string, string[]>();
     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<HTMLInputElement>, nodeId: string) => {
     const newCheckedValues = toggleChecked(checkedValues, nodeId);
     onCheckedChange(newCheckedValues);
@@ -81,38 +82,42 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps
         defaultCollapseIcon={<ExpandMoreIcon />}
         defaultExpandIcon={<ChevronRightIcon />}
       >
-        {Object.keys(treeData).map(area => (
-          <TreeItem
-            key={area}
-            nodeId={area}
-            label={
-              <StyledTreeItemLabel>
-                <Checkbox checked={checkedValues.includes(area)} onChange={e => handleCheckboxChange(e, area)} />
-                {area}
-              </StyledTreeItemLabel>
-            }
-          >
-            {treeData[area].map(subArea => {
-              const childNodeId = `${area}_${subArea}`;
-              return (
-                <TreeItem
-                  key={childNodeId}
-                  nodeId={childNodeId}
-                  label={
-                    <StyledTreeItemLabel>
-                      <Checkbox
-                        size='small'
-                        checked={checkedValues.includes(childNodeId)}
-                        onChange={e => handleCheckboxChange(e, childNodeId)}
-                      />
-                      {subArea}
-                    </StyledTreeItemLabel>
-                  }
-                />
-              );
-            })}
-          </TreeItem>
-        ))}
+        {treeData.size > 0 &&
+          Array.from(treeData).map(([greatArea, areas]) => (
+            <TreeItem
+              key={greatArea}
+              nodeId={greatArea}
+              label={
+                <StyledTreeItemLabel>
+                  <Checkbox
+                    checked={checkedValues.includes(greatArea)}
+                    onChange={e => handleCheckboxChange(e, greatArea)}
+                  />
+                  {greatArea}
+                </StyledTreeItemLabel>
+              }
+            >
+              {areas.map(area => {
+                const childNodeId = `${greatArea}_${area}`;
+                return (
+                  <TreeItem
+                    key={childNodeId}
+                    nodeId={childNodeId}
+                    label={
+                      <StyledTreeItemLabel>
+                        <Checkbox
+                          size='small'
+                          checked={checkedValues.includes(childNodeId)}
+                          onChange={e => handleCheckboxChange(e, childNodeId)}
+                        />
+                        {area}
+                      </StyledTreeItemLabel>
+                    }
+                  />
+                );
+              })}
+            </TreeItem>
+          ))}
       </TreeView>
     </div>
   );