Performance improvements; Remove axios

nyxx-discord · Dec 14, 2024 · e6de0a2 · e6de0a2
1 parent e9c51d8
commit e6de0a2
Show file tree

Hide file tree

Showing 9 changed files with 662 additions and 683 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,7 +15,6 @@
     "@types/node": "^16.7.13",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "axios": "^1.7.9",
     "date-fns": "^4.1.0",
     "jwt-decode": "^4.0.0",
     "react": "^19.0.0",

diff --git a/frontend/src/page/Home.tsx b/frontend/src/page/Home.tsx
@@ -8,48 +8,71 @@ import {fetchBotInfo} from "../service/api";
 
 const botInfoStatusPromise = fetchBotInfo();
 
-export default function Home() {
+function BotInfoWidget() {
     const botInfoStats = use(botInfoStatusPromise);
 
-    const docsUpdatedAt = formatRelative(parseISO(botInfoStats.docsUpdate), new Date());
     const uptime = formatRelative(parseISO(botInfoStats.uptime), new Date());
 
+    return <>
+        <Typography>Bot Info</Typography>
+        <Grid2 container spacing={1} sx={{mt: '5px'}}>
+            <BotInfoElement name="Nyxx version" value={botInfoStats.nyxxVersion} />
+            <BotInfoElement name="Bot version" value={botInfoStats.version} />
+            <BotInfoElement name="Dart version" value={botInfoStats.platform} />
+            <BotInfoElement name="Up since" value={uptime} />
+            <BotInfoElement name="Memory usage" value={botInfoStats.memoryUsageString} />
+        </Grid2>
+    </>;
+}
+
+function CacheInfoWidget() {
+    const botInfoStats = use(botInfoStatusPromise);
+
+    return <>
+        <Typography>Cache Info</Typography>
+        <Grid2 container spacing={1} sx={{mt: '5px'}}>
+            <BotInfoElement name="Cached channels" value={botInfoStats.cachedChannels} />
+            <BotInfoElement name="Cached messages" value={botInfoStats.cachedMessages} />
+            <BotInfoElement name="Cached guilds" value={botInfoStats.cachedGuilds} />
+            <BotInfoElement name="Cached users" value={botInfoStats.cachedUsers} />
+            <BotInfoElement name="Cached voice states" value={botInfoStats.cachedVoiceStates} />
+        </Grid2>
+    </>;
+}
+
+function ModuleInfoWidget() {
+    const botInfoStats = use(botInfoStatusPromise);
+
+    const docsUpdatedAt = formatRelative(parseISO(botInfoStats.docsUpdate), new Date());
+
+    return <>
+        <Typography>Module Info</Typography>
+        <Grid2 container spacing={1} sx={{mt: '5px'}}>
+            <BotInfoElement name="Tags count" value={botInfoStats.totalTagsCount} />
+            <BotInfoElement name="Reminder count" value={botInfoStats.totalReminderCount} />
+            <BotInfoElement name="Last docs update" value={docsUpdatedAt} />
+        </Grid2>
+    </>;
+}
+
+export default function Home() {
     return (
         <Base>
             <Container>
                 <Paper elevation={1} sx={{p: '5px'}}>
-                    <Typography>Bot Info</Typography>
-                    <Grid2 container spacing={1} sx={{mt: '5px'}}>
-                        <Suspense fallback={<div>Loading...</div>}>
-                            <BotInfoElement name="Nyxx version" value={botInfoStats.nyxxVersion} />
-                            <BotInfoElement name="Bot version" value={botInfoStats.version} />
-                            <BotInfoElement name="Dart version" value={botInfoStats.platform} />
-                            <BotInfoElement name="Up since" value={uptime} />
-                            <BotInfoElement name="Memory usage" value={botInfoStats.memoryUsageString} />
-                        </Suspense>
-                    </Grid2>
+                    <Suspense fallback={<div>Loading...</div>}>
+                        <BotInfoWidget />
+                    </Suspense>
                 </Paper>
                 <Paper elevation={1} sx={{mt: '10px', p: '5px'}}>
-                    <Typography>Cache Info</Typography>
-                    <Grid2 container spacing={1} sx={{mt: '5px'}}>
-                        <Suspense fallback={<div>Loading...</div>}>
-                            <BotInfoElement name="Cached channels" value={botInfoStats.cachedChannels} />
-                            <BotInfoElement name="Cached messages" value={botInfoStats.cachedMessages} />
-                            <BotInfoElement name="Cached guilds" value={botInfoStats.cachedGuilds} />
-                            <BotInfoElement name="Cached users" value={botInfoStats.cachedUsers} />
-                            <BotInfoElement name="Cached voice states" value={botInfoStats.cachedVoiceStates} />
-                        </Suspense>
-                    </Grid2>
+                    <Suspense fallback={<div>Loading...</div>}>
+                        <CacheInfoWidget />
+                    </Suspense>
                 </Paper>
                 <Paper elevation={1} sx={{mt: '10px', p: '5px'}}>
-                    <Typography>Module Info</Typography>
-                    <Grid2 container spacing={1} sx={{mt: '5px'}}>
-                        <Suspense fallback={<div>Loading...</div>}>
-                            <BotInfoElement name="Tags count" value={botInfoStats.totalTagsCount} />
-                            <BotInfoElement name="Reminder count" value={botInfoStats.totalReminderCount} />
-                            <BotInfoElement name="Last docs update" value={docsUpdatedAt} />
-                        </Suspense>
-                    </Grid2>
+                    <Suspense fallback={<div>Loading...</div>}>
+                        <ModuleInfoWidget />
+                    </Suspense>
                 </Paper>
             </Container>
         </Base>

diff --git a/frontend/src/page/Redirect.tsx b/frontend/src/page/Redirect.tsx
@@ -1,19 +1,19 @@
 import React, {useEffect, useState} from "react";
 import {Navigate, useSearchParams} from 'react-router-dom';
-import {axios} from "../service/axios";
 import {AuthData, setAuthData} from "../service/auth";
+import {request} from "../service/httpClient";
 
 export default function Redirect() {
     const [searchParams] = useSearchParams();
 
     const [isSuccess, setIsSuccess] = useState(false);
 
     useEffect(() => {
-        axios.get<AuthData>(`/api/validate-oauth?code=${searchParams.get('code')}`).then(result => {
-            if (result.status === 200) {
-                setAuthData(result.data);
-                setIsSuccess(true);
-            }
+        request<AuthData>({path: `/api/validate-oauth?code=${searchParams.get('code')}`}).then(result => {
+            setAuthData(result);
+            setIsSuccess(true);
+        }).catch(_ => {
+            setIsSuccess(false);
         });
     }, []);
 

diff --git a/frontend/src/page/admin/Guilds.tsx b/frontend/src/page/admin/Guilds.tsx
@@ -2,16 +2,23 @@ import React, {Suspense, use} from 'react';
 import {Base} from "../../component/Base";
 import {fetchGuilds, Guild} from "../../service/api";
 import {DataGrid, GridColDef} from "@mui/x-data-grid";
-import {Alert, Avatar, Stack, Typography} from "@mui/material";
+import {Alert, Avatar, Stack, Tooltip, Typography} from "@mui/material";
 import {getGuildIcon} from "../../constants";
 
 const columns: GridColDef[] = [
-    { field: 'name', headerName: 'Name', width: 300, renderCell: params => params.value},
+    { field: 'name', headerName: 'Name', flex: 1, renderCell: params => params.value},
     { field: 'cachedMembers', headerName: 'Members', minWidth: 100 },
     { field: 'cachedChannels', headerName: 'Channels', minWidth: 100 },
     { field: 'cachedMessages', headerName: 'Messages', minWidth: 100 },
     { field: 'cachedRoles', headerName: 'Roles', minWidth: 100 },
-    { field: 'enabledFeatures', headerName: 'Features', minWidth: 100 },
+    { field: 'enabledFeatures', headerName: 'Features', minWidth: 100, renderCell: params => {
+        return <Stack direction="row" spacing={2} alignItems="center" height={'100%'}>
+                <Tooltip title={params.value.join(', ')} arrow placement="bottom-start">
+                    <Typography>{params.value.length}</Typography>
+                </Tooltip>
+            </Stack>
+        }
+    },
     { field: 'tagsCount', headerName: 'Tags', minWidth: 100 },
 ];
 
@@ -22,21 +29,20 @@ type GuildRowDef = {
     cachedChannels: number,
     cachedMessages: number,
     cachedRoles: number,
-    enabledFeatures: number,
+    enabledFeatures: string[],
     tagsCount: number,
 };
 
 function getGuildNameElement(guild: Guild): React.JSX.Element|string {
-    const guildName = <Typography>{guild.name}</Typography>;
+    const elements = [<Typography>{guild.name}</Typography>];
 
     if (guild.icon != null) {
-        return <Stack direction="row" spacing={2} alignItems="center" sx={{mt: '4px'}}>
-            <Avatar src={getGuildIcon(guild.id, guild.icon as string)}/>
-            {guildName}
-        </Stack>;
+        elements.push(<Avatar src={getGuildIcon(guild.id, guild.icon as string)}/>);
     }
 
-    return guildName;
+    return <Stack direction="row" spacing={2} alignItems="center" height={'100%'}>
+        {elements.reverse()}
+    </Stack>;
 }
 
 function mapApiDataToRows(guilds: Guild[]): GuildRowDef[] {
@@ -48,7 +54,7 @@ function mapApiDataToRows(guilds: Guild[]): GuildRowDef[] {
             cachedChannels: guild.cachedChannels,
             cachedMessages: guild.cachedMessages,
             cachedRoles: guild.cachedRoles,
-            enabledFeatures: guild.enabledFeatures.length,
+            enabledFeatures: guild.enabledFeatures,
             tagsCount: guild.tagsCount,
         } as GuildRowDef;
     });
@@ -58,17 +64,23 @@ const guildDataPromise = fetchGuilds().then(guilds => {
     return mapApiDataToRows(guilds);
 });
 
-export default function Guilds() {
+function Grid() {
     const rows = use(guildDataPromise);
 
+    return (
+        <DataGrid rows={rows} columns={columns}/>
+    );
+}
+
+export default function Guilds() {
     return (
         <Base>
-            <Suspense fallback={<div>Loading...</div>}>
-                <Stack direction="column" spacing={1}>
-                    <Alert severity="error">Table represents cached data, that is available for bot at the moment.</Alert>
-                    <DataGrid rows={rows} columns={columns}/>
-                </Stack>
-            </Suspense>
+            <Stack direction="column" spacing={1}>
+            <Alert severity="error">Table represents cached data, that is available for bot at the moment.</Alert>
+                <Suspense fallback={<div>Loading...</div>}>
+                    <Grid />
+                </Suspense>
+            </Stack>
         </Base>
     );
 }
diff --git a/frontend/src/service/api.ts b/frontend/src/service/api.ts
@@ -1,4 +1,4 @@
-import {axiosAuthenticated} from "./axios";
+import {request} from "./httpClient";
 
 export type BotInfo = {
     nyxxVersion: string;
@@ -31,13 +31,9 @@ export type Guild = {
 };
 
 export async function fetchBotInfo(): Promise<BotInfo> {
-    const response = await axiosAuthenticated.get<BotInfo>("/api/server-info", {data: {useAuth: false}});
-
-    return response.data;
+    return await request<BotInfo>({path: "/api/server-info"});
 }
 
 export async function fetchGuilds(): Promise<Guild[]> {
-    const response = await axiosAuthenticated.get<Guild[]>("/api/guilds", {data: {useAuth: true}})
-
-    return response.data;
+    return await request<Guild[]>({path: "/api/guilds", auth: true});
 }
diff --git a/frontend/src/service/axios.ts b/frontend/src/service/axios.ts