diff --git a/frontend/src/api/astronaut.api.ts b/frontend/src/api/astronaut.api.ts index fdc676a..a05871f 100644 --- a/frontend/src/api/astronaut.api.ts +++ b/frontend/src/api/astronaut.api.ts @@ -1,8 +1,8 @@ // API Fetch -import { fetchApi } from './fetch'; +import { fetchApi } from "./fetch"; // Type -import { Planet } from './planet.api'; +import { Planet } from "./planet.api"; export type Astronaut = { id: number; @@ -16,7 +16,7 @@ export type GetAstronautListAPIResponse = Astronaut[]; export function getAstronautListFromAPI( options?: RequestInit, ): Promise { - return fetchApi('/astronauts', options); + return fetchApi("/astronauts", options); } type DeleteAstronautAPIResponse = { @@ -25,11 +25,11 @@ type DeleteAstronautAPIResponse = { export function deleteAstronautAPICall(astronautId: number) { return fetchApi(`/astronauts/${astronautId}`, { - method: 'DELETE', + method: "DELETE", }); } -export async function getOneAstronautFromAPI( +export async function getOneAstronautFromAPI( astronautId?: string, options?: RequestInit, ): Promise { @@ -41,8 +41,8 @@ export async function getOneAstronautFromAPI( } export type CreateUpdateAstronautRequestBody = Pick< -Astronaut, -'firstname' | 'lastname' + Astronaut, + "firstname" | "lastname" > & { originPlanetId: number }; export type CreateUpdateAstronautResponse = CreateUpdateAstronautRequestBody & { @@ -52,8 +52,8 @@ export type CreateUpdateAstronautResponse = CreateUpdateAstronautRequestBody & { export function createAstronautAPICall( astronautToCreate: CreateUpdateAstronautRequestBody, ): Promise { - return fetchApi('/astronauts/', { - method: 'POST', + return fetchApi("/astronauts/", { + method: "POST", body: JSON.stringify(astronautToCreate), }); } @@ -63,7 +63,7 @@ export function updateAstronautAPICall( astronautToUpdate: CreateUpdateAstronautRequestBody, ): Promise { return fetchApi(`/astronauts/${astronautId}`, { - method: 'PUT', + method: "PUT", body: JSON.stringify(astronautToUpdate), }); } diff --git a/frontend/src/components/HUDAstronautList/HUDAstronautList.tsx b/frontend/src/components/HUDAstronautList/HUDAstronautList.tsx index 5acf027..0d655d0 100644 --- a/frontend/src/components/HUDAstronautList/HUDAstronautList.tsx +++ b/frontend/src/components/HUDAstronautList/HUDAstronautList.tsx @@ -1,20 +1,20 @@ // React -import { CSSProperties } from 'react'; +import { CSSProperties } from "react"; // Libs -import classnames from 'classnames'; +import classnames from "classnames"; // Components -import { HUDWindow } from '../HUDWindow'; -import { HUDListItem } from '../HUDListItem'; -import { Flexbox } from '../Flexbox'; +import { HUDWindow } from "../HUDWindow"; +import { HUDListItem } from "../HUDListItem"; +import { Flexbox } from "../Flexbox"; // SVG -import IconSquareEdit from '../../assets/icon-square-edit.svg?react'; -import IconTrashAlt from '../../assets/icon-trash-alt.svg?react'; +import IconSquareEdit from "../../assets/icon-square-edit.svg?react"; +import IconTrashAlt from "../../assets/icon-trash-alt.svg?react"; // Styles -import styles from './HUDAstronautList.module.css'; +import styles from "./HUDAstronautList.module.css"; export type AstronautForList = { id: number; @@ -80,7 +80,7 @@ export function HUDAstronautList({ onDelete({ id, firstname, lastname, planetOfOrigin }); return ( - + navigate('/spaceship-admin'); + const handleCreateOrEditCancel = () => navigate("/spaceship-admin"); const handleAstronautFormCreate = async ( astronaut: CreateUpdateAstronautRequestBody, ) => { await createAstronautAPICall(astronaut); - navigate('/spaceship-admin'); + navigate("/spaceship-admin"); }; const handleAstronautFormEdit = async ( astronaut: CreateUpdateAstronautRequestBody, ) => { if (!astronautId) { - throw new Error('Missing astronautId, WRONG URL!'); + throw new Error("Missing astronautId, WRONG URL!"); } await updateAstronautAPICall(astronautId, astronaut); - navigate('/spaceship-admin'); + navigate("/spaceship-admin"); }; - const mode = astronautId ? 'edit' : 'create'; + const mode = astronautId ? "edit" : "create"; const handleAstronautFormSubmit = - mode === 'create' ? handleAstronautFormCreate : handleAstronautFormEdit; + mode === "create" ? handleAstronautFormCreate : handleAstronautFormEdit; const { currentPlanet } = useCurrentPlanet(); - const { isLoading, data } = useFetch((options?: RequestInit) => - getOneAstronautFromAPI(astronautId, options), + + const fetchAstronaut = useCallback( + (options?: RequestInit) => getOneAstronautFromAPI(astronautId, options), + [astronautId], ); + const { isLoading, data } = useFetch(fetchAstronaut); + return ( - {currentPlanet === 'NO_WHERE' ? ( + {currentPlanet === "NO_WHERE" ? (