From 42ce62119757d3139af03faa7c4436396970c074 Mon Sep 17 00:00:00 2001 From: ajnart Date: Wed, 5 Apr 2023 15:23:37 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Add=20localstorage=20caching=20?= =?UTF-8?q?with=20React=20Query?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++ .../Dashboard/Views/DashboardView.tsx | 41 +++++------ src/pages/_app.tsx | 15 +++- yarn.lock | 69 +++++++++++++++++++ 4 files changed, 101 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 58ee7ec5a..f1d0f5961 100644 --- a/package.json +++ b/package.json @@ -41,9 +41,13 @@ "@mantine/notifications": "^6.0.0", "@nivo/core": "^0.80.0", "@nivo/line": "^0.80.0", + "@react-native-async-storage/async-storage": "^1.18.1", "@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-devtools": "^4.24.4", + "@tanstack/react-query-persist-client": "^4.28.0", "@vitejs/plugin-react": "^3.1.0", "axios": "^0.27.2", "consola": "^2.15.3", diff --git a/src/components/Dashboard/Views/DashboardView.tsx b/src/components/Dashboard/Views/DashboardView.tsx index 202232e45..b16c86385 100644 --- a/src/components/Dashboard/Views/DashboardView.tsx +++ b/src/components/Dashboard/Views/DashboardView.tsx @@ -17,33 +17,24 @@ export const DashboardView = () => { return ( - {sidebarsVisible.isLoading ? ( -
- -
- ) : ( - <> - {sidebarsVisible.left ? ( - - ) : null} + {sidebarsVisible.left ? ( + + ) : null} - - {!isReady - ? null - : wrappers.map((item) => - item.type === 'category' ? ( - - ) : ( - - ) - )} - + + {isReady && + wrappers.map((item) => + item.type === 'category' ? ( + + ) : ( + + ) + )} + - {sidebarsVisible.right ? ( - - ) : null} - - )} + {sidebarsVisible.right ? ( + + ) : null} ); }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e3b96fb7a..36862b5ea 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks'; import { ModalsProvider } from '@mantine/modals'; import Consola from 'consola'; -import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { getCookie } from 'cookies-next'; import { GetServerSidePropsContext } from 'next'; @@ -12,6 +11,9 @@ import Head from 'next/head'; import { useEffect, useState } from 'react'; import { Notifications } from '@mantine/notifications'; 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 { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal'; import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal'; @@ -77,6 +79,10 @@ function App( const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')); + const asyncStoragePersister = createAsyncStoragePersister({ + storage: AsyncStorage, + }); + useHotkeys([['mod+J', () => toggleColorScheme()]]); return ( @@ -84,7 +90,10 @@ function App( - + - + ); } diff --git a/yarn.lock b/yarn.lock index 53d9a46ef..41070bd38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1503,6 +1503,17 @@ __metadata: languageName: node 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": version: 9.4.5 resolution: "@react-spring/animated@npm:9.4.5" @@ -1642,6 +1653,15 @@ __metadata: languageName: node 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": version: 4.27.0 resolution: "@tanstack/query-core@npm:4.27.0" @@ -1649,6 +1669,24 @@ __metadata: languageName: node 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": version: 4.28.0 resolution: "@tanstack/react-query-devtools@npm:4.28.0" @@ -1664,6 +1702,17 @@ __metadata: languageName: node 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": version: 4.28.0 resolution: "@tanstack/react-query@npm:4.28.0" @@ -4857,9 +4906,13 @@ __metadata: "@next/eslint-plugin-next": ^12.1.4 "@nivo/core": ^0.80.0 "@nivo/line": ^0.80.0 + "@react-native-async-storage/async-storage": ^1.18.1 "@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-devtools": ^4.24.4 + "@tanstack/react-query-persist-client": ^4.28.0 "@testing-library/jest-dom": ^5.16.5 "@testing-library/react": ^14.0.0 "@types/dockerode": ^3.3.9 @@ -5354,6 +5407,13 @@ __metadata: languageName: node 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": version: 1.1.4 resolution: "is-regex@npm:1.1.4" @@ -5875,6 +5935,15 @@ __metadata: languageName: node 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": version: 1.4.1 resolution: "merge2@npm:1.4.1" From 984292482a67b901484f0cd61bf20afe22dd1c54 Mon Sep 17 00:00:00 2001 From: Manuel Date: Thu, 6 Apr 2023 22:53:44 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=91=20Fix=20sidebar=20ribbons=20br?= =?UTF-8?q?eakpoint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useScreenLargerThan.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/hooks/useScreenLargerThan.ts b/src/hooks/useScreenLargerThan.ts index 2b1b3abd3..b499917c5 100644 --- a/src/hooks/useScreenLargerThan.ts +++ b/src/hooks/useScreenLargerThan.ts @@ -1,9 +1,8 @@ import { MantineSize, useMantineTheme } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; -import { MIN_WIDTH_MOBILE } from '../constants/constants'; export const useScreenLargerThan = (size: MantineSize | number) => { const { breakpoints } = useMantineTheme(); const pixelCount = typeof size === 'string' ? breakpoints[size] : size; - return useMediaQuery(`(min-width: ${MIN_WIDTH_MOBILE})`); + return useMediaQuery(`(min-width: ${pixelCount})`); };