From bc3bf7ba6239ca906ed6851646027204300a0f2a Mon Sep 17 00:00:00 2001
From: Tarik Nasraoui <tariik.nasraoui@gmail.com>
Date: Mon, 30 Sep 2024 21:14:58 +0200
Subject: [PATCH] fix issue display create/edit form

---
 frontend/src/api/astronaut.api.ts             | 20 ++++-----
 .../HUDAstronautList/HUDAstronautList.tsx     | 18 ++++----
 .../CreateOrEditAstronaut.tsx                 | 43 +++++++++++--------
 3 files changed, 43 insertions(+), 38 deletions(-)

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<GetAstronautListAPIResponse>(
   options?: RequestInit,
 ): Promise<GetAstronautListAPIResponse> {
-  return fetchApi<GetAstronautListAPIResponse>('/astronauts', options);
+  return fetchApi<GetAstronautListAPIResponse>("/astronauts", options);
 }
 
 type DeleteAstronautAPIResponse = {
@@ -25,11 +25,11 @@ type DeleteAstronautAPIResponse = {
 
 export function deleteAstronautAPICall(astronautId: number) {
   return fetchApi<DeleteAstronautAPIResponse>(`/astronauts/${astronautId}`, {
-    method: 'DELETE',
+    method: "DELETE",
   });
 }
 
-export async function getOneAstronautFromAPI<Astronaut>(
+export async function getOneAstronautFromAPI(
   astronautId?: string,
   options?: RequestInit,
 ): Promise<Astronaut | undefined> {
@@ -41,8 +41,8 @@ export async function getOneAstronautFromAPI<Astronaut>(
 }
 
 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<CreateUpdateAstronautResponse> {
-  return fetchApi<CreateUpdateAstronautResponse>('/astronauts/', {
-    method: 'POST',
+  return fetchApi<CreateUpdateAstronautResponse>("/astronauts/", {
+    method: "POST",
     body: JSON.stringify(astronautToCreate),
   });
 }
@@ -63,7 +63,7 @@ export function updateAstronautAPICall(
   astronautToUpdate: CreateUpdateAstronautRequestBody,
 ): Promise<CreateUpdateAstronautRequestBody> {
   return fetchApi<CreateUpdateAstronautResponse>(`/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 (
-              <HUDListItem hasBorder={!isLastElement}>
+              <HUDListItem hasBorder={!isLastElement} key={astronautListIndex}>
                 <Flexbox
                   justifyContent="space-between"
                   className={styles.astronautlistContent}
diff --git a/frontend/src/pages/CreateOrEditAstronaut/CreateOrEditAstronaut.tsx b/frontend/src/pages/CreateOrEditAstronaut/CreateOrEditAstronaut.tsx
index 0baaf2e..1268239 100644
--- a/frontend/src/pages/CreateOrEditAstronaut/CreateOrEditAstronaut.tsx
+++ b/frontend/src/pages/CreateOrEditAstronaut/CreateOrEditAstronaut.tsx
@@ -1,12 +1,12 @@
 // Libs
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from "react-router-dom";
 
 // Components
-import { Flexbox } from '../../components/Flexbox';
-import { AstronautForm } from './AstronautForm';
-import { HUDPlanetDescription } from '../../components/HUDPlanetDescription';
-import { HUDWindowWarning } from '../../components/HUDWindowWarning';
-import { HUDWindowLoader } from '../../components/HUDWindowLoader';
+import { Flexbox } from "../../components/Flexbox";
+import { AstronautForm } from "./AstronautForm";
+import { HUDPlanetDescription } from "../../components/HUDPlanetDescription";
+import { HUDWindowWarning } from "../../components/HUDWindowWarning";
+import { HUDWindowLoader } from "../../components/HUDWindowLoader";
 
 // API
 import {
@@ -15,49 +15,54 @@ import {
   CreateUpdateAstronautRequestBody,
   getOneAstronautFromAPI,
   updateAstronautAPICall,
-} from '../../api/astronaut.api';
+} from "../../api/astronaut.api";
 
 // Hooks
-import { useFetch } from '../../hooks/useFetch';
+import { useFetch } from "../../hooks/useFetch";
 
 // Context
-import { useCurrentPlanet } from '../../contexts/SpaceTravelContext.tsx';
+import { useCurrentPlanet } from "../../contexts/SpaceTravelContext.tsx";
 
 // Styles
-import styles from './CreateOrEditAstronaut.module.css';
+import styles from "./CreateOrEditAstronaut.module.css";
+import { useCallback } from "react";
 
 export function CreateOrEditAstronaut() {
   const navigate = useNavigate();
   const { astronautId } = useParams();
-  const handleCreateOrEditCancel = () => 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<Astronaut>((options?: RequestInit) =>
-    getOneAstronautFromAPI(astronautId, options),
+
+  const fetchAstronaut = useCallback(
+    (options?: RequestInit) => getOneAstronautFromAPI(astronautId, options),
+    [astronautId],
   );
 
+  const { isLoading, data } = useFetch<Astronaut | undefined>(fetchAstronaut);
+
   return (
     <Flexbox flexDirection="column" className={styles.createoreditastronaut}>
-      {currentPlanet === 'NO_WHERE' ? (
+      {currentPlanet === "NO_WHERE" ? (
         <HUDWindowWarning
           warning="current planet: UnKnow"
           className={styles.createoreditastronautCurrentPlanetWarning}