seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): add link from server list to server detail

Browse Source
main
Tsu-ba-me 3 years ago
parent 207943123b
commit 0d67310242
1 changed files with 29 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      striker-ui/pages/index.tsx

33
striker-ui/pages/index.tsx
Unescape View File

@ -1,5 +1,6 @@
import Head from 'next/head'; import Head from 'next/head';
import { FC, useState } from 'react'; import { NextRouter, useRouter } from 'next/router';
import { FC, useEffect, useRef, useState } from 'react';
import { Box, Divider } from '@mui/material'; import { Box, Divider } from '@mui/material';
import API_BASE_URL from '../lib/consts/API_BASE_URL'; import API_BASE_URL from '../lib/consts/API_BASE_URL';
@ -18,7 +19,10 @@ type ServerListItem = ServerOverviewMetadata & {
screenshot: string; screenshot: string;
}; };
const createServerPreviewContainer = (servers: ServerListItem[]) => ( const createServerPreviewContainer = (
servers: ServerListItem[],
router: NextRouter,
) => (
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -45,6 +49,9 @@ const createServerPreviewContainer = (servers: ServerListItem[]) => (
externalPreview={screenshot} externalPreview={screenshot}
serverName={serverName} serverName={serverName}
serverUUID={serverUUID} serverUUID={serverUUID}
setMode={() => {
router.push(`/server?uuid=${serverUUID}&server_name=${serverName}`);
}}
/> />
), ),
)} )}
@ -76,6 +83,9 @@ const filterServers = (allServers: ServerListItem[], searchTerm: string) =>
); );
const Dashboard: FC = () => { const Dashboard: FC = () => {
const componentMountedRef = useRef(true);
const router = useRouter();
const [allServers, setAllServers] = useState<ServerListItem[]>([]); const [allServers, setAllServers] = useState<ServerListItem[]>([]);
const [excludeServers, setExcludeServers] = useState<ServerListItem[]>([]); const [excludeServers, setExcludeServers] = useState<ServerListItem[]>([]);
const [includeServers, setIncludeServers] = useState<ServerListItem[]>([]); const [includeServers, setIncludeServers] = useState<ServerListItem[]>([]);
@ -87,6 +97,10 @@ const Dashboard: FC = () => {
) => { ) => {
const { exclude, include } = filterServers(...filterArgs); const { exclude, include } = filterServers(...filterArgs);
if (!componentMountedRef.current) {
return;
}
setExcludeServers(exclude); setExcludeServers(exclude);
setIncludeServers(include); setIncludeServers(include);
}; };
@ -116,6 +130,10 @@ const Dashboard: FC = () => {
const allServersWithScreenshots = [...serverListItems]; const allServersWithScreenshots = [...serverListItems];
if (!componentMountedRef.current) {
return;
}
setAllServers(allServersWithScreenshots); setAllServers(allServersWithScreenshots);
// Don't update servers to include or exclude here to avoid // Don't update servers to include or exclude here to avoid
// updating using an outdated input search term. Remember this // updating using an outdated input search term. Remember this
@ -136,6 +154,13 @@ const Dashboard: FC = () => {
}, },
); );
useEffect(
() => () => {
componentMountedRef.current = false;
},
[],
);
return ( return (
<Box> <Box>
<Head> <Head>
@ -157,11 +182,11 @@ const Dashboard: FC = () => {
value={inputSearchTerm} value={inputSearchTerm}
/> />
</PanelHeader> </PanelHeader>
{createServerPreviewContainer(includeServers)} {createServerPreviewContainer(includeServers, router)}
{includeServers.length > 0 && ( {includeServers.length > 0 && (
<Divider sx={{ backgroundColor: DIVIDER }} /> <Divider sx={{ backgroundColor: DIVIDER }} />
)} )}
{createServerPreviewContainer(excludeServers)} {createServerPreviewContainer(excludeServers, router)}
</> </>
)} )}
</Panel> </Panel>

Write Preview
Loading…
Cancel
Save