From 2e1efeeb25b837c535f41acdec05613de9b78ab9 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/components/Visualizer.tsx            | 57 +++++++++++++++--------
 src/components/editor/BasketCourt.tsx    | 28 +++++-------
 src/components/editor/StepsTree.tsx      | 48 ++++++++++----------
 src/domains/TacticContentDomains.ts      |  2 -
 src/pages/Editor.tsx                     |  2 +-
 src/pages/VisualizerPage.tsx             | 58 +++++++++++++++---------
 src/service/LocalStorageTacticService.ts |  2 +-
 src/visualizer/VisualizerState.ts        |  9 +++-
 8 files changed, 118 insertions(+), 88 deletions(-)

diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx
index 2ae18ed..28b8dae 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"
@@ -11,7 +26,6 @@ import { CourtAction } from "./editor/CourtAction.tsx"
 import { BasketCourt, Court } from "./editor/BasketCourt.tsx"
 import { TacticService } from "../service/MutableTacticService.ts"
 
-
 export interface VisualizerProps {
     tacticId: number
     stepId?: number
@@ -33,13 +47,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) {
@@ -49,12 +61,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 {
@@ -64,7 +78,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>()
@@ -73,7 +92,6 @@ export function StepVisualizer({stepId, stepsTree, courtType, service}: StepVisu
 
     useEffect(() => {
         async function init() {
-
             const contentStepId = stepId ?? stepsTree.id
 
             const contentResult = await service.getContent(contentStepId)
@@ -124,11 +142,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 2eacbbc..c9a9837 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -715,7 +715,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/VisualizerPage.tsx b/src/pages/VisualizerPage.tsx
index 1b95dc7..f0302f7 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"
@@ -23,14 +27,18 @@ export function VisualizerPage({ guestMode }: VisualizerPageProps) {
 
     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(parseInt(idStr))}
-                              openEditor={() => navigate(`/tactic/${idStr}/edit`)} />
+        <ServedVisualizerPage
+            service={new APITacticService(parseInt(idStr))}
+            openEditor={() => navigate(`/tactic/${idStr}/edit`)}
+        />
     )
 }
 
@@ -45,9 +53,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(() => {
@@ -56,7 +67,7 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
             if (typeof contextResult === "string") {
                 setPanicMessage(
                     "There has been an error retrieving the editor initial context : " +
-                    contextResult,
+                        contextResult,
                 )
                 return
             }
@@ -67,7 +78,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
             }
@@ -116,7 +127,6 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
         [openEditor, service, state],
     )
 
-
     if (panicMessage) {
         return <p>{panicMessage}</p>
     }
@@ -125,7 +135,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 {
@@ -135,10 +151,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] =
@@ -177,12 +193,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/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 {