Use mui components

src/apps/dashboard/routes/logs.tsx

@@ -1,23 +1,31 @@
-import React, { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
+import React, { ChangeEvent, FormEvent, 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';
 import LogItem from 'components/dashboard/logs/LogItem';
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
-import ButtonElement from 'elements/ButtonElement';
-import CheckBoxElement from 'elements/CheckBoxElement';
-import InputElement from 'elements/InputElement';
-import SectionTitleContainer from 'elements/SectionTitleContainer';
 import { useApi } from 'hooks/useApi';
 import globalize from 'lib/globalize';
-import toast from 'components/toast/toast';
+import { Alert, Box, Button, FormControlLabel, Stack, Switch, TextField, Typography } from '@mui/material';
+import { Form } from 'react-router-dom';
 
 const Logs = () => {
     const { api } = useApi();
     const [ logs, setLogs ] = useState<LogFile[]>([]);
-    const [ loading, setLoading ] = useState(false);
+    const [ logsLoading, setLogsLoading ] = useState<boolean>(true);
-    const element = useRef<HTMLDivElement>(null);
+    const [ configLoading, setConfigLoading ] = useState<boolean>(true);
+    const [ logWarningMessageChecked, setLogWarningMessageChecked ] = useState<boolean>(false);
+    const [ slowResponseTime, setSlowResponseTime ] = useState<string>('');
+    const [ submitted, setSubmitted ] = useState<boolean>(false);
+
+    const setLogWarningMessage = useCallback((_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+        setLogWarningMessageChecked(checked);
+    }, []);
+
+    const onResponseTimeChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
+        setSlowResponseTime(event.target.value);
+    }, []);
 
     const loadLogs = useCallback(() => {
         if (!api) return;
@@ -33,18 +41,14 @@ const Logs = () => {
         e.preventDefault();
         if (!api) return;
 
-        const page = element.current;
-
-        if (!page) return;
-
         getConfigurationApi(api)
             .getConfiguration()
             .then(({ data: config }) => {
-                config.EnableSlowResponseWarning = (page.querySelector('.chkSlowResponseWarning') as HTMLInputElement).checked;
+                config.EnableSlowResponseWarning = logWarningMessageChecked;
-                config.SlowResponseThresholdMs = parseInt((page.querySelector('#txtSlowResponseWarning') as HTMLInputElement).value, 10);
+                config.SlowResponseThresholdMs = parseInt(slowResponseTime, 10);
                 getConfigurationApi(api)
                     .updateConfiguration({ serverConfiguration: config })
-                    .then(() => toast(globalize.translate('SettingsSaved')))
+                    .then(() => setSubmitted(true))
                     .catch(err => {
                         console.error('[logs] failed to update configuration data', err);
                     });
@@ -52,37 +56,34 @@ const Logs = () => {
             .catch(err => {
                 console.error('[logs] failed to get configuration data', err);
             });
-    }, [api]);
+    }, [api, logWarningMessageChecked, slowResponseTime]);
 
     useEffect(() => {
         if (!api) return;
 
         loadLogs()?.then(() => {
-            setLoading(false);
+            setLogsLoading(false);
         }).catch(err => {
             console.error('[logs] An error occurred while fetching logs', err);
         });
 
-        const page = element.current;
-
-        if (!page || loading) return;
-
         getConfigurationApi(api)
             .getConfiguration()
             .then(({ data: config }) => {
                 if (config.EnableSlowResponseWarning) {
-                    (page.querySelector('.chkSlowResponseWarning') as HTMLInputElement).checked = config.EnableSlowResponseWarning;
+                    setLogWarningMessageChecked(config.EnableSlowResponseWarning);
                 }
                 if (config.SlowResponseThresholdMs != null) {
-                    (page.querySelector('#txtSlowResponseWarning') as HTMLInputElement).value = String(config.SlowResponseThresholdMs);
+                    setSlowResponseTime(String(config.SlowResponseThresholdMs));
                 }
+                setConfigLoading(false);
             })
             .catch(err => {
                 console.error('[logs] An error occurred while fetching system config', err);
             });
-    }, [loading, api, loadLogs]);
+    }, [logsLoading, configLoading, api, loadLogs]);
 
-    if (loading) {
+    if (logsLoading || configLoading) {
         return <Loading />;
     }
 
@@ -92,38 +93,45 @@ const Logs = () => {
             title={globalize.translate('TabLogs')}
             className='mainAnimatedPage type-interior'
         >
-            <div ref={element} className='content-primary'>
+            <Box className='content-primary'>
-                <form className='logsForm' onSubmit={onSubmit}>
+                <Form className='logsForm' method='POST' onSubmit={onSubmit}>
-                    <div className='verticalSection'>
+                    <Stack spacing={3}>
-                        <SectionTitleContainer
+                        <Typography variant='h1'>
-                            title={globalize.translate('TabLogs')}
+                            {globalize.translate('TabLogs')}
-                        />
+                        </Typography>
-                    </div>
 
-                    <div className='verticalSection'>
+                        {submitted && (
-                        <div className='checkboxContainer checkboxContainer-withDescription'>
+                            <Alert severity='success'>
-                            <CheckBoxElement
+                                {globalize.translate('SettingsSaved')}
-                                className='chkSlowResponseWarning'
+                            </Alert>
-                                title='LabelSlowResponseEnabled'
+                        )}
+
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={logWarningMessageChecked}
+                                    onChange={setLogWarningMessage}
                                 />
-                        </div>
+                            }
-                        <div className='inputContainer'>
+                            label={globalize.translate('LabelSlowResponseEnabled')}
-                            <InputElement
+                        />
+
+                        <TextField
+                            fullWidth
                             type='number'
-                                id='txtSlowResponseWarning'
+                            label={globalize.translate('LabelSlowResponseTime')}
-                                label='LabelSlowResponseTime'
+                            value={slowResponseTime}
+                            onChange={onResponseTimeChange}
                         />
-                        </div>
+
-                        <br />
+                        <Button
-                        <div>
-                            <ButtonElement
                             type='submit'
-                                className='raised button-submit block'
+                            size='large'
-                                title='Save'
+                        >
-                            />
+                            {globalize.translate('Save')}
-                        </div>
+                        </Button>
-                    </div>
+                    </Stack>
-                </form>
+                </Form>
                 <div className='serverLogs readOnlyContent'>
                     <div className='paperList'>
                         {logs.map(log => {
@@ -134,7 +142,7 @@ const Logs = () => {
                         })}
                     </div>
                 </div>
-            </div>
+            </Box>
         </Page>
     );
 };