mirror of
https://github.com/tiqi-group/pydase.git
synced 2025-04-20 00:10:03 +02:00
Merge pull request #133 from tiqi-group/81-use-web-storage-api-to-store-client-settings
Use web storage api to store client settings
This commit is contained in:
commit
e8428e4a31
@ -48,9 +48,15 @@ const App = () => {
|
||||
const [state, dispatch] = useReducer(reducer, null);
|
||||
const [serviceName, setServiceName] = useState(null);
|
||||
const [webSettings, setWebSettings] = useState<Record<string, WebSetting>>({});
|
||||
const [isInstantUpdate, setIsInstantUpdate] = useState(false);
|
||||
const [isInstantUpdate, setIsInstantUpdate] = useState(() => {
|
||||
const saved = localStorage.getItem('isInstantUpdate');
|
||||
return saved !== null ? JSON.parse(saved) : false;
|
||||
});
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showNotification, setShowNotification] = useState(false);
|
||||
const [showNotification, setShowNotification] = useState(() => {
|
||||
const saved = localStorage.getItem('showNotification');
|
||||
return saved !== null ? JSON.parse(saved) : false;
|
||||
});
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [connectionStatus, setConnectionStatus] = useState('connecting');
|
||||
|
||||
@ -104,6 +110,14 @@ const App = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Persist isInstantUpdate and showNotification state changes to localStorage
|
||||
useEffect(() => {
|
||||
localStorage.setItem('isInstantUpdate', JSON.stringify(isInstantUpdate));
|
||||
}, [isInstantUpdate]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('showNotification', JSON.stringify(showNotification));
|
||||
}, [showNotification]);
|
||||
// Adding useCallback to prevent notify to change causing a re-render of all
|
||||
// components
|
||||
const addNotification = useCallback(
|
||||
|
@ -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<string, SerializedValue>;
|
||||
|
||||
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 (
|
||||
|
@ -1,13 +1,13 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.7ef670d5.css",
|
||||
"main.js": "/static/js/main.4facf514.js",
|
||||
"main.css": "/static/css/main.5c84814d.css",
|
||||
"main.js": "/static/js/main.707f7ff1.js",
|
||||
"index.html": "/index.html",
|
||||
"main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map",
|
||||
"main.4facf514.js.map": "/static/js/main.4facf514.js.map"
|
||||
"main.5c84814d.css.map": "/static/css/main.5c84814d.css.map",
|
||||
"main.707f7ff1.js.map": "/static/js/main.707f7ff1.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.7ef670d5.css",
|
||||
"static/js/main.4facf514.js"
|
||||
"static/css/main.5c84814d.css",
|
||||
"static/js/main.707f7ff1.js"
|
||||
]
|
||||
}
|
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.4facf514.js"></script><link href="/static/css/main.7ef670d5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.707f7ff1.js"></script><link href="/static/css/main.5c84814d.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
6
src/pydase/frontend/static/css/main.5c84814d.css
Normal file
6
src/pydase/frontend/static/css/main.5c84814d.css
Normal file
File diff suppressed because one or more lines are too long
1
src/pydase/frontend/static/css/main.5c84814d.css.map
Normal file
1
src/pydase/frontend/static/css/main.5c84814d.css.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
3
src/pydase/frontend/static/js/main.707f7ff1.js
Normal file
3
src/pydase/frontend/static/js/main.707f7ff1.js
Normal file
File diff suppressed because one or more lines are too long
@ -14,6 +14,16 @@
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-jsx-runtime.production.min.js
|
||||
@ -43,3 +53,12 @@
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.13.1
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
1
src/pydase/frontend/static/js/main.707f7ff1.js.map
Normal file
1
src/pydase/frontend/static/js/main.707f7ff1.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user