diff --git a/client/src/api/sport.ts b/client/src/api/sport.ts
new file mode 100644
index 0000000000000000000000000000000000000000..59013652fff7f9e81c151712e174273e8372ffe5
--- /dev/null
+++ b/client/src/api/sport.ts
@@ -0,0 +1,23 @@
+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);
+ }
+}
diff --git a/client/src/components/UserLayout.tsx b/client/src/components/UserLayout.tsx
index 6c2a8d3312ff4941c21b3390ee566baf0d7a37c9..bc5af86b150b65793595351e7e3a3f2eb5c28f5f 100644
--- a/client/src/components/UserLayout.tsx
+++ b/client/src/components/UserLayout.tsx
@@ -1,32 +1,32 @@
-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;
diff --git a/client/src/components/forms/EditSports.tsx b/client/src/components/forms/EditSports.tsx
index 7feb406b7ed376c51651d14e11fefc1418057bbe..e41ecc23bcfd5c191cb7bb7ac6edf84112acbb97 100644
--- a/client/src/components/forms/EditSports.tsx
+++ b/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>
diff --git a/client/src/pages/staff/Sports.tsx b/client/src/pages/staff/Sports.tsx
index 478ea140c6f7db9d61d770e964f40ecf182b9e30..088dbfe0e19e915b480ed7fdd5ac389040eb36ec 100644
--- a/client/src/pages/staff/Sports.tsx
+++ b/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 (
diff --git a/client/src/react-app-env.d.ts b/client/src/react-app-env.d.ts
index 6431bc5fc6b2c932dfe5d0418fc667b86c18b9fc..2c432be84db1231ff0d034f88c27f4845327bd56 100644
--- a/client/src/react-app-env.d.ts
+++ b/client/src/react-app-env.d.ts
@@ -1 +1,6 @@
/// <reference types="react-scripts" />
+
+declare interface Sport {
+ id: number;
+ name: string;
+}
diff --git a/client/src/types.ts b/client/src/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef2a01cf597ae66d13b33ba5948702d92a5d7f91
--- /dev/null
+++ b/client/src/types.ts
@@ -0,0 +1,4 @@
+export interface Sport {
+ id: number;
+ name: string;
+}