diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index 2f0e00d..45ba769 100644 --- a/client/src/components/Header/Header.tsx +++ b/client/src/components/Header/Header.tsx @@ -9,6 +9,7 @@ import { Typography, } from '@mui/material'; import IconButton from '@mui/material/IconButton'; +import { useOnMount } from '@mui/x-data-grid'; import { useCallback, useEffect, useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { fetchDataFromBackend } from '../../apiUtil'; @@ -38,7 +39,6 @@ export default function Header({ const { progress, setProgress, showAlert } = useLoadingContext(); const [showSearchServer, setShowSearchServer] = useState(false); const [filtersApplied, setFiltersApplied] = useState(false); - const [initialFetch, setInitialFetch] = useState(true); const toggleShowSearchServer = () => { setShowSearchServer((prev) => !prev); }; @@ -68,16 +68,15 @@ export default function Header({ }, 500); }, [showAlert, setServers, setProgress]); + useOnMount(() => { + fetchServerData(); + }); + useEffect(() => { - // TODO: Check if there's a better way to do this than "initialFetch" state, see also SearchServers - if (initialFetch) { - fetchServerData(); - setInitialFetch(false); - } setFiltersApplied( JSON.stringify(searchState) !== JSON.stringify(SearchStateDefaults) ); - }, [initialFetch, fetchServerData, searchState]); + }, [searchState]); return ( diff --git a/client/src/components/Header/SearchServers.tsx b/client/src/components/Header/SearchServers.tsx index 8eb2684..2d80166 100644 --- a/client/src/components/Header/SearchServers.tsx +++ b/client/src/components/Header/SearchServers.tsx @@ -12,6 +12,7 @@ import { Tooltip, Typography, } from '@mui/material'; +import { useOnMount } from '@mui/x-data-grid'; import { useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { SearchState, SearchStateDefaults } from '../../data/SearchState'; @@ -57,33 +58,25 @@ export default function SearchServers({ const location = useLocation(); const [initialPath] = useState(location.pathname); const [contentHeight, setContentHeight] = useState(0); - const [initialLoad, setInitialLoad] = useState(true); + + useOnMount(() => { + if (initialPath === '/') { + const params = parseSearchParams(location.search); + if (JSON.stringify(params) !== JSON.stringify(SearchStateDefaults)) { + setSearchState(params); + } + } + }); useEffect(() => { // Populate search state with URL params only if loading the home page // Home page manages updating URL params - // TODO: Check if there's a better way to do this than "initialLoad" state, see also Header - if (initialLoad) { - if (initialPath === '/') { - const params = parseSearchParams(location.search); - if (JSON.stringify(params) !== JSON.stringify(SearchStateDefaults)) { - setSearchState(params); - } - } - setInitialLoad(false); - } if (showSearchServer && containerRef.current) { setContentHeight(containerRef.current.scrollHeight); } else { setContentHeight(0); } - }, [ - showSearchServer, - location.search, - setSearchState, - initialPath, - initialLoad, - ]); + }, [showSearchServer]); const handleChange = ( name: string, diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx index a0cfcf9..1bd8f5b 100644 --- a/client/src/pages/About.tsx +++ b/client/src/pages/About.tsx @@ -54,17 +54,17 @@ MAIN.ENABLE_TVR`; variant="body1" color={(theme) => alpha(theme.palette.text.primary, 0.87)} > - Ixion is a catalog of Final Fantasy XI private servers running the{' '} + Ixion is a directory of public{' '} LandSandBoat {' '} - software (or serving their API). Servers are updated every 10 - minutes and are removed after a variable amount of - disconnectivity. All information is gathered directly from the - listed servers. + (LSB) servers. Servers are updated every 10 minutes and are + unlisted after a variable amount of disconnectivity proportional + to their time listed (maximum 24 hours). All information is + gathered directly from the listed servers. @@ -158,7 +158,7 @@ MAIN.ENABLE_TVR`; The world server needs to be restarted after any changes to any of the settings. If you set DO_NOT_TRACK to true, - your server will be removed on the next update. + your server will be unlisted on the next update. @@ -170,30 +170,12 @@ MAIN.ENABLE_TVR`; variant="body1" color={(theme) => alpha(theme.palette.text.primary, 0.87)} > - Anything that differs from the default LSB settings will be - displayed in the "Settings Summary" section for a - server. The following settings are always included as part of - the UI: + Any LSB settings that differ from the defaults will be displayed + in the "Settings Summary" section. The following + settings are always included as part of the UI: - - - What if my server isn't running LSB? - - alpha(theme.palette.text.primary, 0.87)} - > - If you're not running LSB, you could fake the API response. - You'll want to look at the LSB settings and serve whatever - relevant changes you've made using the LSB equivalent, the - above listed settings at minimum. Settings should be served at{' '} - /api/settings and total active sessions should be served - at /api/sessions. - - diff --git a/client/src/pages/ServerDetails.tsx b/client/src/pages/ServerDetails.tsx index 8e9c0be..dbe40eb 100644 --- a/client/src/pages/ServerDetails.tsx +++ b/client/src/pages/ServerDetails.tsx @@ -1,5 +1,6 @@ import { Box } from '@mui/material'; -import { useEffect, useState } from 'react'; +import { useOnMount } from '@mui/x-data-grid'; +import { useCallback, useState } from 'react'; import { useParams } from 'react-router-dom'; import { fetchDataFromBackend, fetchDemo } from '../apiUtil'; import ErrorCard from '../components/ErrorCard'; @@ -9,41 +10,47 @@ import { useLoadingContext } from '../context/LoadingContext'; import { ServerData } from '../data/ServerData'; export default function ServerDetails() { - const { showAlert } = useLoadingContext(); const { url } = useParams(); - const [server, setServer] = useState(); - const [error, setError] = useState(''); + const [server, setServer] = useState(); + const { setProgress, showAlert } = useLoadingContext(); - useEffect(() => { - let data: ServerData; - const fetchServerData = async () => { - try { - if (url === 'demo') { - data = await fetchDemo(); - } else { - data = await fetchDataFromBackend(`server/?url=${url}`); - } - } catch (err) { - if (err instanceof Error) { - showAlert({ - message: err.message, - severity: 'error', - }); - } else { - setError('An unknown error occurred.'); - } + const fetchServerData = useCallback(async () => { + let data: ServerData | null = null; + try { + setProgress(25); + if (url === 'demo') { + data = await fetchDemo(); + } else { + data = await fetchDataFromBackend(`server/?url=${url}`); } + } catch (err) { + if (err instanceof Error) { + showAlert({ + message: err.message, + severity: 'error', + }); + } else { + showAlert({ + message: 'An unknown error occurred.', + severity: 'error', + }); + } + } + setServer(data); + setProgress(100); + setTimeout(() => { + setProgress(0); + }, 500); + }, [url, showAlert, setServer, setProgress]); - setServer(data); - }; - + useOnMount(() => { fetchServerData(); - }, [url, setServer, showAlert, setError]); + }); return ( - {error || !server ? ( - + {!server ? ( + ) : ( {server.settings && (