Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-12 08:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add localstorage caching with React Query

Browse Source
This commit is contained in:
ajnart
2023-04-05 15:23:37 +09:00
parent 7cf6fe53fc
commit 42ce621197
4 changed files with 101 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -41,9 +41,13 @@
"@mantine/notifications": "^6.0.0", "@mantine/notifications": "^6.0.0",
"@nivo/core": "^0.80.0", "@nivo/core": "^0.80.0",
"@nivo/line": "^0.80.0", "@nivo/line": "^0.80.0",
"@react-native-async-storage/async-storage": "^1.18.1",
"@tabler/icons": "^1.106.0", "@tabler/icons": "^1.106.0",
"@tanstack/query-async-storage-persister": "^4.27.1",
"@tanstack/query-sync-storage-persister": "^4.27.1",
"@tanstack/react-query": "^4.2.1", "@tanstack/react-query": "^4.2.1",
"@tanstack/react-query-devtools": "^4.24.4", "@tanstack/react-query-devtools": "^4.24.4",
"@tanstack/react-query-persist-client": "^4.28.0",
"@vitejs/plugin-react": "^3.1.0", "@vitejs/plugin-react": "^3.1.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"consola": "^2.15.3", "consola": "^2.15.3",

41
src/components/Dashboard/Views/DashboardView.tsx
View File

@@ -17,33 +17,24 @@ export const DashboardView = () => {
return ( return (
<Group align="top" h="100%" spacing="xs"> <Group align="top" h="100%" spacing="xs">
{sidebarsVisible.isLoading ? ( {sidebarsVisible.left ? (
<Center w="100%"> <DashboardSidebar location="left" isGridstackReady={isReady} />
<Loader /> ) : null}
</Center>
) : (
<>
{sidebarsVisible.left ? (
<DashboardSidebar location="left" isGridstackReady={isReady} />
) : null}
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}> <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
{!isReady {isReady &&
? null wrappers.map((item) =>
: wrappers.map((item) => item.type === 'category' ? (
item.type === 'category' ? ( <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
<DashboardCategory key={item.id} category={item as unknown as CategoryType} /> ) : (
) : ( <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
<DashboardWrapper key={item.id} wrapper={item as WrapperType} /> )
) )}
)} </Stack>
</Stack>
{sidebarsVisible.right ? ( {sidebarsVisible.right ? (
<DashboardSidebar location="right" isGridstackReady={isReady} /> <DashboardSidebar location="right" isGridstackReady={isReady} />
) : null} ) : null}
</>
)}
</Group> </Group>
); );
}; };

15
src/pages/_app.tsx
View File

@@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from
import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks'; import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
import { ModalsProvider } from '@mantine/modals'; import { ModalsProvider } from '@mantine/modals';
import Consola from 'consola'; import Consola from 'consola';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { getCookie } from 'cookies-next'; import { getCookie } from 'cookies-next';
import { GetServerSidePropsContext } from 'next'; import { GetServerSidePropsContext } from 'next';
@@ -12,6 +11,9 @@ import Head from 'next/head';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Notifications } from '@mantine/notifications'; import { Notifications } from '@mantine/notifications';
import 'video.js/dist/video-js.css'; import 'video.js/dist/video-js.css';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal'; import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal'; import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal'; import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
@@ -77,6 +79,10 @@ function App(
const toggleColorScheme = (value?: ColorScheme) => const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')); setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
});
useHotkeys([['mod+J', () => toggleColorScheme()]]); useHotkeys([['mod+J', () => toggleColorScheme()]]);
return ( return (
@@ -84,7 +90,10 @@ function App(
<Head> <Head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head> </Head>
<QueryClientProvider client={queryClient}> <PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
>
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}> <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<ColorTheme.Provider value={colorTheme}> <ColorTheme.Provider value={colorTheme}>
<MantineProvider <MantineProvider
@@ -131,7 +140,7 @@ function App(
</ColorTheme.Provider> </ColorTheme.Provider>
</ColorSchemeProvider> </ColorSchemeProvider>
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider> </PersistQueryClientProvider>
</> </>
); );
} }

69
yarn.lock
View File

