From 1bb84e3b0fd81c58f19826e836c7b4556a4a4a3d Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 1 Aug 2023 19:19:27 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20cache=20back?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  3 ++
 src/pages/_app.tsx                | 85 ++++++++++++++++++-------------
 src/pages/manage/boards/index.tsx |  6 ---
 src/pages/user/preferences.tsx    |  1 +
 yarn.lock                         | 48 +++++++++++++++++
 5 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index cbba32e4c..0b4afbf28 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,11 @@
     "@nivo/core": "^0.83.0",
     "@nivo/line": "^0.83.0",
     "@prisma/client": "^5.0.0",
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@t3-oss/env-nextjs": "^0.6.0",
     "@tabler/icons-react": "^2.18.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",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3bfcd9a71..2a06bed07 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,7 +1,10 @@
 import { ColorScheme as MantineColorScheme, MantineProvider, MantineTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import Consola from 'consola';
 import { getCookie, setCookie } from 'cookies-next';
 import 'flag-icons/css/flag-icons.min.css';
@@ -16,6 +19,7 @@ import 'video.js/dist/video-js.css';
 import { env } from '~/env.js';
 import { ColorSchemeProvider } from '~/hooks/use-colorscheme';
 import { modals } from '~/modals/modals';
+import { queryClient } from '~/tools/server/configurations/tanstack/queryClient.tool';
 import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
@@ -65,6 +69,10 @@ function App(
 
   const { setInitialPackageAttributes } = usePackageAttributesStore();
 
+  const asyncStoragePersister = createAsyncStoragePersister({
+    storage: AsyncStorage,
+  });
+
   useEffect(() => {
     setInitialPackageAttributes(props.pageProps.packageAttributes);
   }, []);
@@ -75,44 +83,49 @@ function App(
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>
       <SessionProvider session={pageProps.session}>
-        <ColorSchemeProvider {...pageProps}>
-          {(colorScheme) => (
-            <ColorTheme.Provider value={colorTheme}>
-              <MantineProvider
-                theme={{
-                  ...theme,
-                  components: {
-                    Checkbox: {
-                      styles: {
-                        input: { cursor: 'pointer' },
-                        label: { cursor: 'pointer' },
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister: asyncStoragePersister }}
+        >
+          <ColorSchemeProvider {...pageProps}>
+            {(colorScheme) => (
+              <ColorTheme.Provider value={colorTheme}>
+                <MantineProvider
+                  theme={{
+                    ...theme,
+                    components: {
+                      Checkbox: {
+                        styles: {
+                          input: { cursor: 'pointer' },
+                          label: { cursor: 'pointer' },
+                        },
+                      },
+                      Switch: {
+                        styles: {
+                          input: { cursor: 'pointer' },
+                          label: { cursor: 'pointer' },
+                        },
                       },
                     },
-                    Switch: {
-                      styles: {
-                        input: { cursor: 'pointer' },
-                        label: { cursor: 'pointer' },
-                      },
-                    },
-                  },
-                  primaryColor,
-                  primaryShade,
-                  colorScheme,
-                }}
-                withGlobalStyles
-                withNormalizeCSS
-              >
-                <ConfigProvider {...props.pageProps}>
-                  <Notifications limit={4} position="bottom-left" />
-                  <ModalsProvider modals={modals}>
-                    <Component {...pageProps} />
-                  </ModalsProvider>
-                </ConfigProvider>
-              </MantineProvider>
-            </ColorTheme.Provider>
-          )}
-        </ColorSchemeProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
+                    primaryColor,
+                    primaryShade,
+                    colorScheme,
+                  }}
+                  withGlobalStyles
+                  withNormalizeCSS
+                >
+                  <ConfigProvider {...props.pageProps}>
+                    <Notifications limit={4} position="bottom-left" />
+                    <ModalsProvider modals={modals}>
+                      <Component {...pageProps} />
+                    </ModalsProvider>
+                  </ConfigProvider>
+                </MantineProvider>
+              </ColorTheme.Provider>
+            )}
+          </ColorSchemeProvider>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </PersistQueryClientProvider>
       </SessionProvider>
     </>
   );
diff --git a/src/pages/manage/boards/index.tsx b/src/pages/manage/boards/index.tsx
index 6fbce4280..bdf7c054c 100644
--- a/src/pages/manage/boards/index.tsx
+++ b/src/pages/manage/boards/index.tsx
@@ -22,12 +22,6 @@ import { api } from '~/utils/api';
 
 const BoardsPage = () => {
   const { data } = api.config.all.useQuery();
-  const context = api.useContext();
-  const { mutateAsync: deletionMutationAsync } = api.config.delete.useMutation({
-    onSettled: () => {
-      void context.config.all.invalidate();
-    },
-  });
 
   const [deletingDashboards, { append, filter }] = useListState<string>([]);
 
diff --git a/src/pages/user/preferences.tsx b/src/pages/user/preferences.tsx
index 0a014f6f9..3205d290a 100644
--- a/src/pages/user/preferences.tsx
+++ b/src/pages/user/preferences.tsx
@@ -93,6 +93,7 @@ const SettingsComponent = ({
 
           <Select
             label={t('localization.firstDayOfWeek.label')}
+            //TODO: Make it use the configured value
             data={[
               { value: 'monday', label: 'Monday' },
               { value: 'sunday', label: 'Sunday' },
diff --git a/yarn.lock b/yarn.lock
index b166cdcc9..911eb3d93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1657,6 +1657,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^1.18.1":
+  version: 1.19.1
+  resolution: "@react-native-async-storage/async-storage@npm:1.19.1"
+  dependencies:
+    merge-options: ^3.0.4
+  peerDependencies:
+    react-native: ^0.0.0-0 || 0.60 - 0.72 || 1000.0.0
+  checksum: 7367210e16f788999ca8ff96bd04bbd345f44c186cec7c50903d55637f572c73b8a79f9c948a549329ad489c08d77dd49367971691ed54dbc3839285e0194431
+  languageName: node
+  linkType: hard
+
 "@react-spring/animated@npm:~9.7.3":
   version: 9.7.3
   resolution: "@react-spring/animated@npm:9.7.3"
@@ -1820,6 +1831,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-async-storage-persister@npm:^4.27.1":
+  version: 4.32.0
+  resolution: "@tanstack/query-async-storage-persister@npm:4.32.0"
+  dependencies:
+    "@tanstack/query-persist-client-core": 4.32.0
+  checksum: 21151138fed9620c5752e226d368cfe09cb928102d664f2c2e423ab7ba4c2f61ea9b56b91dfdf1fb50577da2c3c220c4c1e1f6198e5b3b440813fb66eca3ed74
+  languageName: node
+  linkType: hard
+
 "@tanstack/query-core@npm:4.32.0":
   version: 4.32.0
   resolution: "@tanstack/query-core@npm:4.32.0"
@@ -1836,6 +1856,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-sync-storage-persister@npm:^4.27.1":
+  version: 4.32.0
+  resolution: "@tanstack/query-sync-storage-persister@npm:4.32.0"
+  dependencies:
+    "@tanstack/query-persist-client-core": 4.32.0
+  checksum: 752f884c9525d58cb531fcfdf37938a4eb8aea8f613e5f45f572cf4c4f3c2f25fc9b2b4f3dedffa1cad704e32d570f0617c4d67e9c6fa750281f6c3caeb72430
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-query-devtools@npm:^4.24.4":
   version: 4.32.0
   resolution: "@tanstack/react-query-devtools@npm:4.32.0"
@@ -5816,8 +5845,11 @@ __metadata:
     "@nivo/core": ^0.83.0
     "@nivo/line": ^0.83.0
     "@prisma/client": ^5.0.0
+    "@react-native-async-storage/async-storage": ^1.18.1
     "@t3-oss/env-nextjs": ^0.6.0
     "@tabler/icons-react": ^2.18.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
@@ -6357,6 +6389,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"
@@ -6964,6 +7003,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
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"