Guild features summary

nyxx-discord · Dec 17, 2024 · 7d80f4f · 7d80f4f
1 parent 982e0f9
commit 7d80f4f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/frontend/src/page/admin/GuildDetails.tsx b/frontend/src/page/admin/GuildDetails.tsx
@@ -1,15 +1,52 @@
 import {fetchGuildDetails, GuildDetails as GuildDetailsDto} from "../../service/api";
 import {Base} from "../../component/Base";
-import {Container, Paper, Stack, TextField, Typography} from "@mui/material";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Container,
+    Paper,
+    Stack,
+    TextField,
+    Typography
+} from "@mui/material";
 import {useParams} from "react-router-dom";
 import React, {Suspense, use} from "react";
 import {getGuildNameElement} from "../../guildUtil";
 import {DataGrid, GridColDef} from "@mui/x-data-grid";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {parseISO} from "date-fns";
+import {format} from "date-fns/format";
 
 interface GuildDetailsDataProps {
     dataPromise: Promise<GuildDetailsDto>
 }
 
+function FeaturesPaper({dataPromise}: GuildDetailsDataProps) {
+    const data = use(dataPromise).features;
+
+    const enabledFeatures = data.enabledFeatures.map(f => {
+        const enabledAt = format(parseISO(f.enabledAt), 'MM/dd/yyyy');
+
+        return <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                {f.name} (enabled: {enabledAt})
+            </AccordionSummary>
+            <AccordionDetails>
+                <Typography><Typography fontWeight="bold" display="inline">Enabled by: </Typography> {f.enabledBy}</Typography>
+                <Typography><Typography fontWeight="bold" display="inline">Data: </Typography> {JSON.stringify(f.data)}</Typography>
+            </AccordionDetails>
+        </Accordion>;
+    });
+
+    return  <Stack direction="column">
+        <Typography variant='h5'>Features</Typography>
+        <div>
+            {enabledFeatures}
+        </div>
+    </Stack>;
+}
+
 function TagsDataPaper({dataPromise}: GuildDetailsDataProps) {
     const data = use(dataPromise);
 
@@ -62,10 +99,15 @@ export default function GuildDetails() {
                 <GuildDetailsData dataPromise={promise} />
             </Suspense>
         </Paper>
-        <Paper elevation={1} sx={{p: '5px'}}>
+        <Paper elevation={1} sx={{p: '5px', mb: '5px'}}>
             <Suspense fallback={<span>Loading...</span>}>
                 <TagsDataPaper dataPromise={promise} />
             </Suspense>
         </Paper>
+        <Paper elevation={1} sx={{p: '5px'}}>
+            <Suspense fallback={<span>Loading...</span>}>
+                <FeaturesPaper dataPromise={promise} />
+            </Suspense>
+        </Paper>
     </Base>
 }
diff --git a/frontend/src/service/api.ts b/frontend/src/service/api.ts
@@ -77,7 +77,7 @@ export interface Tag {
 export interface Feature {
     name: string,
     data: any,
-    enableBy: string,
+    enabledBy: string,
     enabledAt: string,
 }