import Head from 'next/head';
import { FC, useState } from 'react';
import { Box, Divider } from '@mui/material';
import API_BASE_URL from '../lib/consts/API_BASE_URL';
import { DIVIDER } from '../lib/consts/DEFAULT_THEME';
import { Preview } from '../components/Display';
import Header from '../components/Header';
import OutlinedInput from '../components/OutlinedInput';
import { Panel, PanelHeader } from '../components/Panels';
import periodicFetch from '../lib/fetchers/periodicFetch';
import Spinner from '../components/Spinner';
import fetchJSON from '../lib/fetchers/fetchJSON';
type ServerListItem = ServerOverviewMetadata & {
isScreenshotStale?: boolean;
screenshot: string;
};
const createServerPreviewContainer = (servers: ServerListItem[]) => (
*': {
width: { xs: '20em', md: '30em' },
},
'& > :not(:last-child)': {
marginRight: '2em',
},
}}
>
{servers.map(({ screenshot, serverName, serverUUID }) => (
))}
);
const filterServers = (allServers: ServerListItem[], searchTerm: string) =>
searchTerm === ''
? {
exclude: allServers,
include: [],
}
: allServers.reduce<{
exclude: ServerListItem[];
include: ServerListItem[];
}>(
(reduceContainer, server) => {
const { serverName } = server;
if (serverName.includes(searchTerm)) {
reduceContainer.include.push(server);
} else {
reduceContainer.exclude.push(server);
}
return reduceContainer;
},
{ exclude: [], include: [] },
);
const Dashboard: FC = () => {
const [allServers, setAllServers] = useState([]);
const [excludeServers, setExcludeServers] = useState([]);
const [includeServers, setIncludeServers] = useState([]);
const [inputSearchTerm, setInputSearchTerm] = useState('');
const updateServerList = (
...filterArgs: Parameters
) => {
const { exclude, include } = filterServers(...filterArgs);
setExcludeServers(exclude);
setIncludeServers(include);
};
const { isLoading } = periodicFetch(
`${API_BASE_URL}/server`,
{
onSuccess: (data = []) => {
const serverListItems: ServerListItem[] = (
data as ServerOverviewMetadata[]
).map((serverOverview) => {
const { serverUUID } = serverOverview;
const previousScreenshot: string =
allServers.find(({ serverUUID: uuid }) => uuid === serverUUID)
?.screenshot || '';
const item: ServerListItem = {
...serverOverview,
screenshot: previousScreenshot,
};
fetchJSON<{ screenshot: string }>(
`${API_BASE_URL}/server/${serverUUID}?ss`,
)
.then(({ screenshot }) => {
item.screenshot = screenshot;
const allServersWithScreenshots = [...serverListItems];
setAllServers(allServersWithScreenshots);
updateServerList(allServersWithScreenshots, inputSearchTerm);
})
.catch(() => {
item.isScreenshotStale = true;
});
return item;
});
setAllServers(serverListItems);
updateServerList(serverListItems, inputSearchTerm);
},
refreshInterval: 60000,
},
);
return (
Dashboard
{isLoading ? (
) : (
<>
{
setInputSearchTerm(value);
updateServerList(allServers, value);
}}
value={inputSearchTerm}
/>
{createServerPreviewContainer(includeServers)}
{includeServers.length > 0 && (
)}
{createServerPreviewContainer(excludeServers)}
)}
);
};
export default Dashboard;