Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-11 16:05:44 +01:00
Code Issues Packages Projects Releases Activity

Implement context-based local storage

Browse Source 
This allows re-rendering of useLocalStorage hooks whenever the value for the associated key changes. In the previous implementation, reading and writing via useLocalStorage did not cause a re-render and was therefore impossible.
This commit is contained in:
Konstantin Schaper
2023-10-25 18:14:50 +02:00
parent 6c97c8fcba
commit 848b13f957
4 changed files with 112 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/local_storage_context.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: The useLocalStorage hook in @scm-manager/ui-api now correctly causes a re-render on write

45
scm-ui/ui-api/src/localStorage.ts
View File

@@ -1,45 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { useEffect, useState } from "react";
export function useLocalStorage<T>(
key: string,
initialValue: T
): [value: T, setValue: (value: T | ((previousConfig: T) => T)) => void] {
const [value, setValue] = useState<T>(() => {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
return initialValue;
}
});
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [key, value]);
return [value, setValue];
}

99
scm-ui/ui-api/src/localStorage.tsx Normal file
View File

@@ -0,0 +1,99 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { createContext, FC, useCallback, useContext, useMemo, useState } from "react";
type LocalStorage = {
getItem: <T>(key: string, initialValue: T) => T;
setItem: <T>(key: string, value: T) => void;
};
const LocalStorageContext = createContext<LocalStorage>(null as unknown as LocalStorage);
/**
* Cache provider for local storage which enables listening to changes and triggering re-renders when writing.
*
* Only required once as a wrapper for the whole application.
*
* @see useLocalStorage
*/
export const LocalStorageProvider: FC = ({ children }) => {
const [localStorageCache, setLocalStorageCache] = useState<Record<string, unknown>>({});
const setItem = useCallback(<T,>(key: string, value: T) => {
localStorage.setItem(key, JSON.stringify(value));
setLocalStorageCache((prevState) => ({
...prevState,
[key]: value,
}));
}, []);
const getItem = useCallback(
<T,>(key: string, initialValue: T): T => {
let initialLoadResult: T | undefined;
if (!(key in localStorageCache)) {
try {
const item = localStorage.getItem(key);
initialLoadResult = item ? JSON.parse(item) : initialValue;
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
initialLoadResult = initialValue;
}
setItem(key, initialLoadResult);
}
return initialLoadResult ?? (localStorageCache[key] as T);
},
[localStorageCache, setItem]
);
return (
<LocalStorageContext.Provider value={useMemo(() => ({ getItem, setItem }), [getItem, setItem])}>
{children}
</LocalStorageContext.Provider>
);
};
/**
* Provides an api to access the browser's local storage for a given key.
*
* @param key The local storage key
* @param initialValue Value to be used if the local storage does not yet have the given key defined
*/
export function useLocalStorage<T>(
key: string,
initialValue: T
): [value: T, setValue: (value: T | ((previousConfig: T) => T)) => void] {
const { getItem, setItem } = useContext(LocalStorageContext);
const value = useMemo(() => getItem(key, initialValue), [getItem, initialValue, key]);
const setValue = useCallback(
(newValue: T | ((previousConfig: T) => T)) =>
// @ts-ignore T could be a function type, although this does not make sense because function types are not serializable to json
setItem(key, typeof newValue === "function" ? newValue(value) : newValue),
// eslint does not understand generics in certain circumstances
// eslint-disable-next-line react-hooks/exhaustive-deps
[key, setItem, value]
);
return useMemo(() => [value, setValue], [setValue, value]);
}

22
scm-ui/ui-webapp/src/index.tsx
View File

@@ -35,10 +35,8 @@ import { binder, extensionPoints } from "@scm-manager/ui-extensions";
import ChangesetShortLink from "./repos/components/changesets/ChangesetShortLink";
import "./tokenExpired";
import { ApiProvider } from "@scm-manager/ui-api";
import { ShortcutDocsContextProvider } from "@scm-manager/ui-shortcuts";
// Makes sure that the global `define` function is registered and all provided modules are included in the final bundle at all times
import { ApiProvider, LocalStorageProvider } from "@scm-manager/ui-api";
import { ShortcutDocsContextProvider } from "@scm-manager/ui-shortcuts"; // Makes sure that the global `define` function is registered and all provided modules are included in the final bundle at all times
import "./_modules/provided-modules";
binder.bind<extensionPoints.ChangesetDescriptionTokens>("changeset.description.tokens", ChangesetShortLink);
@@ -51,13 +49,15 @@ if (!root) {
ReactDOM.render(
<ApiProvider>
<I18nextProvider i18n={i18n}>
<ShortcutDocsContextProvider>
<ActiveModalCountContextProvider>
<Router basename={urls.contextPath}>
<Index />
</Router>
</ActiveModalCountContextProvider>
</ShortcutDocsContextProvider>
<LocalStorageProvider>
<ShortcutDocsContextProvider>
<ActiveModalCountContextProvider>
<Router basename={urls.contextPath}>
<Index />
</Router>
</ActiveModalCountContextProvider>
</ShortcutDocsContextProvider>
</LocalStorageProvider>
</I18nextProvider>
</ApiProvider>,
root