Persist SettingsAccordion expanded state in router location

1 files changed, 18 insertions, 2 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
index b4aa0129e9..7df1931bbf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
@@ -11,17 +11,33 @@ export type SettingsAccordion = Omit<AccordionProps, 'animation'> & {
 };
 
 function SettingsAccordion({ accordionId, anchorId, ...props }: SettingsAccordion) {
-  const { location } = useHistory();
+  const history = useHistory();
+  const { location } = history;
+  const { state } = location;
   const initialExpanded = location.state.expandedSections[accordionId];
   const [expanded, setExpanded] = React.useState(initialExpanded);
   const { ref, animation } = useScrollToListItem(anchorId);
 
+  const handleOnExpandedChange = React.useCallback(
+    (value: boolean) => {
+      setExpanded(value);
+      history.replace(location, {
+        ...state,
+        expandedSections: {
+          ...state.expandedSections,
+          [accordionId]: value,
+        },
+      });
+    },
+    [accordionId, history, location, state],
+  );
+
   return (
     <Accordion
       ref={ref}
       animation={animation}
       expanded={expanded}
-      onExpandedChange={setExpanded}
+      onExpandedChange={handleOnExpandedChange}
       {...props}
     />
   );