feat: tag data table

src/client/package.json

@@ -10,6 +10,7 @@
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.6.2",
         "@mui/material": "^5.6.2",
+        "@mui/x-data-grid": "^5.12.3",
         "@types/react": "^18.0.5",
         "@types/react-dom": "^18.0.1",
         "react": "^18.0.0",

src/client/page/tags.tsx

@@ -1,11 +1,71 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import {Typography} from '@mui/material';
+import {Typography, Box, Paper} from '@mui/material';
-
+import {LoadingCircle} from "../component/loading";
 import { Headline, CommonMenuList } from '../component/mod';
+import {DataGrid, GridColDef} from "@mui/x-data-grid"
+
+type TagCount = {
+    tag_name: string;
+    occurs: number;
+};
+
+const tagTableColumn: GridColDef[] = [
+{
+    field:"tag_name",
+    headerName:"Tag Name",
+    width: 200,
+},
+{
+    field:"occurs",
+    headerName:"Occurs",
+    width:100,
+    type:"number"
+}
+]
+
+function TagTable(){
+    const [data,setData] = useState<TagCount[] | undefined>();
+    const [error, setErrorMsg] = useState<string|undefined>(undefined);
+    const isLoading = data === undefined;
+
+    useEffect(()=>{
+        loadData();
+    },[]);
+
+    if(isLoading){
+        return <LoadingCircle/>;
+    }
+    if(error !== undefined){
+        return <Typography variant="h3">{error}</Typography>
+    }
+    return <Box sx={{height:"400px",width:"100%"}}>
+        <Paper sx={{height:"100%"}} elevation={2}>
+            <DataGrid rows={data} columns={tagTableColumn} getRowId={(t)=>t.tag_name} ></DataGrid>
+        </Paper>
+        </Box>
+    
+    async function loadData(){
+        try{
+            const res = await fetch("/api/tags?withCount=true");
+            const data = await res.json();
+            setData(data);
+        }
+        catch(e){
+            setData([]);
+            if(e instanceof Error){
+                setErrorMsg(e.message);
+            }
+            else{
+                console.log(e);
+                setErrorMsg("");
+            }
+        }
+    }
+}
 
 export const TagsPage = ()=>{
     const menu = CommonMenuList();
     return <Headline menu={menu}>
-        <Typography variant='h2'>Tags</Typography>
+        <TagTable></TagTable>
     </Headline>
 };

src/model/tag.ts

@@ -4,7 +4,7 @@ export interface Tag{
 }
 
 export interface TagCount{
-    tagname: string;
+    tag_name: string;
     occurs: number;
 }