[fix] #110

homenoc · Aug 8, 2022 · 0c1e78b · 0c1e78b
1 parent c503531
commit 0c1e78b
Show file tree

Hide file tree

Showing 30 changed files with 2,943 additions and 14,105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,43 +4,44 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@hookform/resolvers": "^2.8.8",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/lab": "^5.0.0-alpha.81",
-    "@reduxjs/toolkit": "^1.8.1",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@hookform/resolvers": "^2.9.7",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.93",
+    "@reduxjs/toolkit": "^1.8.3",
     "@testing-library/dom": "^7.31.2",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^12.20.47",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@types/react-select": "^4.0.18",
-    "@types/react-syntax-highlighter": "^13.5.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.2",
+    "@types/jest": "^28.1.6",
+    "@types/node": "^15.14.9",
+    "@types/react": "^17.0.48",
+    "@types/react-dom": "^17.0.17",
+    "@types/react-select": "^5.0.1",
+    "@types/react-syntax-highlighter": "^15.5.4",
     "axios": "^0.27.2",
     "dart-sass": "^1.25.0",
-    "date-fns": "^2.28.0",
-    "moment": "^2.29.3",
+    "date-fns": "^2.29.1",
+    "moment": "^2.29.4",
     "notistack": "^2.0.5",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.31.1",
+    "react-hook-form": "^7.34.0",
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
-    "react-select": "^5.3.2",
+    "react-select": "^5.4.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-use-websocket": "^3.0.0",
+    "recoil": "^0.7.4",
     "redux": "^4.2.0",
     "remark-gfm": "^3.0.1",
