Server heavy refactoring 4 (not functionnal)

server/traque-front/app/admin/components/liveMap.jsx

@@ -1,12 +1,14 @@
 import { Fragment, useEffect, useState } from "react";
+import Image from 'next/image';
 import { Arrow, CircleZone, PolygonZone, Position, Tag } from "@/components/layer";
 import { CustomMapContainer, MapEventListener, MapPan } from "@/components/map";
-import useAdmin from "@/hook/useAdmin";
-import { GameState } from "@/util/types";
-import { mapZooms } from "@/util/configurations";
+import { Show } from "@/components/Show";
+import { useAdmin } from "@/context/adminContext";
+import { GameState } from "@/config/types";
+import { mapZooms } from "@/config/configurations";
 
 export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows }) {
-    const { zones, teams, getTeam, gameState } = useAdmin();
+    const { gameState, teams, zones, getTeam } = useAdmin();
     const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
     const [isFullScreen, setIsFullScreen] = useState(false);
 
@@ -31,21 +33,15 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
         return String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
     }
 
-    function Zones() {
-        if (!(showZones && gameState == GameState.PLAYING)) return null;
-
-        return (<>
-            <PolygonZone polygon={zones.currentZone} color={mapStyle.currentZoneColor} />
-            <PolygonZone polygon={zones.nextZone} color={mapStyle.nextZoneColor} />
-        </>);
-    }
-
     return (
         <div className={`${isFullScreen ? "fixed inset-0 z-[9999]" : "relative h-full w-full"}`}>
             <CustomMapContainer mapStyle={mapStyle}>
                 {isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
                 <MapEventListener onDragStart={() => setIsFocusing(false)} onWheel={() => setIsFocusing(false)} />
-                <Zones/>
+                <Show when={showZones && gameState == GameState.PLAYING}>
+                    <PolygonZone polygon={zones.currentZone} color={mapStyle.currentZoneColor} />
+                    <PolygonZone polygon={zones.nextZone} color={mapStyle.nextZoneColor} />
+                </Show>
                 {teams.map((team) => team && <Fragment key={team.id}>
                     <CircleZone circle={team.startingArea} color={mapStyle.placementZoneColor} display={gameState == GameState.PLACEMENT && showZones}>
                         <Tag text={team.name} display={showNames} />
@@ -63,8 +59,8 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
                 </div>
             }
             <button className="absolute top-4 right-4 z-[1000] cursor-pointer bg-white p-3 rounded-full shadow-lg drop-shadow" onClick={() => setIsFullScreen(!isFullScreen)}>
-                <img src={`/icons/fullscreen.png`} className="w-8 h-8" />
+                <Image src={`/icons/fullscreen.png`} alt="full-screen" className="w-8 h-8" />
             </button>
         </div>
-    )
+    );
 }

server/traque-front/app/admin/components/teamSidePanel.jsx

@@ -1,8 +1,10 @@
 import { env } from 'next-runtime-env';
 import { useEffect, useState } from "react";
-import useAdmin from "@/hook/useAdmin";
+import Image from 'next/image';
 import { getStatus } from '@/util/functions';
