From f9e436ea12ecb7a984b5fe494f53793eadc23aa4 Mon Sep 17 00:00:00 2001
From: maxime <maximebatista18@gmail.com>
Date: Tue, 26 Mar 2024 21:40:56 +0100
Subject: [PATCH] Apply suggestion

---
 src/App.tsx                              |  5 +-
 src/app/Fetcher.ts                       |  9 +++-
 src/components/Visualizer.tsx            | 62 +++++++++++++--------
 src/components/editor/BasketCourt.tsx    | 28 +++++-----
 src/components/editor/StepsTree.tsx      | 48 ++++++++---------
 src/domains/TacticContentDomains.ts      |  2 -
 src/pages/Editor.tsx                     |  2 +-
 src/pages/Settings.tsx                   | 69 +++++++++++++-----------
 src/pages/VisualizerPage.tsx             | 58 ++++++++++++--------
 src/service/APITacticService.ts          |  4 +-
 src/service/LocalStorageTacticService.ts |  2 +-
 src/visualizer/VisualizerState.ts        |  9 +++-
 12 files changed, 172 insertions(+), 126 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 489a9fc..f1ab122 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -147,8 +147,9 @@ export default function App() {
                                     path={"/tactic/:tacticId/view"}
                                     element={suspense(
                                         <LoggedInPage>
-                                            <VisualizerPage guestMode={false} />,
-                                        </LoggedInPage>
+                                            <VisualizerPage guestMode={false} />
+                                            ,
+                                        </LoggedInPage>,
                                     )}
                                 />
                                 <Route
diff --git a/src/app/Fetcher.ts b/src/app/Fetcher.ts
index 55e8f44..7d65435 100644
--- a/src/app/Fetcher.ts
+++ b/src/app/Fetcher.ts
@@ -68,9 +68,14 @@ export class Fetcher {
         }
 
         const nextToken = response.headers.get("Next-Authorization")!
-        const expirationDate = response.headers.get("Next-Authorization-Expiration-Date")!
+        const expirationDate = response.headers.get(
+            "Next-Authorization-Expiration-Date",
+        )!
         if (nextToken && expirationDate) {
-            this.auth = { token: nextToken, expirationDate: new Date(expirationDate) }
+            this.auth = {
+                token: nextToken,
+                expirationDate: new Date(expirationDate),
+            }
         }
 
         return response
diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx
index bf9577a..69a941a 100644
--- a/src/components/Visualizer.tsx
+++ b/src/components/Visualizer.tsx
@@ -1,8 +1,23 @@
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react"
 import { APITacticService } from "../service/APITacticService.ts"
-import { CourtType, StepContent, StepInfoNode, TacticComponent } from "../model/tactic/Tactic.ts"
+import {
+    CourtType,
+    StepContent,
+    StepInfoNode,
+    TacticComponent,
+} from "../model/tactic/Tactic.ts"
 import { getParent } from "../domains/StepsDomain.ts"
-import { computeRelativePositions, getPhantomInfo } from "../domains/PlayerDomains.ts"
+import {
+    computeRelativePositions,
+    getPhantomInfo,
+} from "../domains/PlayerDomains.ts"
 import { PlayerInfo, PlayerLike } from "../model/tactic/Player.ts"
 import { CourtPlayer } from "./editor/CourtPlayer.tsx"
 import { BALL_TYPE } from "../model/tactic/CourtObjects.ts"
@@ -12,7 +27,6 @@ import { BasketCourt, Court } from "./editor/BasketCourt.tsx"
 import { TacticService } from "../service/MutableTacticService.ts"
 import { useAppFetcher } from "../App.tsx"
 
-
 export interface VisualizerProps {
     tacticId: number
     stepId?: number
@@ -23,7 +37,10 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
     const [courtType, setCourtType] = useState<CourtType | null>()
     const [stepsTree, setStepsTree] = useState<StepInfoNode | null>()
     const fetcher = useAppFetcher()
-    const service = useMemo(() => new APITacticService(fetcher, tacticId), [tacticId])
+    const service = useMemo(
+        () => new APITacticService(fetcher, tacticId),
+        [tacticId],
+    )
 
     const isNotInit = !stepsTree || !courtType
 
@@ -35,13 +52,11 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
                 return
             }
 
-
             const rootStep = contextResult.stepsTree
             setStepsTree(rootStep)
             setCourtType(contextResult.courtType)
         }
