ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-05 13:10:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: persist state of Collapse components on the client using localStorage

Browse Source
This commit is contained in:
Mose Müller 2024-07-04 12:34:12 +02:00
parent 4cea7eeb59
commit 4ecc44fdd8
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/DataServiceComponent.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'; import { useEffect, useState } from 'react';
import React from 'react'; import React from 'react';
import { Card, Collapse } from 'react-bootstrap'; import { Card, Collapse } from 'react-bootstrap';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
@ -17,7 +17,16 @@ export type DataServiceJSON = Record<string, SerializedValue>;
export const DataServiceComponent = React.memo( export const DataServiceComponent = React.memo(
({ props, isInstantUpdate, addNotification, displayName, id }: DataServiceProps) => { ({ 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 !== '') { if (displayName !== '') {
return ( return (