expand bug fix

MobilityData · Nov 29, 2024 · d897d40 · d897d40
1 parent 12a96ba
commit d897d40
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/web-app/src/app/components/NestedCheckboxList.tsx b/web-app/src/app/components/NestedCheckboxList.tsx
@@ -14,6 +14,7 @@ import { theme } from '../Theme';
 interface NestedCheckboxListProps {
   checkboxData: CheckboxStructure[];
   onCheckboxChange: (checkboxData: CheckboxStructure[]) => void;
+  onExpandGroupChange?: (checkboxData: CheckboxStructure[]) => void;
 }
 
 // NOTE: Although the data structure allows for multiple levels of nesting, the current implementation only supports two levels.
@@ -29,6 +30,7 @@ export interface CheckboxStructure {
 export default function NestedCheckboxList({
   checkboxData,
   onCheckboxChange,
+  onExpandGroupChange,
 }: NestedCheckboxListProps): JSX.Element {
   const [checkboxStructure, setCheckboxStructure] =
     React.useState<CheckboxStructure[]>(checkboxData);
@@ -71,14 +73,15 @@ export default function NestedCheckboxList({
                       edge={'end'}
                       aria-label='expand'
                       onClick={() => {
-                        setCheckboxStructure((prev) => {
-                          checkboxData.seeChildren =
-                            checkboxData.seeChildren === undefined
-                              ? true
-                              : !checkboxData.seeChildren;
-                          return [...prev];
-                        });
-                        // NOTE: Expand changes will not output to parent
+                        checkboxData.seeChildren =
+                          checkboxData.seeChildren === undefined
+                            ? true
+                            : !checkboxData.seeChildren;
+                        checkboxStructure[index] = checkboxData;
+                        setCheckboxStructure([...checkboxStructure]);
+                        if (onExpandGroupChange !== undefined) {
+                          onExpandGroupChange([...checkboxStructure]);
+                        }
                       }}
                     >
                       {checkboxData.seeChildren !== undefined &&

diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx
@@ -48,6 +48,9 @@ export default function Feed(): React.ReactElement {
   );
   const [activeSearch, setActiveSearch] = useState(searchParams.get('q') ?? '');
   const [searchQuery, setSearchQuery] = useState(activeSearch);
+  const [expandedElements, setExpandedElements] = useState<
+    Record<string, boolean>
+  >(setInitialExpandGroup());
   const [selectedFeatures, setSelectedFeatures] = useState<string[]>(
     searchParams.get('features')?.split(',') ?? [],
   );
@@ -144,6 +147,14 @@ export default function Feed(): React.ReactElement {
     }
   };
 
+  function setInitialExpandGroup(): Record<string, boolean> {
+    const expandGroup: Record<string, boolean> = {};
+    Object.keys(groupFeaturesByComponent()).forEach((featureGroup) => {
+      expandGroup[featureGroup] = true;
+    });
+    return expandGroup;
+  }
+
   function generateCheckboxStructure(): CheckboxStructure[] {
     const groupedFeatures = groupFeaturesByComponent();
     return Object.entries(groupedFeatures)
@@ -154,7 +165,7 @@ export default function Feed(): React.ReactElement {
         checked: features.every((feature) =>
           selectedFeatures.includes(feature.feature),
         ),
-        seeChildren: true,
+        seeChildren: expandedElements[parent],
         type: 'checkbox',
         children: features.map((feature) => {
           return {
@@ -307,6 +318,18 @@ export default function Feed(): React.ReactElement {
                   <SearchHeader variant='h6'>Features</SearchHeader>
                   <NestedCheckboxList
                     checkboxData={featureCheckboxData}
+                    onExpandGroupChange={(checkboxData) => {
+                      const newExpandGroup: Record<string, boolean> = {};
+                      checkboxData.forEach((cd) => {
+                        if (cd.seeChildren !== undefined) {
+                          newExpandGroup[cd.title] = cd.seeChildren;
+                        }
+                      });
+                      setExpandedElements({
+                        ...expandedElements,
+                        ...newExpandGroup,
+                      });
+                    }}
                     onCheckboxChange={(checkboxData) => {
                       const selelectedFeatures: string[] = [];
                       checkboxData.forEach((checkbox) => {