From 4ecc44fdd8f3c8c4b043a01c13115950841fa669 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Thu, 4 Jul 2024 12:34:12 +0200 Subject: [PATCH] feat: persist state of Collapse components on the client using localStorage --- frontend/src/components/DataServiceComponent.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx index 71bf357..a408b3d 100644 --- a/frontend/src/components/DataServiceComponent.tsx +++ b/frontend/src/components/DataServiceComponent.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import React from 'react'; import { Card, Collapse } from 'react-bootstrap'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; @@ -17,7 +17,16 @@ export type DataServiceJSON = Record; export const DataServiceComponent = React.memo( ({ props, isInstantUpdate, addNotification, displayName, id }: DataServiceProps) => { - const [open, setOpen] = useState(true); + // Retrieve the initial state from localStorage, default to true if not found + const [open, setOpen] = useState(() => { + const savedState = localStorage.getItem(`dataServiceComponent-${id}-open`); + return savedState !== null ? JSON.parse(savedState) : true; + }); + + // Update localStorage whenever the state changes + useEffect(() => { + localStorage.setItem(`dataServiceComponent-${id}-open`, JSON.stringify(open)); + }, [open]); if (displayName !== '') { return (