From 4c757fea77a551868f73b0063148def4a6a1de71 Mon Sep 17 00:00:00 2001 From: viown <48097677+viown@users.noreply.github.com> Date: Tue, 17 Dec 2024 21:35:45 +0300 Subject: [PATCH] Move data loading to separate hooks --- .../features/activity/api/useLogEntries.ts | 1 - .../features/logs/api/useLogEntries.ts | 25 ++++++ .../features/logs/api/useLogOptions.ts | 25 ++++++ src/apps/dashboard/routes/logs/index.tsx | 85 +++++++------------ 4 files changed, 81 insertions(+), 55 deletions(-) diff --git a/src/apps/dashboard/features/activity/api/useLogEntries.ts b/src/apps/dashboard/features/activity/api/useLogEntries.ts index b0f1be5233..443fd3a725 100644 --- a/src/apps/dashboard/features/activity/api/useLogEntries.ts +++ b/src/apps/dashboard/features/activity/api/useLogEntries.ts @@ -3,7 +3,6 @@ import type { AxiosRequestConfig } from 'axios'; import type { Api } from '@jellyfin/sdk'; import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api'; import { useQuery } from '@tanstack/react-query'; - import { useApi } from 'hooks/useApi'; const fetchLogEntries = async ( diff --git a/src/apps/dashboard/features/logs/api/useLogEntries.ts b/src/apps/dashboard/features/logs/api/useLogEntries.ts index e69de29bb2..2395a10e66 100644 --- a/src/apps/dashboard/features/logs/api/useLogEntries.ts +++ b/src/apps/dashboard/features/logs/api/useLogEntries.ts @@ -0,0 +1,25 @@ +import { Api } from '@jellyfin/sdk'; +import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api'; +import { useQuery } from '@tanstack/react-query'; +import { useApi } from 'hooks/useApi'; + +const fetchLogEntries = async (api?: Api) => { + if (!api) { + console.error('[useLogEntries] No API instance available'); + return; + } + + const response = await getSystemApi(api).getServerLogs(); + + return response.data; +}; + +export const useLogEntries = () => { + const { api } = useApi(); + + return useQuery({ + queryKey: [ 'LogEntries' ], + queryFn: () => fetchLogEntries(api), + enabled: !!api + }); +}; diff --git a/src/apps/dashboard/features/logs/api/useLogOptions.ts b/src/apps/dashboard/features/logs/api/useLogOptions.ts index e69de29bb2..3cd9b68594 100644 --- a/src/apps/dashboard/features/logs/api/useLogOptions.ts +++ b/src/apps/dashboard/features/logs/api/useLogOptions.ts @@ -0,0 +1,25 @@ +import { Api } from '@jellyfin/sdk'; +import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api'; +import { useQuery } from '@tanstack/react-query'; +import { useApi } from 'hooks/useApi'; + +export const fetchLogOptions = async (api?: Api) => { + if (!api) { + console.error('[useLogOptions] No API instance available'); + return; + } + + const response = await getConfigurationApi(api).getConfiguration(); + + return response.data; +}; + +export const useLogOptions = () => { + const { api } = useApi(); + + return useQuery({ + queryKey: ['LogOptions'], + queryFn: () => fetchLogOptions(api), + enabled: !!api + }); +}; diff --git a/src/apps/dashboard/routes/logs/index.tsx b/src/apps/dashboard/routes/logs/index.tsx index 8699a31426..2337c5e83f 100644 --- a/src/apps/dashboard/routes/logs/index.tsx +++ b/src/apps/dashboard/routes/logs/index.tsx @@ -1,15 +1,15 @@ 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'; import LogItem from 'components/dashboard/logs/LogItem'; import Loading from 'components/loading/LoadingComponent'; 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 { type ActionFunctionArgs, type LoaderFunctionArgs, Form, useActionData } from 'react-router-dom'; +import { type ActionFunctionArgs, Form, useActionData } from 'react-router-dom'; import ServerConnections from 'components/ServerConnections'; +import { useLogEntries } from 'apps/dashboard/features/logs/api/useLogEntries'; +import { useLogOptions } from 'apps/dashboard/features/logs/api/useLogOptions'; +import type { ServerConfiguration } from '@jellyfin/sdk/lib/generated-client/models/server-configuration'; interface ActionData { isSaved: boolean; @@ -37,64 +37,41 @@ export const action = async ({ request }: ActionFunctionArgs) => { }; }; -export const Logs = () => { +const Logs = () => { const actionData = useActionData() as ActionData | undefined; - const { api } = useApi(); - const [ logs, setLogs ] = useState([]); - const [ logsLoading, setLogsLoading ] = useState(true); - const [ configLoading, setConfigLoading ] = useState(true); - const [ logWarningMessageChecked, setLogWarningMessageChecked ] = useState(false); - const [ slowResponseTime, setSlowResponseTime ] = useState(''); const [ isSubmitting, setIsSubmitting ] = useState(false); + const { isPending: isLogEntriesPending, data: logs } = useLogEntries(); + const { isPending: isLogOptionsPending, data: defaultLogOptions } = useLogOptions(); + const [ loading, setLoading ] = useState(true); + const [ logOptions, setLogOptions ] = useState( {} ); + + useEffect(() => { + if (!isLogOptionsPending && defaultLogOptions) { + setLogOptions(defaultLogOptions); + setLoading(false); + } + }, [isLogOptionsPending, defaultLogOptions]); + const setLogWarningMessage = useCallback((_: ChangeEvent, checked: boolean) => { - setLogWarningMessageChecked(checked); - }, []); + setLogOptions({ + ...logOptions, + EnableSlowResponseWarning: checked + }); + }, [logOptions]); const onResponseTimeChange = useCallback((event: ChangeEvent) => { - setSlowResponseTime(event.target.value); - }, []); - - const loadLogs = useCallback(() => { - if (!api) return; - - return getSystemApi(api) - .getServerLogs() - .then(({ data }) => { - setLogs(data); - }); - }, [api]); + setLogOptions({ + ...logOptions, + SlowResponseThresholdMs: parseInt(event.target.value, 10) + }); + }, [logOptions]); const onSubmit = useCallback(() => { setIsSubmitting(true); }, []); - useEffect(() => { - if (!api) return; - - loadLogs()?.then(() => { - setLogsLoading(false); - }).catch(err => { - console.error('[logs] An error occurred while fetching logs', err); - }); - - getConfigurationApi(api) - .getConfiguration() - .then(({ data: config }) => { - if (config.EnableSlowResponseWarning) { - setLogWarningMessageChecked(config.EnableSlowResponseWarning); - } - if (config.SlowResponseThresholdMs != null) { - setSlowResponseTime(String(config.SlowResponseThresholdMs)); - } - setConfigLoading(false); - }) - .catch(err => { - console.error('[logs] An error occurred while fetching system config', err); - }); - }, [logsLoading, configLoading, api, loadLogs]); - - if (logsLoading || configLoading) { + if (isLogEntriesPending || isLogOptionsPending || loading) { return ; } @@ -120,7 +97,7 @@ export const Logs = () => { @@ -133,7 +110,7 @@ export const Logs = () => { type='number' name={'SlowResponseTime'} label={globalize.translate('LabelSlowResponseTime')} - value={slowResponseTime} + value={logOptions?.SlowResponseThresholdMs} onChange={onResponseTimeChange} /> @@ -147,7 +124,7 @@ export const Logs = () => {
- {logs.map(log => { + {logs?.map(log => { return