Merge pull request #11 from TarikNasraoui/fix/isseue-edit-create-form

[FRONT] fix issue display create/edit form
TarikNasraoui · Sep 30, 2024 · db675bb · db675bb
2 parents 19fb224 + bc3bf7b
commit db675bb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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}