@@ -1503,6 +1503,17 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@react-native-async-storage/async-storage@npm:^1.18.1":
version: 1.18.1
resolution: "@react-native-async-storage/async-storage@npm:1.18.1"
dependencies:
merge-options: ^3.0.4
peerDependencies:
react-native: ^0.0.0-0 || 0.60 - 0.72 || 1000.0.0
checksum: 58c8497fafdd4d112c4a70b0976783abdc6fa487f0cffca196901efd146fc838dee0cf498fdc4ef67a4634ba4ca97d60fec5a24720aea1d46f1999b0ba8b249b
languageName: node
linkType: hard
"@react-spring/animated@npm:~9.4.5": "@react-spring/animated@npm:~9.4.5":
version: 9.4.5 version: 9.4.5
resolution: "@react-spring/animated@npm:9.4.5" resolution: "@react-spring/animated@npm:9.4.5"
@@ -1642,6 +1653,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@tanstack/query-async-storage-persister@npm:^4.27.1":
version: 4.27.1
resolution: "@tanstack/query-async-storage-persister@npm:4.27.1"
dependencies:
"@tanstack/query-persist-client-core": 4.27.0
checksum: f98da672c6a61c65a58dc3d1b6e4416800bbd61747f806cc8cfceecb9f8bf4fa6be4133036f0b2efd5177e6f93031bb84e2ee53d888e9d6c34cc11f8aede97f4
languageName: node
linkType: hard
"@tanstack/query-core@npm:4.27.0": "@tanstack/query-core@npm:4.27.0":
version: 4.27.0 version: 4.27.0
resolution: "@tanstack/query-core@npm:4.27.0" resolution: "@tanstack/query-core@npm:4.27.0"
@@ -1649,6 +1669,24 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@tanstack/query-persist-client-core@npm:4.27.0":
version: 4.27.0
resolution: "@tanstack/query-persist-client-core@npm:4.27.0"
dependencies:
"@tanstack/query-core": 4.27.0
checksum: 9a2df41744269d666bc0c1a5684a1d9d327e7994b57f9c1a71ea86d169dbde94f9d4af4b4ebe258d0085e0aa2cd563460b06513eccc4b016c0c5d416122d0275
languageName: node
linkType: hard
"@tanstack/query-sync-storage-persister@npm:^4.27.1":
version: 4.27.1
resolution: "@tanstack/query-sync-storage-persister@npm:4.27.1"
dependencies:
"@tanstack/query-persist-client-core": 4.27.0
checksum: 16cdef50af43cf854ec1244f43609c04f9a9fcb7bbb36c763ce3146aeb85095c62da098fb4c4876d76496fa5830d54c6e79691d2b353919b1e5f274a3c34a97e
languageName: node
linkType: hard
"@tanstack/react-query-devtools@npm:^4.24.4": "@tanstack/react-query-devtools@npm:^4.24.4":
version: 4.28.0 version: 4.28.0
resolution: "@tanstack/react-query-devtools@npm:4.28.0" resolution: "@tanstack/react-query-devtools@npm:4.28.0"
@@ -1664,6 +1702,17 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@tanstack/react-query-persist-client@npm:^4.28.0":
version: 4.28.0
resolution: "@tanstack/react-query-persist-client@npm:4.28.0"
dependencies:
"@tanstack/query-persist-client-core": 4.27.0
peerDependencies:
"@tanstack/react-query": 4.28.0
checksum: 8177b41ae644774f380154ec09588cce21b6bf75f45d58691cc86fd58002927989f47e278170a1ae9c3c02638a7e26d67a29106c768d325a54cef9219115839d
languageName: node
linkType: hard
"@tanstack/react-query@npm:^4.2.1": "@tanstack/react-query@npm:^4.2.1":
version: 4.28.0 version: 4.28.0
resolution: "@tanstack/react-query@npm:4.28.0" resolution: "@tanstack/react-query@npm:4.28.0"
@@ -4857,9 +4906,13 @@ __metadata:
"@next/eslint-plugin-next": ^12.1.4 "@next/eslint-plugin-next": ^12.1.4
"@nivo/core": ^0.80.0 "@nivo/core": ^0.80.0
"@nivo/line": ^0.80.0 "@nivo/line": ^0.80.0
"@react-native-async-storage/async-storage": ^1.18.1
"@tabler/icons": ^1.106.0 "@tabler/icons": ^1.106.0
"@tanstack/query-async-storage-persister": ^4.27.1
"@tanstack/query-sync-storage-persister": ^4.27.1
"@tanstack/react-query": ^4.2.1 "@tanstack/react-query": ^4.2.1
"@tanstack/react-query-devtools": ^4.24.4 "@tanstack/react-query-devtools": ^4.24.4
"@tanstack/react-query-persist-client": ^4.28.0
"@testing-library/jest-dom": ^5.16.5 "@testing-library/jest-dom": ^5.16.5
"@testing-library/react": ^14.0.0 "@testing-library/react": ^14.0.0
"@types/dockerode": ^3.3.9 "@types/dockerode": ^3.3.9
@@ -5354,6 +5407,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"is-plain-obj@npm:^2.1.0":
version: 2.1.0
resolution: "is-plain-obj@npm:2.1.0"
checksum: cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
languageName: node
linkType: hard
"is-regex@npm:^1.1.4": "is-regex@npm:^1.1.4":
version: 1.1.4 version: 1.1.4
resolution: "is-regex@npm:1.1.4" resolution: "is-regex@npm:1.1.4"
@@ -5875,6 +5935,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"merge-options@npm:^3.0.4":
version: 3.0.4
resolution: "merge-options@npm:3.0.4"
dependencies:
is-plain-obj: ^2.1.0
checksum: d86ddb3dd6e85d558dbf25dc944f3527b6bacb944db3fdda6e84a3f59c4e4b85231095f58b835758b9a57708342dee0f8de0dffa352974a48221487fe9f4584f
languageName: node
linkType: hard
"merge2@npm:^1.3.0, merge2@npm:^1.4.1": "merge2@npm:^1.3.0, merge2@npm:^1.4.1":
version: 1.4.1 version: 1.4.1
resolution: "merge2@npm:1.4.1" resolution: "merge2@npm:1.4.1"