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 && (