-        if (isNotInit)
-            init()
+        if (isNotInit) init()
     }, [isNotInit, service])
 
     if (panicMessage) {
@@ -51,12 +66,14 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
         return <p>Loading...</p>
     }
 
-    return <StepVisualizer
-        courtType={courtType}
-        stepsTree={stepsTree}
-        stepId={stepId}
-        service={service}
-    />
+    return (
+        <StepVisualizer
+            courtType={courtType}
+            stepsTree={stepsTree}
+            stepId={stepId}
+            service={service}
+        />
+    )
 }
 
 export interface StepVisualizerProps {
@@ -66,7 +83,12 @@ export interface StepVisualizerProps {
     service: TacticService
 }
 
-export function StepVisualizer({stepId, stepsTree, courtType, service}: StepVisualizerProps) {
+export function StepVisualizer({
+    stepId,
+    stepsTree,
+    courtType,
+    service,
+}: StepVisualizerProps) {
     const [panicMessage, setPanicMessage] = useState<string | null>(null)
     const [content, setContent] = useState<StepContent | null>(null)
     const [parentContent, setParentContent] = useState<StepContent | null>()
@@ -75,7 +97,6 @@ export function StepVisualizer({stepId, stepsTree, courtType, service}: StepVisu
 
     useEffect(() => {
         async function init() {
-
             const contentStepId = stepId ?? stepsTree.id
 
             const contentResult = await service.getContent(contentStepId)
@@ -126,11 +147,10 @@ export interface VisualizerFrameProps {
 }
 
 export function VisualizerFrame({
-                                    content,
-                                    parentContent,
-                                    courtType,
-                                }: VisualizerFrameProps) {
-
+    content,
+    parentContent,
+    courtType,
+}: VisualizerFrameProps) {
     const courtRef = useRef<HTMLDivElement>(null)
 
     const courtBounds = useCallback(
diff --git a/src/components/editor/BasketCourt.tsx b/src/components/editor/BasketCourt.tsx
index 7c69d6d..903767f 100644
--- a/src/components/editor/BasketCourt.tsx
+++ b/src/components/editor/BasketCourt.tsx
@@ -2,7 +2,11 @@ import { ReactElement, ReactNode, RefObject, useEffect, useState } from "react"
 import { Action } from "../../model/tactic/Action"
 
 import { CourtAction } from "./CourtAction"
-import { ComponentId, TacticComponent } from "../../model/tactic/Tactic"
+import {
+    ComponentId,
+    CourtType,
+    TacticComponent,
+} from "../../model/tactic/Tactic"
 import PlainCourt from "../../assets/court/full_court.svg?react"
 import HalfCourt from "../../assets/court/half_court.svg?react"
 
@@ -34,7 +38,6 @@ export function BasketCourt({
     courtImage,
     courtRef,
 }: BasketCourtProps) {
-
     const [court, setCourt] = useState(courtRef.current)
 
     //force update once the court reference is set
@@ -49,15 +52,11 @@ export function BasketCourt({
             style={{ position: "relative" }}>
             {courtImage}
 
-            {court &&
-                parentComponents?.map((i) => renderComponent(i, true))}
-            {court &&
-                parentComponents?.flatMap((i) => renderActions(i, true))}
+            {court && parentComponents?.map((i) => renderComponent(i, true))}
+            {court && parentComponents?.flatMap((i) => renderActions(i, true))}
 
-            {court &&
-                components.map((i) => renderComponent(i, false))}
-            {court &&
-                components.flatMap((i) => renderActions(i, false))}
+            {court && components.map((i) => renderComponent(i, false))}
+            {court && components.flatMap((i) => renderActions(i, false))}
 
             {previewAction && (
                 <CourtAction
@@ -75,14 +74,11 @@ export function BasketCourt({
     )
 }
 
-export function Court({ courtType }: { courtType: string }) {
+export function Court({ courtType }: { courtType: CourtType }) {
+    const CourtSvg = courtType === "PLAIN" ? PlainCourt : HalfCourt
     return (
         <div className="court-image-div">
-            {courtType == "PLAIN" ? (
-                <PlainCourt className="court-image" />
-            ) : (
-                <HalfCourt className="court-image" />
-            )}
+            <CourtSvg className="court-image" />
         </div>
     )
 }
diff --git a/src/components/editor/StepsTree.tsx b/src/components/editor/StepsTree.tsx
index ddb19ee..0029a5c 100644
--- a/src/components/editor/StepsTree.tsx
+++ b/src/components/editor/StepsTree.tsx
@@ -15,12 +15,12 @@ export interface StepsTreeProps {
 }
 
 export default function StepsTree({
-                                      root,
-                                      selectedStepId,
-                                      onAddChildren,
-                                      onRemoveNode,
-                                      onStepSelected,
-                                  }: StepsTreeProps) {
+    root,
+    selectedStepId,
+    onAddChildren,
+    onRemoveNode,
+    onStepSelected,
+}: StepsTreeProps) {
     return (
         <div className="steps-tree">
             <StepsTreeNode
@@ -46,13 +46,13 @@ interface StepsTreeContentProps {
 }
 
 function StepsTreeNode({
-                           node,
-                           rootNode,
-                           selectedStepId,
-                           onAddChildren,
-                           onRemoveNode,
-                           onStepSelected,
-                       }: StepsTreeContentProps) {
+    node,
+    rootNode,
+    selectedStepId,
+    onAddChildren,
+    onRemoveNode,
+    onStepSelected,
+}: StepsTreeContentProps) {
     const ref = useRef<HTMLDivElement>(null)
 
     return (
@@ -67,8 +67,7 @@ function StepsTreeNode({
                             next: "step-piece-" + child.id,
                         },
                     ]}
-                    onSegmentsChanges={() => {
-                    }}
+                    onSegmentsChanges={() => {}}
                     forceStraight={true}
                     wavy={false}
                     readOnly={true}
@@ -80,9 +79,8 @@ function StepsTreeNode({
             <StepPiece
                 id={node.id}
                 isSelected={selectedStepId === node.id}
-                onAddButtonClicked={onAddChildren
-                    ? () => onAddChildren(node)
-                    : undefined
+                onAddButtonClicked={
+                    onAddChildren ? () => onAddChildren(node) : undefined
                 }
                 onRemoveButtonClicked={
                     rootNode.id === node.id || !onRemoveNode
@@ -126,13 +124,13 @@ interface StepPieceProps {
 }
 
 function StepPiece({
-                       id,
-                       isSelected,
-                       onAddButtonClicked,
-                       onRemoveButtonClicked,
-                       onSelected,
-                       children,
-                   }: StepPieceProps) {
+    id,
+    isSelected,
+    onAddButtonClicked,
+    onRemoveButtonClicked,
+    onSelected,
+    children,
+}: StepPieceProps) {
     return (
         <div
             id={"step-piece-" + id}
diff --git a/src/domains/TacticContentDomains.ts b/src/domains/TacticContentDomains.ts
index 7774f36..bd256c7 100644
--- a/src/domains/TacticContentDomains.ts
+++ b/src/domains/TacticContentDomains.ts
@@ -408,7 +408,6 @@ export function drainTerminalStateOnChildContent(
             childContent.components,
         )
 
-
         if (!childComponent) {
             //if the child does not contain the parent's component, add it to the children's content.
             childContent = {
@@ -432,7 +431,6 @@ export function drainTerminalStateOnChildContent(
                 },
                 childContent,
             )
-
         }
 
         // ensure that the component is a player
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index 3a909b6..7a9a929 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -716,7 +716,7 @@ function EditorPage({
 
     const contentNode = (
         <div id="content-div">
-            <div id="racks" >
+            <div id="racks">
                 <PlayerRack
                     id={"allies"}
                     objects={allies}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 0eff7a0..3ef7a95 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -52,7 +52,9 @@ export default function ProfileSettings() {
 
     useEffect(() => {
         passwordConfirmRef.current!.setCustomValidity(
-            password === confirmPassword ? "" : "Les mots de passe ne correspondent pas !"
+            password === confirmPassword
+                ? ""
+                : "Les mots de passe ne correspondent pas !",
         )
     }, [confirmPassword, password])
 
@@ -110,9 +112,8 @@ export default function ProfileSettings() {
                                 autoComplete="username"
                                 required
                                 placeholder="Nom d'utilisateur"
-
                                 value={name}
-                                onChange={e => setName(e.target.value)}
+                                onChange={(e) => setName(e.target.value)}
                             />
 
                             <label htmlFor="email">Adresse email</label>
@@ -124,9 +125,8 @@ export default function ProfileSettings() {
                                 placeholder={"Adresse email"}
                                 autoComplete="email"
                                 required
-
                                 value={email}
-                                onChange={e => setEmail(e.target.value)}
+                                onChange={(e) => setEmail(e.target.value)}
                             />
 
                             <label htmlFor="password">Mot de passe</label>
@@ -137,12 +137,13 @@ export default function ProfileSettings() {
                                 type="password"
                                 placeholder={"Mot de passe"}
                                 autoComplete="new-password"
-
                                 value={password}
-                                onChange={e => setPassword(e.target.value)}
+                                onChange={(e) => setPassword(e.target.value)}
                             />
 
-                            <label htmlFor="confirmPassword">Confirmez le mot de passe</label>
+                            <label htmlFor="confirmPassword">
+                                Confirmez le mot de passe
+                            </label>
                             <input
                                 ref={passwordConfirmRef}
                                 className="settings-input"
@@ -151,14 +152,13 @@ export default function ProfileSettings() {
                                 type="password"
                                 autoComplete="new-password"
                                 placeholder={"Confirmation du mot de passe"}
-
                                 value={confirmPassword}
-                                onChange={e => setConfirmPassword(e.target.value)}
+                                onChange={(e) =>
+                                    setConfirmPassword(e.target.value)
+                                }
                             />
 
-                            <button
-                                className="settings-button"
-                                type="submit">
+                            <button className="settings-button" type="submit">
                                 Mettre à jour
                             </button>
                         </form>
@@ -207,25 +207,28 @@ function ProfileImageInputPopup({ show, onHide }: ProfileImageInputPopupProps) {
             if (e.key === "Escape") onHide()
         }
 
-        window.addEventListener('keyup', onKeyUp)
-        return () => window.removeEventListener('keyup', onKeyUp)
+        window.addEventListener("keyup", onKeyUp)
+        return () => window.removeEventListener("keyup", onKeyUp)
     }, [onHide])
 
-    const handleForm = useCallback(async (e: FormEvent) => {
-        e.preventDefault()
+    const handleForm = useCallback(
+        async (e: FormEvent) => {
+            e.preventDefault()
 
-        const url = urlRef.current!.value
-        const errors = await updateAccount(fetcher, {
-            profilePicture: url,
-        })
-        if (errors.length !== 0) {
-            setErrorMessages(errors)
-            return
-        }
-        setUser({ ...user!, profilePicture: url })
-        setErrorMessages([])
-        onHide()
-    }, [fetcher, onHide, setUser, user])
+            const url = urlRef.current!.value
+            const errors = await updateAccount(fetcher, {
+                profilePicture: url,
+            })
+            if (errors.length !== 0) {
+                setErrorMessages(errors)
+                return
+            }
+            setUser({ ...user!, profilePicture: url })
+            setErrorMessages([])
+            onHide()
+        },
+        [fetcher, onHide, setUser, user],
+    )
 
     if (!show) return <></>
 
@@ -243,7 +246,9 @@ function ProfileImageInputPopup({ show, onHide }: ProfileImageInputPopupProps) {
                         {msg}
                     </div>
                 ))}
-                <label id="profile-picture-popup-subtitle" htmlFor="profile-picture">
+                <label
+                    id="profile-picture-popup-subtitle"
+                    htmlFor="profile-picture">
                     Saisissez le lien vers votre nouvelle photo de profil
                 </label>
                 <input
@@ -260,7 +265,7 @@ function ProfileImageInputPopup({ show, onHide }: ProfileImageInputPopupProps) {
                     required
                     placeholder={"lien vers une image"}
                     value={link}
-                    onChange={e => setLink(e.target.value)}
+                    onChange={(e) => setLink(e.target.value)}
                 />
                 <div id="profile-picture-popup-footer">
                     <button className={"settings-button"} onClick={onHide}>
@@ -270,7 +275,7 @@ function ProfileImageInputPopup({ show, onHide }: ProfileImageInputPopupProps) {
                         type="submit"
                         className={"settings-button"}
                         value="Valider"
-                        />
+                    />
                 </div>
             </form>
         </dialog>
diff --git a/src/pages/VisualizerPage.tsx b/src/pages/VisualizerPage.tsx
index f16a349..489dcab 100644
--- a/src/pages/VisualizerPage.tsx
+++ b/src/pages/VisualizerPage.tsx
@@ -1,7 +1,11 @@
 import { ServiceError, TacticService } from "../service/MutableTacticService.ts"
 import { useNavigate, useParams } from "react-router-dom"
-import { useCallback, useEffect, useMemo, useReducer, useState } from "react"
-import { VisualizerState, VisualizerStateActionKind, visualizerStateReducer } from "../visualizer/VisualizerState.ts"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import {
+    useVisualizer,
+    VisualizerState,
+    VisualizerStateActionKind,
+} from "../visualizer/VisualizerState.ts"
 import { getParent } from "../domains/StepsDomain.ts"
 import { mapToParentContent } from "../domains/TacticContentDomains.ts"
 import StepsTree from "../components/editor/StepsTree.tsx"
@@ -25,14 +29,18 @@ export function VisualizerPage({ guestMode }: VisualizerPageProps) {
     const fetcher = useAppFetcher()
     if (guestMode || !idStr) {
         return (
-            <ServedVisualizerPage service={LocalStorageTacticService.init()}
-                                  openEditor={() => navigate("/tactic/edit-guest")} />
+            <ServedVisualizerPage
+                service={LocalStorageTacticService.init()}
+                openEditor={() => navigate("/tactic/edit-guest")}
+            />
         )
     }
 
     return (
-        <ServedVisualizerPage service={new APITacticService(fetcher, parseInt(idStr))}
-                              openEditor={() => navigate(`/tactic/${idStr}/edit`)} />
+        <ServedVisualizerPage
+            service={new APITacticService(fetcher, parseInt(idStr))}
+            openEditor={() => navigate(`/tactic/${idStr}/edit`)}
+        />
     )
 }
 
@@ -47,9 +55,12 @@ interface ServedVisualizerPageProps {
     openEditor: () => void
 }
 
-function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps) {
+function ServedVisualizerPage({
+    service,
+    openEditor,
+}: ServedVisualizerPageProps) {
     const [panicMessage, setPanicMessage] = useState<string>()
-    const [state, dispatch] = useReducer(visualizerStateReducer, null)
+    const [state, dispatch] = useVisualizer(null)
     const [canEdit, setCanEdit] = useState(false)
 
     useEffect(() => {
@@ -58,7 +69,7 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
             if (typeof contextResult === "string") {
                 setPanicMessage(
                     "There has been an error retrieving the editor initial context : " +
-                    contextResult,
+                        contextResult,
                 )
                 return
             }
@@ -69,7 +80,7 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
             if (typeof contentResult === "string") {
                 setPanicMessage(
                     "There has been an error retrieving the tactic's root step content : " +
-                    contentResult,
+                        contentResult,
                 )
                 return
             }
@@ -118,7 +129,6 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
         [openEditor, service, state],
     )
 
-
     if (panicMessage) {
         return <p>{panicMessage}</p>
     }
@@ -127,7 +137,13 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
         return <p>Retrieving tactic context. Please wait...</p>
     }
 
-    return <VisualizerPageContent state={state} service={visualizerService} showEditButton={canEdit} />
+    return (
+        <VisualizerPageContent
+            state={state}
+            service={visualizerService}
+            showEditButton={canEdit}
+        />
+    )
 }
 
 interface VisualizerPageContentProps {
@@ -137,10 +153,10 @@ interface VisualizerPageContentProps {
 }
 
 function VisualizerPageContent({
-                                   state: { content, parentContent, stepId, stepsTree, courtType, tacticName },
-                                   service,
-                                   showEditButton,
-                               }: VisualizerPageContentProps) {
+    state: { content, parentContent, stepId, stepsTree, courtType, tacticName },
+    service,
+    showEditButton,
+}: VisualizerPageContentProps) {
     const [isStepsTreeVisible, setStepsTreeVisible] = useState(true)
 
     const [editorContentCurtainWidth, setEditorContentCurtainWidth] =
@@ -179,12 +195,12 @@ function VisualizerPageContent({
                         onClick={() => setStepsTreeVisible((b) => !b)}>
                         ETAPES
                     </button>
-                    {showEditButton && <button
-                        onClick={() => service.openEditor()}>
-                        EDITER
-                    </button>}
+                    {showEditButton && (
+                        <button onClick={() => service.openEditor()}>
+                            EDITER
+                        </button>
+                    )}
                 </div>
-
             </div>
 
             <div id="editor-div">
diff --git a/src/service/APITacticService.ts b/src/service/APITacticService.ts
index 0e6ba05..718c22c 100644
--- a/src/service/APITacticService.ts
+++ b/src/service/APITacticService.ts
@@ -16,7 +16,9 @@ export class APITacticService implements MutableTacticService {
     }
 
     async canBeEdited(): Promise<boolean> {
-        const response = await this.fetcher.fetchAPIGet(`tactics/${this.tacticId}/can-edit`)
+        const response = await this.fetcher.fetchAPIGet(
+            `tactics/${this.tacticId}/can-edit`,
+        )
         const { canEdit } = await response.json()
         return canEdit
     }
diff --git a/src/service/LocalStorageTacticService.ts b/src/service/LocalStorageTacticService.ts
index 7e2b009..32b14c2 100644
--- a/src/service/LocalStorageTacticService.ts
+++ b/src/service/LocalStorageTacticService.ts
@@ -33,7 +33,7 @@ export class LocalStorageTacticService implements MutableTacticService {
             )
             localStorage.setItem(
                 GUEST_MODE_STEP_CONTENT_STORAGE_KEY + 1,
-                JSON.stringify(<StepContent>{components: []})
+                JSON.stringify(<StepContent>{ components: [] }),
             )
         }
 
diff --git a/src/visualizer/VisualizerState.ts b/src/visualizer/VisualizerState.ts
index cea3fc2..6c80d20 100644
--- a/src/visualizer/VisualizerState.ts
+++ b/src/visualizer/VisualizerState.ts
@@ -1,4 +1,5 @@
 import { CourtType, StepContent, StepInfoNode } from "../model/tactic/Tactic.ts"
+import { useReducer } from "react"
 
 export interface VisualizerState {
     stepId: number
@@ -9,7 +10,7 @@ export interface VisualizerState {
     parentContent: StepContent | null
 }
 
-export enum VisualizerStateActionKind {
+export const enum VisualizerStateActionKind {
     INIT,
     SET_CONTENTS,
 }
@@ -26,7 +27,11 @@ export type VisualizerStateAction =
           stepId: number
       }
 
-export function visualizerStateReducer(
+export function useVisualizer(initialState: VisualizerState | null) {
+    return useReducer(visualizerStateReducer, initialState)
+}
+
+function visualizerStateReducer(
     state: VisualizerState | null,
     action: VisualizerStateAction,
 ): VisualizerState | null {