Connected commands page to api (no functionality)

package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
+    "axios": "^0.21.1",
     "framer-motion": "^4",
     "mongodb": "^3.6.9",
     "next": "11.0.0",

pages/controlpanel/commands.js

@@ -7,20 +7,17 @@ import {
     Th,
     Td,
     TableCaption,
-    Switch
+    Switch,
+    Text
 } from "@chakra-ui/react"
 import Head from 'next/head'
 import { useSession } from 'next-auth/client'
+import axios from 'axios'
 
 
 function Controller({initialState}) {
     const [online, setOnline] = React.useState(initialState)
 
-    React.useEffect(()=>{
-        // fake post req
-        console.log(online)
-    }, [online])
-
     return (
         <Switch
             size="lg"
@@ -36,7 +33,7 @@ function Commands() {
     const [session, loading] = useSession()
 
 
-    const [commands, setCommands] = React.useState(
+    const [categories, setCategories] = React.useState(
         [
             {command: 'Help', online: true},
             {command: 'Help', online: true},
@@ -45,6 +42,11 @@ function Commands() {
         ]
     )
 
+    React.useEffect(() => {
+        axios.get('https://cath.night0721.repl.co/api/commands')
+            .then(res => setCategories(res.data))
+    }, [])
+
 
     return (
         <>
@@ -62,15 +64,19 @@ function Commands() {
                         </Tr>
                     </Thead>
                     <Tbody>
-                        {commands.map((command, idx)=>(
-                            <Tr key={idx}>
-                                <Td>{command.command}</Td>
+                        {categories.map((category, idx) => (
+                            <>
+                                <Text fontSize='3xl'>{category.name}</Text>
+                                {category.commands.map((command, commandIdx)=> (
+                                    <Tr key={commandIdx}>
+                                        <Td>{command.name}</Td>
                                         <Td>
                                             <Controller initialState={command.online} />
                                         </Td>
                                     </Tr>
                                 ))}
-                        
+                            </>
+                        ))}
                     </Tbody>
                 </Table>
             </>

yarn.lock

@@ -1075,19 +1075,6 @@
     "@typescript-eslint/types" "4.27.0"
     eslint-visitor-keys "^2.0.0"
 
-"@widgetbot/embed-api@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@widgetbot/embed-api/-/embed-api-1.1.3.tgz#c7fd8069d7ce2ec7740d8bf4140c786c636fb3d6"
-  integrity sha1-x/2AadfOLsd0DYv0FAx4bGNvs9Y=
-
-"@widgetbot/react-embed@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@widgetbot/react-embed/-/react-embed-1.4.0.tgz#b0b617629e0e2cd6ff7a4770db34e0c52e056a43"
-  integrity sha512-rN/zyv8ndn+I3g1fCMql2NN+2Yn04XVhwL1GHQlSKEvFWNXsqEDyXO1MaDxcvJFcG7cSQLRTcvgVWzAVe+3Fag==
-  dependencies:
-    "@widgetbot/embed-api" "^1.1.3"
-    react "^16.13.1"
-
 acorn-jsx@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
@@ -1290,6 +1277,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.2.tgz#0c987d82c8b82b4b9b7a945f1b5ef0d8fed586ed"
   integrity sha512-OKRkKM4ojMEZRJ5UNJHmq9tht7cEnRnqKG6KyB/trYws00Xtkv12mHtlJ0SK7cmuNbrU8dPUova3ELTuilfBbw==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -2349,6 +2343,11 @@ focus-lock@^0.8.1:
   dependencies:
     tslib "^1.9.3"
 
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -3958,15 +3957,6 @@ react@17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-react@^16.13.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
 read-pkg-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"