Merge pull request #895 from ajnart/cache-invalidation

Various Improvements and bugfixes related to caching

.gitignore

@@ -51,4 +51,8 @@ data/configs
 !.yarn/versions
 
 #envfiles
-.env
+.env
+
+#Languages other than 'en'
+public/locales/*
+!public/locales/en

package.json

@@ -121,4 +121,4 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   }
-}
+}

public/locales/en/layout/modals/add-app.json

@@ -39,7 +39,7 @@
 	"appearance": {
 		"icon": {
 			"label": "App Icon",
-			"description": "",
+			"description": "Start typing to find an icon. You can also paste an image URL to use a custom icon.",
 			"autocomplete": {
 				"title": "No results found",
 				"text": "Try to use a more specific search term. If you can't find your desired icon, paste the image URL above for a custom icon"

src/components/Config/ConfigChanger.tsx

@@ -5,6 +5,8 @@ import { setCookie } from 'cookies-next';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { notifications } from '@mantine/notifications';
+import { IconCheck } from '@tabler/icons-react';
 import { useConfigContext } from '../../config/provider';
 
 export default function ConfigChanger() {
@@ -23,10 +25,33 @@ export default function ConfigChanger() {
       sameSite: 'strict',
     });
     setActiveConfig(value);
-    toggle();
 
-    router.push(`/${value}`);
-    setConfigName(value);
+    notifications.show({
+      id: 'load-data',
+      loading: true,
+      title: t('configSelect.loadingNew'),
+      radius: 'md',
+      withCloseButton: false,
+      message: t('configSelect.pleaseWait'),
+      autoClose: false,
+    });
+
+    setTimeout(() => {
+      notifications.update({
+        id: 'load-data',
+        color: 'teal',
+        radius: 'md',
+        withCloseButton: false,
+        title: t('configSelect.loadingNew'),
+        message: t('configSelect.pleaseWait'),
+        icon: <IconCheck size={25} />,
+        autoClose: 2000,
+      });
+    }, 3000);
+    setTimeout(() => {
+      router.push(`/${value}`);
+      setConfigName(value);
+    }, 500);
   };
 
   // If configlist is empty, return a loading indicator

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -63,7 +63,7 @@ export default function ConfigActions() {
       onConfirm: async () => {
         const response = await mutateAsync();
 
-        if (response.message) {
+        if (response.error) {
           showNotification({
             title: t('buttons.delete.notifications.deleteFailedDefaultConfig.title'),
             message: t('buttons.delete.notifications.deleteFailedDefaultConfig.message'),

src/hooks/icons/useGetDashboardIcons.tsx

@@ -12,5 +12,6 @@ export const useGetDashboardIcons = () =>
     refetchOnMount: false,
     // Cache for infinity, refetch every so often.
     cacheTime: Infinity,
+    staleTime: 1000 * 60 * 5, // 5 minutes
     refetchOnWindowFocus: false,
   });

src/tools/config/mutations/useCopyConfigMutation.tsx

@@ -4,6 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../config/provider';
 import { ConfigType } from '../../../types/config';
+import { queryClient } from '../../server/configurations/tanstack/queryClient.tool';
 
 export const useCopyConfigMutation = (configName: string) => {
   const { config } = useConfigContext();
@@ -14,13 +15,15 @@ export const useCopyConfigMutation = (configName: string) => {
     mutationFn: () => fetchCopy(configName, config),
     onSuccess() {
       showNotification({
-        title: t('modal.events.configCopied.title'),
+        title: t('modal.copy.events.configCopied.title'),
         icon: <IconCheck />,
         color: 'green',
         autoClose: 1500,
         radius: 'md',
-        message: t('modal.events.configCopied.message', { configName }),
+        message: t('modal.copy.events.configCopied.message', { configName }),
       });
+      // Invalidate a query to fetch new config
+      queryClient.invalidateQueries(['config/get-all']);
     },
     onError() {
       showNotification({

src/widgets/calendar/CalendarTile.tsx

@@ -10,6 +10,7 @@ import { IWidget } from '../widgets';
 import { CalendarDay } from './CalendarDay';
 import { getBgColorByDateAndTheme } from './bg-calculator';
 import { MediasType } from './type';
+import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 
 const definition = defineWidget({
   id: 'calendar',
@@ -52,10 +53,15 @@ function CalendarTile({ widget }: CalendarTileProps) {
   const { colorScheme } = useMantineTheme();
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
+  const isEditMode = useEditModeStore((x) => x.enabled);
 
   const { data: medias } = useQuery({
-    queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }],
+    queryKey: [
+      'calendar/medias',
+      { month: month.getMonth(), year: month.getFullYear(), v4: widget.properties.useSonarrv4 },
+    ],
     staleTime: 1000 * 60 * 60 * 5,
+    enabled: isEditMode === false,
     queryFn: async () =>
       (await (
         await fetch(