add add, edit and delete sport

client/src/api/sport.ts

 export async function getSportsFromApi() {
-  try {
-    const response = await fetch("/api/sport", {
-      method: "GET",
-    });
-    const sports = await response.json();
-    return sports.result;
-  } catch (error) {
-    console.log(error);
-  }
+  const response = await fetch("/api/sport", {
+    method: "GET",
+  });
+  const json = await response.json();
+  return json;
 }
 
-export async function addSport() {
-  try {
-    const response = await fetch("/api/sport", {
-      method: "POST",
-    });
-    const sports = await response.json();
-    return sports;
-  } catch (error) {
-    console.log(error);
-  }
+type AddSportParameters = {
+  name: string;
+};
+
+export async function addSport({ name }: AddSportParameters) {
+  const response = await fetch("/api/sport", {
+    method: "POST",
+    body: JSON.stringify({
+      name: name,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const json = await response.json();
+  return json;
+}
+
+type EditSportParameter = {
+  id: number;
+  name: string;
+};
+
+export async function editSport({ id, name }: EditSportParameter) {
+  const response = await fetch(`/api/sport/${id}`, {
+    method: "PATCH",
+    body: JSON.stringify({
+      name: name,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const json = await response.json();
+  return json;
+}
+
+type DeleteSportParameter = {
+  id: number;
+};
+
+export async function deleteSportInApi({ id }: DeleteSportParameter) {
+  const response = await fetch(`/api/sport/${id}`, {
+    method: "DELETE",
+  });
+  const json = await response.json();
+  return json;
 }

client/src/components/StaffModal.tsx

@@ -13,7 +13,7 @@ function StaffModal(props: {
   hideText?: string;
   show: boolean;
 }) {
-	const {t} = useTranslation();
+  const { t } = useTranslation();
   return (
     <Modal
       header={props.header}
@@ -31,22 +31,28 @@ function StaffModal(props: {
       <Modal.Body>
         <div>{props.children}</div>
       </Modal.Body>
-      <Modal.Footer className="justify-content-between">
-        <Button
-          className="float-left"
-          variant={props.hideColor || "secondary"}
-          onClick={props.onHide}
-        >
-          {props.hideText || t("staffModal.Cancel")}
-        </Button>
-        {!props.hideSuccess ? <Button
-          variant={props.successColor || "success"}
-          onClick={props.onSuccess}
-        >
-          {props.successText || t("staffModal.Done")}
-        </Button> : {}}
-        
-      </Modal.Footer>
+      {props.onHide ||
+        (props.onSuccess && (
+          <Modal.Footer className="justify-content-between">
+            {props.onHide && (
+              <Button
+                className="float-left"
+                variant={props.hideColor || "secondary"}
+                onClick={props.onHide}
+              >
+                {props.hideText || t("staffModal.Cancel")}
+              </Button>
+            )}
+            {props.onSuccess && (
+              <Button
+                variant={props.successColor || "success"}
+                onClick={props.onSuccess}
+              >
+                {props.successText || t("staffModal.Done")}
+              </Button>
+            )}
+          </Modal.Footer>
+        ))}
     </Modal>
   );
 }

client/src/components/forms/EditSports.tsx

-import { Form } from "react-bootstrap";
+import { Button, Form } from "react-bootstrap";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import validator from "validator";
+import { addSport, editSport } from "../../api/sport";
 
 type FormData = {
   id: number;
   name: string;
 };
 
-function EditSports(props: any) {
+function EditSports(props: {
+  onSubmit?: Function;
+  id?: number;
+  name?: string;
+}) {
   const {
     control,
     handleSubmit,
@@ -18,17 +23,14 @@ function EditSports(props: any) {
   });
   const { t } = useTranslation();
 
-  const onSubmit = (data: FormData) => {
-    try {
-      /**
-       * Logic to handle authentication. Should be separated into a service in another file.
-       * await login(data);
-       *
-       *
-       * navigate("/boatManager");
-       */
-    } catch (e) {
-      alert("error");
+  const onSubmit = async (data: FormData) => {
+    if (props.id) {
+      const response = await editSport(data);
+    } else {
+      const response = await addSport(data);
+    }
+    if (props.onSubmit) {
+      props.onSubmit();
     }
   };
 
@@ -71,15 +73,15 @@ function EditSports(props: any) {
         rules={{
           required: {
             value: true,
-            message: t("Sports.messages.required", {
-              val: t("Sports.Name"),
+            message: t("sports.messages.required", {
+              val: t("sports.Name"),
             }),
           },
-          validate: (value: string) =>
-            validator.isAlphanumeric(value) ||
-            t("Sports.messages.required").toString(),
         }}
       />
+      <Button type="submit" variant="secondary" className="mt-2 w-100">
+        {t(props.id ? "sports.Edit" : "sports.Add")}
+      </Button>
     </Form>
   );
 }

client/src/pages/staff/Sports.tsx

@@ -6,27 +6,31 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import StaffModal from "../../components/StaffModal";
 import EditSports from "../../components/forms/EditSports";
-import { getSportsFromApi } from "../../api/sport";
+import { deleteSportInApi, getSportsFromApi } from "../../api/sport";
+import { Sport } from "../../types";
 
 function Sports() {
   const { t } = useTranslation();
-  const [editElement, setEditElement] = useState<Sport | undefined>(undefined);
-  const [deleteElement, setDeleteElement] = useState<any>(undefined);
-  const [addElement, setAddElement] = useState<any>(false);
+  const [editElement, setEditElement] = useState<Sport | null>(null);
+  const [deleteElement, setDeleteElement] = useState<Sport | null>(null);
+  const [addElement, setAddElement] = useState<boolean>(false);
   const [sports, setSports] = useState<Sport[]>([]);
 
   async function getSports() {
     const sports = await getSportsFromApi();
-    setSports(sports);
+    setSports(sports.result);
   }
 
-  function onSubmitAddSport() {
-    setAddElement(undefined);
+  async function deleteSport() {
+    if (!deleteElement) return;
+    const response = await deleteSportInApi({ id: deleteElement.id });
+    await getSports();
+    setDeleteElement(null);
   }
 
   useEffect(() => {
     getSports();
-  });
+  }, []);
 
   return (
     <div className="m-1 h-100">
@@ -89,44 +93,31 @@ function Sports() {
           {t("sports.AddSport")}
         </Button>
       </div>
-      <StaffModal
-        header={t("sports.AddSport")}
-        show={addElement}
-        successText={t("sports.Add")}
-        onHide={() => {
-          setAddElement(false);
-        }}
-        onSuccess={() => {
-          setAddElement(undefined);
-        }}
-      >
-        <EditSports></EditSports>
+      <StaffModal header={t("sports.AddSport")} show={addElement}>
+        <EditSports
+          onSubmit={async () => {
+            setAddElement(false);
+            await getSports();
+          }}
+        ></EditSports>
       </StaffModal>
-      <StaffModal
-        header={t("sports.EditSport")}
-        show={!!editElement}
-        successText={t("sports.Edit")}
-        onHide={() => {
-          setEditElement(undefined);
-        }}
-        onSuccess={() => {
-          setEditElement(undefined);
-        }}
-      >
-        <EditSports id={editElement?.id} name={editElement?.name}></EditSports>
+      <StaffModal header={t("sports.EditSport")} show={!!editElement}>
+        <EditSports
+          id={editElement?.id}
+          name={editElement?.name}
+          onSubmit={async () => {
+            setEditElement(null);
+            await getSports();
+          }}
+        ></EditSports>
       </StaffModal>
       <StaffModal
         header={t("sports.DeleteSport")}
         hideColor="secondary"
         successText={t("sports.Delete")}
         successColor="danger"
-        show={deleteElement}
-        onHide={() => {
-          setDeleteElement(undefined);
-        }}
-        onSuccess={() => {
-          setDeleteElement(undefined);
-        }}
+        show={!!deleteElement}
+        onSuccess={deleteSport}
       >
         <span>
           {t("sports.messages.DeleteText", { val: deleteElement?.name })}

client/src/react-app-env.d.ts

 /// <reference types="react-scripts" />
-
-declare interface Sport {
-  id: number;
-  name: string;
-}

client/src/types.ts

@@ -2,3 +2,9 @@ export interface Sport {
   id: number;
   name: string;
 }
+export interface Boat {
+  id: number;
+  name: string;
+  status: number;
+  type: number;
+}