Made changes to frontend based on Kashif's feedback (#3)

# Purpose
Made changes to frontend based on Kashif's feedback and some minor other
changes.

# New Changes
- Add command status to string mapping
- Update CommandResponse to have proper response fields
- Fix typo in CommandResponseList 
- Add deleteCommand API function explanation (One of Kashif's feedback
was to add task to create endpoint that uses axios)
- Update row in command table to display proper data
- Fix useEffect function performance issue

# Testing
- Frontend builds
- No changes to backend but backend runs as expected
- Ran the frontend and backend combo, they displays the correct data in
the table

# Outstanding Changes
- Make changes based on other members feedback

Author: Yarik-Popov

frontend/src/data/other.ts

@@ -0,0 +1 @@
+export const CommandStatusMapping = ["Pending", "Scheduled", "Ongoing", "Cancelled", "Failed", "Completed"]

frontend/src/data/response.ts

@@ -13,13 +13,13 @@ export interface MainCommandListResponse {
 
 export interface CommandResponse {
   id: number
-  name: string
+  command_type: number
+  status: number
   params: string | null
-  format: string | null
   created_on: string
   updated_on: string
 }
 
-export interface CommandListReponse {
+export interface CommandListResponse {
   data: CommandResponse[]
 }

frontend/src/display/command_api.ts

@@ -1,13 +1,22 @@
 import axios from "axios";
-import { CommandListReponse } from "../data/response";
+import { CommandListResponse } from "../data/response";
 import { API_URL } from "../environment";
 
-export const getCommands = async (): Promise<CommandListReponse> => {
+export const getCommands = async (): Promise<CommandListResponse> => {
   try {
-    const { data } = await axios.get<CommandListReponse>(`${API_URL}/commands/`)
+    const { data } = await axios.get<CommandListResponse>(`${API_URL}/commands/`)
     return data;
   } catch (error) {
     console.error(error)
     throw error
   }
 }
+
+/**
+ * TODO: (Member) Create a deleteCommand API function based on the following specs. You should be using axios to make the API call
+ *
+ * Deletes the command with the given id on the backend and returns the list of commands after its deletion.
+ *
+ * @param id: command to delete
+ * @returns Promise<CommandListResponse>: list of commands after the command with the given id was deleted
+ */

frontend/src/display/row.tsx

@@ -1,16 +1,17 @@
+import { CommandStatusMapping } from "../data/other";
 import { CommandResponse } from "../data/response";
 
 interface CommandRowProp extends CommandResponse {
   handleDelete: () => void;
 }
 
-const CommandRow = ({ id, name, params, format, created_on, updated_on, handleDelete }: CommandRowProp) => {
+const CommandRow = ({ id, command_type, params, status, created_on, updated_on, handleDelete }: CommandRowProp) => {
   return (
     <tr>
       <th>{id}</th>
-      <th>{name}</th>
+      <th>{command_type}</th>
       <th>{params}</th>
-      <th>{format}</th>
+      <th>{CommandStatusMapping[status]}</th>
       <th>{created_on}</th>
       <th>{updated_on}</th>
       <th><button onClick={handleDelete}>Delete {id}</button></th>

frontend/src/display/table.tsx

@@ -6,18 +6,19 @@ import CommandRow from "./row"
 const CommandTable = () => {
   const [commands, setCommands] = useState<CommandResponse[]>([])
 
-  const getCommandsFn = async () => {
-    const data = await getCommands();
-    setCommands(data.data)
-  }
-
   useEffect(() => {
+    const getCommandsFn = async () => {
+      const data = await getCommands();
+      setCommands(data.data)
+    }
+
     getCommandsFn();
   }, [])
 
   const handleDelete = (id: number) => {
     return () => {
       // TODO: (Member) Handle delete logic here
+      // You will need to create a function in `command_api.ts` before you can finish this part.
 
     }
   }
@@ -27,9 +28,9 @@ const CommandTable = () => {
       <thead>
         <tr>
           <th>ID: </th>
-          <th>Name: </th>
+          <th>Main Command ID: </th>
           <th>Params: </th>
-          <th>Format: </th>
+          <th>Status: </th>
           <th>Created On: </th>
           <th>Updated On: </th>
           <th>Delete</th>

frontend/src/input/input_api.ts

@@ -3,7 +3,7 @@ import { CommandRequest } from "../data/request";
 import axios from "axios";
 import { CommandResponse, MainCommandListResponse } from "../data/response";
 
-export const createCommand = async (requestData: CommandRequest): Promise<CommandResponse | undefined> => {
+export const createCommand = async (requestData: CommandRequest): Promise<CommandResponse> => {
   try {
     const { data } = await axios.post<CommandResponse>(`${API_URL}/commands`, requestData);
     return data