Move submission to action

src/apps/dashboard/routes/logs/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FormEvent, useCallback, useEffect, useState } from 'react';
+import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
 import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
@@ -8,16 +8,44 @@ import Page from 'components/Page';
 import { useApi } from 'hooks/useApi';
 import globalize from 'lib/globalize';
 import { Alert, Box, Button, FormControlLabel, Stack, Switch, TextField, Typography } from '@mui/material';
-import { Form } from 'react-router-dom';
+import { type ActionFunctionArgs, type LoaderFunctionArgs, Form, useActionData } from 'react-router-dom';
+import ServerConnections from 'components/ServerConnections';
 
-const Logs = () => {
+interface ActionData {
+    isSaved: boolean;
+}
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+    const api = ServerConnections.getCurrentApi();
+    if (!api) throw new Error('No Api instance available');
+
+    const formData = await request.formData();
+    const { data: config } = await getConfigurationApi(api).getConfiguration();
+
+    config.EnableSlowResponseWarning = formData.get('EnableWarningMessage') === 'on';
+
+    const responseTime = formData.get('SlowResponseTime');
+    if (responseTime) {
+        config.SlowResponseThresholdMs = parseInt(responseTime.toString(), 10);
+    }
+
+    await getConfigurationApi(api)
+        .updateConfiguration({ serverConfiguration: config });
+
+    return {
+        isSaved: true
+    };
+};
+
+export const Logs = () => {
+    const actionData = useActionData() as ActionData | undefined;
     const { api } = useApi();
     const [ logs, setLogs ] = useState<LogFile[]>([]);
     const [ logsLoading, setLogsLoading ] = useState<boolean>(true);
     const [ configLoading, setConfigLoading ] = useState<boolean>(true);
     const [ logWarningMessageChecked, setLogWarningMessageChecked ] = useState<boolean>(false);
     const [ slowResponseTime, setSlowResponseTime ] = useState<string>('');
-    const [ submitted, setSubmitted ] = useState<boolean>(false);
+    const [ isSubmitting, setIsSubmitting ] = useState(false);
 
     const setLogWarningMessage = useCallback((_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
         setLogWarningMessageChecked(checked);
@@ -37,26 +65,9 @@ const Logs = () => {
             });
     }, [api]);
 
-    const onSubmit = useCallback((e: FormEvent<HTMLFormElement>) => {
+    const onSubmit = useCallback(() => {
-        e.preventDefault();
+        setIsSubmitting(true);
-        if (!api) return;
+    }, []);
-
-        getConfigurationApi(api)
-            .getConfiguration()
-            .then(({ data: config }) => {
-                config.EnableSlowResponseWarning = logWarningMessageChecked;
-                config.SlowResponseThresholdMs = parseInt(slowResponseTime, 10);
-                getConfigurationApi(api)
-                    .updateConfiguration({ serverConfiguration: config })
-                    .then(() => setSubmitted(true))
-                    .catch(err => {
-                        console.error('[logs] failed to update configuration data', err);
-                    });
-            })
-            .catch(err => {
-                console.error('[logs] failed to get configuration data', err);
-            });
-    }, [api, logWarningMessageChecked, slowResponseTime]);
 
     useEffect(() => {
         if (!api) return;
@@ -94,13 +105,13 @@ const Logs = () => {
             className='mainAnimatedPage type-interior'
         >
             <Box className='content-primary'>
-                <Form className='logsForm' method='POST' onSubmit={onSubmit}>
+                <Form method='POST' onSubmit={onSubmit}>
                     <Stack spacing={3}>
                         <Typography variant='h1'>
                             {globalize.translate('TabLogs')}
                         </Typography>
 
-                        {submitted && (
+                        {isSubmitting && actionData?.isSaved && (
                             <Alert severity='success'>
                                 {globalize.translate('SettingsSaved')}
                             </Alert>
@@ -111,6 +122,7 @@ const Logs = () => {
                                 <Switch
                                     checked={logWarningMessageChecked}
                                     onChange={setLogWarningMessage}
+                                    name={'EnableWarningMessage'}
                                 />
                             }
                             label={globalize.translate('LabelSlowResponseEnabled')}
@@ -119,6 +131,7 @@ const Logs = () => {
                         <TextField
                             fullWidth
                             type='number'
+                            name={'SlowResponseTime'}
                             label={globalize.translate('LabelSlowResponseTime')}
                             value={slowResponseTime}
                             onChange={onResponseTimeChange}