Create table

frontend/src/app.tsx

@@ -1,10 +1,13 @@
 import './app.css'
+import CommandTable from './display/table'
 import CommandInput from './input/command_input'
 
 function App() {
   return (
     <>
       <CommandInput />
+      <p>Command List:</p>
+      <CommandTable />
     </>
   )
 }

frontend/src/data/response.ts

@@ -19,3 +19,7 @@ export interface CommandResponse {
   created_on: string
   updated_on: string
 }
+
+export interface CommandListReponse {
+  data: CommandResponse[]
+}

frontend/src/display/command_api.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+import { CommandListReponse } from "../data/response";
+import { API_URL } from "../environment";
+
+export const getCommands = async (): Promise<CommandListReponse> => {
+  try {
+    const { data } = await axios.get<CommandListReponse>(`${API_URL}/commands/`)
+    return data;
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

frontend/src/display/row.tsx

@@ -0,0 +1,21 @@
+import { CommandResponse } from "../data/response";
+
+interface CommandRowProp extends CommandResponse {
+  handleDelete: () => void;
+}
+
+const CommandRow = ({ id, name, params, format, created_on, updated_on, handleDelete }: CommandRowProp) => {
+  return (
+    <tr>
+      <th>{id}</th>
+      <th>{name}</th>
+      <th>{params}</th>
+      <th>{format}</th>
+      <th>{created_on}</th>
+      <th>{updated_on}</th>
+      <th><button onClick={handleDelete}>Delete {id}</button></th>
+    </tr>
+  )
+}
+
+export default CommandRow;

frontend/src/display/table.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react"
+import { CommandResponse } from "../data/response"
+import { getCommands } from "./command_api"
+import CommandRow from "./row"
+
+const CommandTable = () => {
+  const [commands, setCommands] = useState<CommandResponse[]>([])
+
+  const getCommandsFn = async () => {
+    const data = await getCommands();
+    setCommands(data.data)
+  }
+
+  useEffect(() => {
+    getCommandsFn();
+  }, [])
+
+  const handleDelete = (id: number) => {
+    return () => { setCommands(commands.filter((value) => value.id != id)) }
+  }
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>ID: </th>
+          <th>Name: </th>
+          <th>Params: </th>
+          <th>Format: </th>
+          <th>Created On: </th>
+          <th>Updated On: </th>
+          <th>Delete</th>
+        </tr>
+      </thead>
+      <thead>
+        {commands.map(value => (<CommandRow {...value} handleDelete={handleDelete(value.id)} />))}
+      </thead>
+    </table>
+  )
+}
+
+export default CommandTable;