add sports list

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);
+  }
+}
+
+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);
+  }
+}

client/src/components/UserLayout.tsx

-import {useTranslation} from "react-i18next";
-import {Outlet} from "react-router";
-import {useLocation} from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Outlet } from "react-router";
+import { useLocation } from "react-router-dom";
 import bg from "../assets/bg_mobile.png";
-import {Helmet} from "react-helmet-async";
+import { Helmet } from "react-helmet-async";
 
 function UserLayout() {
-    const {t} = useTranslation();
-    const {pathname} = useLocation();
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
 
-    return (
-        <div>
-            <Helmet>
-                <title>{t(`routes.${pathname}`)}</title>
-            </Helmet>
-            <div
-                style={{
-                    position: "fixed",
-                    height: "100vh",
-                    width: "100vw",
-                    backgroundImage: `url(${bg})`,
-                    backgroundSize: "cover",
-                    backgroundPosition: "center center",
-                    zIndex: -1,
-                }}
-            />
-            <Outlet/>
-        </div>
-    );
+  return (
+    <div>
+      <Helmet>
+        <title>{t(`routes.${pathname}`)}</title>
+      </Helmet>
+      <div
+        style={{
+          position: "fixed",
+          height: "100vh",
+          width: "100vw",
+          backgroundImage: `url(${bg})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center center",
+          zIndex: -1,
+        }}
+      />
+      <Outlet />
+    </div>
+  );
 }
 
 export default UserLayout;

client/src/components/forms/EditSports.tsx

@@ -9,13 +9,12 @@ type FormData = {
 };
 
 function EditSports(props: any) {
-
   const {
     control,
     handleSubmit,
     formState: { errors },
   } = useForm<FormData>({
-    mode: "onBlur"
+    mode: "onBlur",
   });
   const { t } = useTranslation();
 
@@ -35,14 +34,14 @@ function EditSports(props: any) {
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
-      {props.id &&
+      {props.id && (
         <Controller
           name="id"
           control={control}
-          defaultValue= {props.id}
+          defaultValue={props.id}
           render={({ field }) => (
             <div className="mb-2">
-              <Form.Label >{t("sports.Id")}</Form.Label>
+              <Form.Label>{t("sports.Id")}</Form.Label>
               <Form.Control disabled type="text" {...field} />
             </div>
           )}
@@ -52,10 +51,10 @@ function EditSports(props: any) {
               message: t("boatTypeOverview.messages.required", {
                 val: t("boatTypeOverview.Id"),
               }),
-            }
+            },
           }}
         />
-      }
+      )}
       <Controller
         name="name"
         control={control}
@@ -63,7 +62,7 @@ function EditSports(props: any) {
         render={({ field }) => (
           <div className="mb-2">
             <Form.Label>{t("sports.Name")}</Form.Label>
-            <Form.Control type="text" {...field} isInvalid={!!errors.name}/>
+            <Form.Control type="text" {...field} isInvalid={!!errors.name} />
             <Form.Control.Feedback type="invalid">
               {errors.name?.message}
             </Form.Control.Feedback>
@@ -77,8 +76,8 @@ function EditSports(props: any) {
             }),
           },
           validate: (value: string) =>
-          validator.isAlphanumeric(value) ||
-          t("Sports.messages.required").toString(),
+            validator.isAlphanumeric(value) ||
+            t("Sports.messages.required").toString(),
         }}
       />
     </Form>

client/src/pages/staff/Sports.tsx

@@ -6,26 +6,26 @@ 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";
 
 function Sports() {
   const { t } = useTranslation();
-  const [editElement, setEditElement] = useState<
-    { id: number; name: string } | undefined
-  >(undefined);
+  const [editElement, setEditElement] = useState<Sport | undefined>(undefined);
   const [deleteElement, setDeleteElement] = useState<any>(undefined);
   const [addElement, setAddElement] = useState<any>(false);
-  const [sports, setSports] = useState<{ id: number; name: string }[]>([]);
+  const [sports, setSports] = useState<Sport[]>([]);
+
+  async function getSports() {
+    const sports = await getSportsFromApi();
+    setSports(sports);
+  }
+
+  function onSubmitAddSport() {
+    setAddElement(undefined);
+  }
 
   useEffect(() => {
-    fetch("/api/sport")
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-        setSports(data);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
+    getSports();
   });
 
   return (

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

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

client/src/types.ts

+export interface Sport {
+  id: number;
+  name: string;
+}