-    "sass": "^1.51.0",
-    "socket.io": "^4.5.0",
-    "socket.io-client": "^4.5.0",
-    "typescript": "~4.6",
+    "sass": "^1.54.3",
+    "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1",
+    "typescript": "~4.7",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
@@ -73,7 +74,7 @@
   },
   "devDependencies": {
     "@material-ui/icons": "^4.11.3",
-    "@mui/material": "^5.7.0",
+    "@mui/material": "^5.9.3",
     "@types/react-router-dom": "^5.3.3",
     "react-dev-utils": "^12.0.1",
     "react-redux": "^7.2.8"

diff --git a/src/App.tsx b/src/App.tsx
@@ -23,29 +23,29 @@ import NotFound from "./pages/Etc/404";
 export default class App extends React.Component {
     render() {
         return (
-            <BrowserRouter>
-                <Routes>
-                    <Route path="*" element={<NotFound/>}/>
-                    <Route path='/' element={<SignIn/>}/> {}
-                    <Route path="/login" element={<SignIn/>}/>
-                    <Route path="/dashboard" element={<Dashboard/>}/>
-                    <Route path="/dashboard/notice" element={<Notice/>}/>
-                    <Route path="/dashboard/group" element={<Group/>}/>
-                    <Route path="/dashboard/group/:id" element={<GroupDetail/>}/>
-                    <Route path="/dashboard/group/:id/add/service" element={<ServiceAdd/>}/>
-                    <Route path="/dashboard/group/:id/add/connection" element={<ConnectionAdd/>}/>
-                    <Route path="/dashboard/support" element={<Support/>}/>
-                    <Route path="/dashboard/support/:id" element={<SupportDetail/>}/>
-                    <Route path="/dashboard/order" element={<Order/>}/>
-                    <Route path="/dashboard/service" element={<Service/>}/>
-                    <Route path="/dashboard/connection" element={<Connection/>}/>
-                    <Route path="/dashboard/user" element={<User/>}/>
-                    <Route path="/dashboard/token" element={<Token/>}/>
-                    <Route path="/dashboard/jpnic" element={<JPNIC/>}/>
-                    <Route path="/dashboard/jpnic/:url" element={<JPNICDetail/>}/>
-                    <Route path="/dashboard/jpnic/handle/:handle" element={<JPNICHandle/>}/>
-                </Routes>
-            </BrowserRouter>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path="*" element={<NotFound/>}/>
+                        <Route path='/' element={<SignIn/>}/> {}
+                        <Route path="/login" element={<SignIn/>}/>
+                        <Route path="/dashboard" element={<Dashboard/>}/>
+                        <Route path="/dashboard/notice" element={<Notice/>}/>
+                        <Route path="/dashboard/group" element={<Group/>}/>
+                        <Route path="/dashboard/group/:id" element={<GroupDetail/>}/>
+                        <Route path="/dashboard/group/:id/add/service" element={<ServiceAdd/>}/>
+                        <Route path="/dashboard/group/:id/add/connection" element={<ConnectionAdd/>}/>
+                        <Route path="/dashboard/support" element={<Support/>}/>
+                        <Route path="/dashboard/support/:id" element={<SupportDetail/>}/>
+                        <Route path="/dashboard/order" element={<Order/>}/>
+                        <Route path="/dashboard/service" element={<Service/>}/>
+                        <Route path="/dashboard/connection" element={<Connection/>}/>
+                        <Route path="/dashboard/user" element={<User/>}/>
+                        <Route path="/dashboard/token" element={<Token/>}/>
+                        <Route path="/dashboard/jpnic" element={<JPNIC/>}/>
+                        <Route path="/dashboard/jpnic/:url" element={<JPNICDetail/>}/>
+                        <Route path="/dashboard/jpnic/handle/:handle" element={<JPNICHandle/>}/>
+                    </Routes>
+                </BrowserRouter>
         );
     }
 }
diff --git a/src/api/Recoil.ts b/src/api/Recoil.ts
@@ -0,0 +1,8 @@
+import {atom} from "recoil";
+import {DefaultTemplateData} from "../interface";
+
+export const TemplateState = atom({
+    key: 'templateState',
+    default: DefaultTemplateData,
+});
+
diff --git a/src/api/Tool.ts b/src/api/Tool.ts
@@ -0,0 +1,27 @@
+import {ConnectionTemplateData, ServiceTemplateData} from "../interface";
+import {useRecoilValue} from "recoil";
+import {TemplateState} from "./Recoil";
+
+export function GetServiceWithTemplate(serviceType: string)
+    : ServiceTemplateData | undefined {
+    const template = useRecoilValue(TemplateState);
+
+    const serviceTemplate = template.services?.find(item => item.type === serviceType)
+    if (serviceTemplate == null) {
+        return undefined
+    }
+
+    return serviceTemplate
+}
+
+export function GetConnectionWithTemplate(connectionType: string)
+    : ConnectionTemplateData | undefined {
+    const template = useRecoilValue(TemplateState);
+
+    const connectionTemplate = template.connections?.find(item => item.type === connectionType)
+    if (connectionTemplate == null) {
+        return undefined
+    }
+
+    return connectionTemplate
+}
diff --git a/src/components/Dashboard/Connection/Connection.tsx b/src/components/Dashboard/Connection/Connection.tsx
@@ -42,7 +42,6 @@ export default function Connection(props: {
                 <StatusTable
                     key={"connection_status_table"}
                     setReload={setReload}
-                    template={template}
                     connection={data.sort((a, b) => b.ID - a.ID)}
                 />
             }
@@ -52,10 +51,9 @@ export default function Connection(props: {
 
 export function StatusTable(props: {
     connection: ConnectionDetailData[]
-    template: TemplateData
     setReload: Dispatch<SetStateAction<boolean>>
 }) {
-    const {template, connection, setReload} = props;
+    const {connection, setReload} = props;
     const navigate = useNavigate();
     const [page, setPage] = React.useState(0);
     const [rowsPerPage, setRowsPerPage] = React.useState(5);
@@ -111,8 +109,8 @@ export function StatusTable(props: {
                             ).map((row) => (
                                 <TableRow key={"service_detail_" + row.ID}>
                                     <TableCell style={{width: 300}} component="th" scope="row">
-                                        {row.ID}: {getServiceCode(row.service?.group_id, row.service?.service_template.type, row.service?.service_number,
-                                        row.connection_template.type, row.connection_number)}
+                                        {row.ID}: {getServiceCode(row.service?.group_id, row.service?.service_type, row.service?.service_number,
+                                        row.connection_type, row.connection_number)}
                                     </TableCell>
                                     <TableCell style={{width: 300}} align="right">
                                         {row.CreatedAt}
@@ -143,11 +141,11 @@ export function StatusTable(props: {
                                                     key={"connection_get_dialog_" + row.ID}
                                                     connection={row}
                                                     service={row.service}
-                                                    template={template}
                                                     reload={setReload}
                                                 />
                                             }
                                             &nbsp;
+                                            {/* eslint-disable-next-line react/jsx-no-undef */}
                                             <DeleteDialog
                                                 key={"connection_delete_alert_dialog_" + row.ID}
                                                 id={row.ID}

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {
     Badge, Collapse,
     ThemeProvider,
@@ -34,6 +34,10 @@ import {
 import {useNavigate} from "react-router-dom";
 import {Logout} from "../../api/Auth";
 import {muiColorTheme} from "../Theme";
+import {useRecoilState} from "recoil";
+import {TemplateState} from "../../api/Recoil";
+import {GetTemplate} from "../../api/Group";
+import {useSnackbar} from "notistack";
 
 const drawerWidth = 240;
 
@@ -98,8 +102,23 @@ const Drawer = styled(MuiDrawer, {shouldForwardProp: (prop) => prop !== 'open'})
 );
 
 export default function Dashboard(props: any) {
+
     // Menu Bar
     const [open, setOpen] = React.useState(false);
+    const [template, setTemplate] = useRecoilState(TemplateState)
+    const {enqueueSnackbar} = useSnackbar();
+
+    useEffect(() => {
+        GetTemplate().then(res => {
+            if (res.error === "") {
+                setTemplate(res.data);
+                console.log(template)
+            } else {
+                enqueueSnackbar("" + res.error, {variant: "error"});
+            }
+        })
+    }, [])
+
     const handleDrawerOpen = () => {
         setOpen(true);
     };

diff --git a/src/components/Dashboard/Service/Service.tsx b/src/components/Dashboard/Service/Service.tsx
@@ -100,7 +100,7 @@ export function StatusTable(props: {
                             ).map((row, index) => (
                                 <TableRow key={"service_detail_" + index}>
                                     <TableCell style={{width: 300}} component="th" scope="row">
-                                        {row.ID}: {getServiceCode(row.group_id, row.service_template.type, row.service_number)}
+                                        {row.ID}: {getServiceCode(row.group_id, row.service_type, row.service_number)}
                                     </TableCell>
                                     <TableCell style={{width: 300}} align="right">
                                         {row.CreatedAt}
@@ -131,7 +131,6 @@ export function StatusTable(props: {
                                                 key={"service_get_dialog_" + index}
                                                 service={row}
                                                 reload={setReload}
-                                                template={template}
                                             />
                                             &nbsp;
                                             <DeleteDialog

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,12 +4,15 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {SnackbarProvider} from "notistack";
+import {RecoilRoot} from 'recoil';
 
 ReactDOM.render(
     <React.StrictMode>
-        <SnackbarProvider maxSnack={3}>
-            <App/>
-        </SnackbarProvider>
+        <RecoilRoot>
+            <SnackbarProvider maxSnack={3}>
+                <App/>
+            </SnackbarProvider>
+        </RecoilRoot>
     </React.StrictMode>,
     document.getElementById('root')
 );