-import { Colors, GameState } from '@/util/types';
+import { Colors, GameState } from '@/config/types';
+import { useAdmin } from '@/context/adminContext';
+import { Show } from '@/components/Show';
 
 function DotLine({ label, value }) {
     return (
@@ -22,7 +24,7 @@ function DotLine({ label, value }) {
 function IconValue({ color, icon, value }) {
     return (
         <div className="flex flex-row gap-2">
-            <img src={`/icons/${icon}/${color}.png`} className="w-6 h-6" />
+            <Image src={`/icons/${icon}/${color}.png`} alt="icon" className="w-6 h-6" />
             <p style={{color: Colors[color]}}>{value}</p>
         </div>
     );
@@ -31,7 +33,7 @@ function IconValue({ color, icon, value }) {
 export default function TeamSidePanel({ selectedTeamId, onClose }) {
     const { getTeam, gameState } = useAdmin();
     const [imgSrc, setImgSrc] = useState("");
-    const [_, setRefreshKey] = useState(0);
+    const [dateNow, setDateNow] = useState(0);
     const team = getTeam(selectedTeamId);
     const NO_VALUE = "XX";
     const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
@@ -39,18 +41,16 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
 
     useEffect(() => {
         setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
-    }, [selectedTeamId]);
-
-    if (!team) return null;
+    }, [SERVER_URL, selectedTeamId]);
 
     useEffect(() => {
-        const interval = setInterval(() => {
-            setRefreshKey(prev => prev + 1);
-        }, 1000);
+        const interval = setInterval(() => setDateNow(Date.now()), 1000);
 
         return () => clearInterval(interval);
     }, []);
 
+    if (!team) return null;
+
     function formatTime(startDate, endDate) {
         // startDate in milliseconds
         if (endDate == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
@@ -75,7 +75,6 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
 
     function formatDate(date) {
         // date in milliseconds
-        const dateNow = Date.now();
         if (date == null || dateNow <= date || dateNow - date >= 1_000_000) return NO_VALUE + "s";
         return `${Math.floor((dateNow - date) / 1000)}s`;
     }
@@ -86,13 +85,13 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
             <p className="text-2xl font-bold text-center" style={{color: getStatus(team, gameState).color}}>{getStatus(team, gameState).label}</p>
             <p className="text-4xl font-bold text-center">{team.name ?? NO_VALUE}</p>
             <div className="flex justify-center">
-                <img src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
+                <Image src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
             </div>
             <div className="flex flex-row justify-between items-center">
                 <IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="user" value={team.sockets?.length ?? NO_VALUE} />
                 <IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
                 <IconValue
-                    color={team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
+                    color={team.lastCurrentLocationDate && (dateNow - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
                     icon="location" value={formatDate(team.lastCurrentLocationDate)}
                 />
             </div>
@@ -100,22 +99,18 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
                 <DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
                 <DotLine label="ID de capture" value={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
             </div>
-            { gameState != GameState.FINISHED &&
-                <div>
-                    <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
-                    <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
-                </div>
-            }
-            { (gameState == GameState.PLAYING || gameState == GameState.FINISHED) && false &&
-                <div>
-                    <DotLine label="Distance" value={formatDistance(team.distance)} />
-                    <DotLine label="Temps de survie" value={formatTime(0, team.finishDate || Date.now())} />
-                    <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || Date.now())} />
-                    <DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
-                    <DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
-                    <DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
-                </div>
-            }
+            <Show when={gameState == GameState.FINISHED}>
+                <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
+                <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
+            </Show>
+            <Show when={gameState == GameState.PLAYING || gameState == GameState.FINISHED}>
+                <DotLine label="Distance" value={formatDistance(team.distance)} />
+                <DotLine label="Temps de survie" value={formatTime(0, team.finishDate || dateNow)} />
+                <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || dateNow)} />
+                <DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
+                <DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
+                <DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
+            </Show>
             <div>
                 <DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
                 <DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />

server/traque-front/app/admin/components/teamViewer.jsx

@@ -1,20 +1,28 @@
+import Image from 'next/image';
 import { List } from '@/components/list';
-import useAdmin from '@/hook/useAdmin';
 import { getStatus } from '@/util/functions';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useAdmin } from '@/context/adminContext';
 
 function TeamViewerItem({ team }) {
     const { gameState } = useAdmin();
+    const [dateNow, setDateNow] = useState(0);
     const status = getStatus(team, gameState);
     const NO_VALUE = "XX";
+    
+    useEffect(() => {
+        const interval = setInterval(() => setDateNow(Date.now()), 1000);
+
+        return () => clearInterval(interval);
+    }, []);
 
     return (
         <div className={`w-full flex flex-row gap-3 p-2 ${team.captured ? 'bg-gray-200' : 'bg-white'} justify-between`}>
             <div className='flex flex-row items-center gap-3'>
                 <div className='flex flex-row gap-1'>
-                    <img src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} className="w-4 h-4" />
-                    <img src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} className="w-4 h-4" />
-                    <img src={`/icons/location/${team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
+                    <Image src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
+                    <Image src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
+                    <Image src={`/icons/location/${team.lastCurrentLocationDate && (dateNow - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
                 </div>
                 <p className="text-xl font-bold">{team.name ?? NO_VALUE}</p>
             </div>