jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🔥 Remove caching and async persistance storage

Browse Source
This commit is contained in:
Manuel
2023-07-30 22:30:49 +02:00
parent f61d0f5f8d
commit 0575cd475c
6 changed files with 37 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Settings/Common/CacheButtons.tsx
View File

@@ -1,63 +0,0 @@
import { Button, Group, MultiSelect, Stack, Title } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { IconTrash } from '@tabler/icons-react';
import { useState } from 'react';
import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
const data = [
{ value: 'ping', label: 'Ping queries' },
{ value: 'repository-icons', label: 'Remote/Local icons' },
{ value: 'calendar/medias', label: 'Medais from the Calendar' },
{ value: 'weather', label: 'Weather data' },
];
export function CacheButtons() {
const [value, setValue] = useState<string[]>([]);
return (
<Stack spacing="xs">
<Title order={4}>Cache cleaning</Title>
<MultiSelect
value={value}
searchable
onChange={setValue}
data={data}
label="Select the cache(s) to clear"
/>
<Group>
<Button
color="red"
variant="light"
onClick={() =>
queryClient.invalidateQueries(value).then(() =>
notifications.show({
title: 'Cache cleared',
message: `Cache for ${value.join(', ')} has been cleared`,
color: 'teal',
icon: <IconTrash />,
autoClose: 5000,
})
)
}
>
Clear selected queries
</Button>
<Button
onClick={() =>
queryClient.invalidateQueries().then(() =>
notifications.show({
title: 'Cache cleared',
message: 'All cache has been cleared',
color: 'teal',
icon: <IconTrash />,
autoClose: 5000,
})
)
}
>
Clear all cache
</Button>
</Group>
</Stack>
);
}

1
src/components/Settings/Common/CommonSettings.tsx
View File

@@ -26,7 +26,6 @@ export default function CommonSettings() {
<Space />
<LanguageSelect />
<ConfigChanger />
<CacheButtons />
<ConfigActions />
</Stack>
</ScrollArea>

85
src/pages/_app.tsx
View File

@@ -1,10 +1,7 @@
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';
@@ -29,7 +26,6 @@ import { ConfigProvider } from '../config/provider';
import '../styles/global.scss';
import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
import { ColorTheme } from '../tools/color';
import { queryClient } from '../tools/server/configurations/tanstack/queryClient.tool';
import {
ServerSidePackageAttributesType,
getServiceSidePackageAttributes,
@@ -73,59 +69,50 @@ function App(
setInitialPackageAttributes(props.pageProps.packageAttributes);
}, []);
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
});
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head>
<SessionProvider session={pageProps.session}>
<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' },
},
<ColorSchemeProvider {...pageProps}>
{(colorScheme) => (
<ColorTheme.Provider value={colorTheme}>
<MantineProvider
theme={{
...theme,
components: {
Checkbox: {
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} />
</PersistQueryClientProvider>
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} />
</SessionProvider>
</>
);

9
src/tools/server/configurations/tanstack/queryClient.tool.ts
View File

@@ -1,10 +1,3 @@
import { QueryClient } from '@tanstack/react-query';
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 mins
cacheTime: 10 * 60 * 1000, // 10 mins
},
},
});
export const queryClient = new QueryClient();