🏗️ Migrate config save to tRPC

src/components/Config/LoadConfig.tsx

@@ -4,18 +4,20 @@ import { showNotification } from '@mantine/notifications';
 import { IconCheck as Check, IconPhoto, IconUpload, IconX, IconX as X } from '@tabler/icons-react';
 import { setCookie } from 'cookies-next';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import { useConfigStore } from '../../config/store';
 import { ConfigType } from '../../types/config';
+import { api } from '~/utils/api';
 
 export const LoadConfigComponent = () => {
-  const { addConfig } = useConfigStore();
   const theme = useMantineTheme();
   const { t } = useTranslation('settings/general/config-changer');
+  const { mutateAsync: loadAsync } = useLoadConfig();
 
   return (
     <Dropzone.FullScreen
       onDrop={async (files) => {
-        const fileName = files[0].name.replaceAll('.json', '');
+        const configName = files[0].name.replaceAll('.json', '');
         const fileText = await files[0].text();
 
         try {
@@ -32,26 +34,7 @@ export const LoadConfigComponent = () => {
         }
 
         const newConfig: ConfigType = JSON.parse(fileText);
-
-        await addConfig(fileName, newConfig, true);
-        showNotification({
-          autoClose: 5000,
-          radius: 'md',
-          title: (
-            <Text>
-              {t('dropzone.notifications.loadedSuccessfully.title', {
-                configName: fileName,
-              })}
-            </Text>
-          ),
-          color: 'green',
-          icon: <Check />,
-          message: undefined,
-        });
-        setCookie('config-name', fileName, {
-          maxAge: 60 * 60 * 24 * 30,
-          sameSite: 'strict',
-        });
+        await loadAsync({ name: configName, config: newConfig });
       }}
       accept={['application/json']}
     >
@@ -89,3 +72,34 @@ export const LoadConfigComponent = () => {
     </Dropzone.FullScreen>
   );
 };
+
+const useLoadConfig = () => {
+  const { t } = useTranslation('settings/general/config-changer');
+  const { addConfig } = useConfigStore();
+  const router = useRouter();
+  return api.config.save.useMutation({
+    async onSuccess(_data, variables) {
+      await addConfig(variables.name, variables.config);
+
+      showNotification({
+        autoClose: 5000,
+        radius: 'md',
+        title: (
+          <Text>
+            {t('dropzone.notifications.loadedSuccessfully.title', {
+              configName: variables.name,
+            })}
+          </Text>
+        ),
+        color: 'green',
+        icon: <Check />,
+        message: undefined,
+      });
+      setCookie('config-name', variables.name, {
+        maxAge: 60 * 60 * 24 * 30,
+        sameSite: 'strict',
+      });
+      router.push(`/${variables.name}`);
+    },
+  });
+};

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

@@ -1,8 +1,11 @@
 import { Button, Group, Modal, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { showNotification } from '@mantine/notifications';
 import { useConfigStore } from '../../../../config/store';
-import { useCopyConfigMutation } from '../../../../tools/config/mutations/useCopyConfigMutation';
+import { useConfigContext } from '~/config/provider';
+import { api } from '~/utils/api';
 
 interface CreateConfigCopyModalProps {
   opened: boolean;
@@ -16,6 +19,7 @@ export const CreateConfigCopyModal = ({
   initialConfigName,
 }: CreateConfigCopyModalProps) => {
   const { configs } = useConfigStore();
+  const { config } = useConfigContext();
   const { t } = useTranslation(['settings/general/config-changer']);
 
   const form = useForm({
@@ -40,7 +44,7 @@ export const CreateConfigCopyModal = ({
     validateInputOnBlur: true,
   });
 
-  const { mutateAsync } = useCopyConfigMutation(form.values.configName);
+  const { mutateAsync } = useCopyConfigMutation();
 
   const handleClose = () => {
     form.setFieldValue('configName', initialConfigName);
@@ -50,7 +54,17 @@ export const CreateConfigCopyModal = ({
   const handleSubmit = async (values: typeof form.values) => {
     if (!form.isValid) return;
 
-    await mutateAsync();
+    if (!config) {
+      throw new Error('config is not defiend');
+    }
+
+    const copiedConfig = config;
+    copiedConfig.configProperties.name = form.values.configName;
+
+    await mutateAsync({
+      name: form.values.configName,
+      config: copiedConfig,
+    });
     closeModal();
   };
 
@@ -76,3 +90,33 @@ export const CreateConfigCopyModal = ({
     </Modal>
   );
 };
+
+const useCopyConfigMutation = () => {
+  const { t } = useTranslation(['settings/general/config-changer']);
+  const utils = api.useContext();
+
+  return api.config.save.useMutation({
+    onSuccess(_data, variables) {
+      showNotification({
+        title: t('modal.copy.events.configCopied.title'),
+        icon: <IconCheck />,
+        color: 'green',
+        autoClose: 1500,
+        radius: 'md',
+        message: t('modal.copy.events.configCopied.message', { configName: variables.name }),
+      });
+      // Invalidate a query to fetch new config
+      utils.config.all.invalidate();
+    },
+    onError(_error, variables) {
+      showNotification({
+        title: t('modal.events.configNotCopied.title'),
+        icon: <IconX />,
+        color: 'red',
+        autoClose: 1500,
+        radius: 'md',
+        message: t('modal.events.configNotCopied.message', { configName: variables.name }),
+      });
+    },
+  });
+};

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -2,13 +2,13 @@ import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
 import { useHotkeys, useWindowEvent } from '@mantine/hooks';
 import { hideNotification, showNotification } from '@mantine/notifications';
 import { IconEditCircle, IconEditCircleOff } from '@tabler/icons-react';
-import axios from 'axios';
 import Consola from 'consola';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../../config/provider';
 import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
 
+import { api } from '~/utils/api';
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
 import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
 import { useCardStyles } from '../../../useCardStyles';
@@ -28,6 +28,7 @@ export const ToggleEditModeAction = () => {
   const smallerThanSm = useScreenSmallerThan('sm');
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);
+  const { mutateAsync: saveConfig } = api.config.save.useMutation();
 
   useHotkeys([['mod+E', toggleEditMode]]);
 
@@ -41,11 +42,12 @@ export const ToggleEditModeAction = () => {
     return undefined;
   });
 
-  const toggleButtonClicked = () => {
+  const toggleButtonClicked = async () => {
     toggleEditMode();
-    if (enabled || config === undefined || config?.schemaVersion === undefined) {
+    if (config === undefined || config?.schemaVersion === undefined) return;
+    if (enabled) {
       const configName = getCookie('config-name')?.toString() ?? 'default';
-      axios.put(`/api/configs/${configName}`, { ...config });
+      await saveConfig({ name: configName, config });
       Consola.log('Saved config to server', configName);
       hideNotification('toggle-edit-mode');
     } else if (!enabled) {