♻️ Add compability for legacy config in config loader

src/pages/[slug].tsx

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { GetServerSidePropsContext } from 'next';
 import path from 'path';
-import LoadConfigComponent from '../components/Config/LoadConfig';
+import { LoadConfigComponent } from '../components/Config/LoadConfig';
 import { Dashboard } from '../components/Dashboard/Dashboard';
 import Layout from '../components/layout/Layout';
 import { useInitConfig } from '../config/init';

src/pages/api/configs/[slug].ts

@@ -1,6 +1,7 @@
-import { NextApiRequest, NextApiResponse } from 'next';
 import fs from 'fs';
 import path from 'path';
+import Consola from 'consola';
+import { NextApiRequest, NextApiResponse } from 'next';
 import { BackendConfigType, ConfigType } from '../../../types/config';
 import { getConfig } from '../../../tools/config/getConfig';
 
@@ -10,11 +11,14 @@ function Put(req: NextApiRequest, res: NextApiResponse) {
   // Get the body of the request
   const { body: config }: { body: ConfigType } = req;
   if (!slug || !config) {
+    Consola.warn('Rejected configuration update because either config or slug were undefined');
     return res.status(400).json({
       error: 'Wrong request',
     });
   }
 
+  Consola.info(`Saving updated configuration of '${slug}' config.`);
+
   const previousConfig = getConfig(slug);
 
   const newConfig: BackendConfigType = {
@@ -56,11 +60,11 @@ function Put(req: NextApiRequest, res: NextApiResponse) {
   };
 
   // Save the body in the /data/config folder with the slug as filename
-  fs.writeFileSync(
-    path.join('data/configs', `${slug}.json`),
-    JSON.stringify(newConfig, null, 2),
-    'utf8'
-  );
+  const targetPath = path.join('data/configs', `${slug}.json`);
+  fs.writeFileSync(targetPath, JSON.stringify(newConfig, null, 2), 'utf8');
+
+  Consola.info(`Config '${slug}' has been updated and flushed to '${targetPath}'.`);
+
   return res.status(200).json({
     message: 'Configuration saved with success',
   });

src/pages/index.tsx

@@ -2,7 +2,7 @@ import { getCookie, setCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
 
 import fs from 'fs';
-import LoadConfigComponent from '../components/Config/LoadConfig';
+import Consola from 'consola';
 import { Dashboard } from '../components/Dashboard/Dashboard';
 import Layout from '../components/layout/Layout';
 import { useInitConfig } from '../config/init';
@@ -10,6 +10,7 @@ import { getFrontendConfig } from '../tools/config/getFrontendConfig';
 import { getServerSideTranslations } from '../tools/getServerSideTranslations';
 import { dashboardNamespaces } from '../tools/translation-namespaces';
 import { DashboardServerSideProps } from '../types/dashboardPageType';
+import { LoadConfigComponent } from '../components/Config/LoadConfig';
 
 export async function getServerSideProps({
   req,
@@ -46,6 +47,9 @@ export async function getServerSideProps({
   }
 
   const translations = await getServerSideTranslations(req, res, dashboardNamespaces, locale);
+
+  Consola.info(`Decided to use configuration '${configName}'`);
+
   const config = getFrontendConfig(configName as string);
 
   return {

src/pages/migrate.tsx

@@ -1,45 +1,45 @@
-import React, { useEffect, useState } from 'react';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import fs from 'fs';
 import { GetServerSidePropsContext } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import React, { useEffect, useState } from 'react';
 
 import {
-  createStyles,
-  Title,
-  Text,
-  Container,
-  Group,
-  Stepper,
-  useMantineTheme,
-  Header,
+  Alert,
+  Anchor,
   AppShell,
-  useMantineColorScheme,
-  Switch,
+  Badge,
   Box,
   Button,
-  Alert,
-  Badge,
+  Container,
+  createStyles,
+  Group,
+  Header,
   List,
   Loader,
   Paper,
   Progress,
   Space,
   Stack,
+  Stepper,
+  Switch,
+  Text,
   ThemeIcon,
-  Anchor,
+  Title,
+  useMantineColorScheme,
+  useMantineTheme,
 } from '@mantine/core';
 import {
-  IconSun,
-  IconMoonStars,
-  IconCheck,
   IconAlertCircle,
-  IconCircleCheck,
   IconBrandDiscord,
+  IconCheck,
+  IconCircleCheck,
+  IconMoonStars,
+  IconSun,
 } from '@tabler/icons';
 import { motion } from 'framer-motion';
 import { Logo } from '../components/layout/Logo';
 import { usePrimaryGradient } from '../components/layout/useGradient';
-import { migrateConfig } from '../tools/config/migrateConfig';
+import { backendMigrateConfig } from '../tools/config/backendMigrateConfig';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -274,7 +274,7 @@ export async function getServerSideProps({ req, res, locale }: GetServerSideProp
     const configData = JSON.parse(fs.readFileSync(`./data/configs/${config}`, 'utf8'));
     if (!configData.schemaVersion) {
       // Migrate the config
-      migrateConfig(configData, config.replace('.json', ''));
+      backendMigrateConfig(configData, config.replace('.json', ''));
     }
     return config;
   });