Merge pull request #216 from DLR-SC/feature/fix-group-filter-update

🪲 Fix group filter update issue.
DLR-SC · Feb 24, 2023 · 0544a5f · 0544a5f
2 parents 41de617 + e4d4d27
commit 0544a5f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -12,13 +12,15 @@
     - Example of a group filter: "All males of any age"
   - The scenario cards now show the active group filters as an collapsible addon to the right.
   - The line chart displays the group filters with a different line style.
-  
+
 ### Improvements
 - All numbers on scenario cards now show as integers only.
 - The cards are now bigger, so it is less likely for text to overflow.
 - The app now saves, if the compartments were expanded between sessions.
 
 ### Bug fixes
+- Found an issue with the persistent cache that crashed the website when a new property is added to the persistent store 
+  and added a comment to prevent future errors.
 
 ---
 

diff --git a/frontend/src/components/ManageGroupDialog.tsx b/frontend/src/components/ManageGroupDialog.tsx
@@ -87,7 +87,7 @@ export function ManageGroupDialog(props: {onCloseRequest: () => void}): JSX.Elem
             padding: theme.spacing(2),
           }}
         >
-          {Object.values(groupFilterList)?.map((item) => (
+          {Object.values(groupFilterList || {})?.map((item) => (
             <GroupFilterCard
               key={item.id}
               item={item}

diff --git a/frontend/src/store/DataSelectionSlice.ts b/frontend/src/store/DataSelectionSlice.ts
@@ -11,6 +11,11 @@ import {GroupFilter} from 'types/group';
  */
 export type AGS = string;
 
+/**
+ * This contains all the state, that the user can configure directly.
+ *
+ * IMPORTANT: ALL NEW ADDITIONS MUST BE NULLABLE TO ENSURE EXISTING CACHES DOESN'T BREAK ON UPDATES!
+ */
 export interface DataSelection {
   district: {ags: AGS; name: string; type: string};
   date: string | null;
@@ -21,7 +26,7 @@ export interface DataSelection {
 
   minDate: string | null;
   maxDate: string | null;
-  groupFilters: Dictionary<GroupFilter>;
+  groupFilters: Dictionary<GroupFilter> | null;
 }
 
 const initialState: DataSelection = {
@@ -101,12 +106,24 @@ export const DataSelectionSlice = createSlice({
       state.compartmentsExpanded = !state.compartmentsExpanded;
     },
     setGroupFilter(state, action: PayloadAction<GroupFilter>) {
+      if (!state.groupFilters) {
+        state.groupFilters = {};
+      }
+
       state.groupFilters[action.payload.id] = action.payload;
     },
     deleteGroupFilter(state, action: PayloadAction<string>) {
+      if (!state.groupFilters) {
+        state.groupFilters = {};
+      }
+
       delete state.groupFilters[action.payload];
     },
     toggleGroupFilter(state, action: PayloadAction<string>) {
+      if (!state.groupFilters) {
+        state.groupFilters = {};
+      }
+
       if (state.groupFilters[action.payload]) {
         state.groupFilters[action.payload].isVisible = !state.groupFilters[action.payload].isVisible;
       }