Sort Great Areas

CinCoders · Aug 1, 2023 · c9a5f90 · c9a5f90
1 parent fc1a7f9
commit c9a5f90
Showing 1 changed file with 37 additions and 35 deletions.
diff --git a/src/components/FilterByArea/index.tsx b/src/components/FilterByArea/index.tsx
@@ -83,41 +83,43 @@ function FilterByArea({ deadlines, checkedValues, onCheckedChange }: FilterProps
         defaultExpandIcon={<ChevronRightIcon />}
       >
         {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>
-          ))}
+          Array.from(treeData)
+            .sort((a, b) => a[0].localeCompare(b[0]))
+            .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>
   );