From 384c8fbc73bbaeec8d026f69592c70fbd7ef80ef Mon Sep 17 00:00:00 2001
From: edo999 <edo999@gmail.com>
Date: Tue, 4 Jun 2024 15:05:10 +0100
Subject: [PATCH] =?UTF-8?q?Simplify=20the=20router=20id=20=F0=9F=AA=AA.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/GfxContainer.js     | 35 ++++++++++++++----------------
 src/containers/ResourceExplorer.js |  8 +++----
 src/containers/RoomsContainer.js   |  4 +++-
 src/containers/ScriptContainer.js  | 10 ++++-----
 4 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/containers/GfxContainer.js b/src/containers/GfxContainer.js
index 938754c..4661410 100644
--- a/src/containers/GfxContainer.js
+++ b/src/containers/GfxContainer.js
@@ -9,18 +9,17 @@ import ResourceMetadata from '../components/ResourceMetadata';
 import GfxCanvasContainer from './GfxCanvasContainer';
 
 const GfxContainer = ({ titlegfx, costumegfx, roomgfx }) => {
-  const isTitleGfx = !!useMatch('/titlegfx/:gfcId');
-  const isCostumeGfx = !!useMatch('/costumegfx/:gfcId');
-  const isRoomGfx = !!useMatch('/roomgfx/:gfcId');
-  const { gfcId } = useParams();
+  const isTitleGfx = !!useMatch('/titlegfx/:id');
+  const isCostumeGfx = !!useMatch('/costumegfx/:id');
+  const isRoomGfx = !!useMatch('/roomgfx/:id');
+  const { id } = useParams();
 
-  const currentGfcId =
-    typeof gfcId === 'undefined' ? null : parseInt(gfcId, 10);
+  const currentId = typeof id === 'undefined' ? null : parseInt(id, 10);
   const gfc = isTitleGfx
-    ? titlegfx[currentGfcId]
+    ? titlegfx[currentId]
     : isCostumeGfx
-      ? costumegfx[currentGfcId]
-      : roomgfx[currentGfcId];
+      ? costumegfx[currentId]
+      : roomgfx[currentId];
 
   if (!gfc) {
     return null;
@@ -31,31 +30,29 @@ const GfxContainer = ({ titlegfx, costumegfx, roomgfx }) => {
       <PrimaryColumn>
         <TitleGfxList
           gfx={titlegfx}
-          currentId={isTitleGfx ? currentGfcId : null}
+          currentId={isTitleGfx ? currentId : null}
         />
         <CostumeGfxList
           gfx={costumegfx}
-          currentId={isCostumeGfx ? currentGfcId : null}
+          currentId={isCostumeGfx ? currentId : null}
         />
         <RoomGfxList
           gfx={roomgfx}
-          currentId={isRoomGfx ? currentGfcId : null}
+          currentId={isRoomGfx ? currentId : null}
         />
       </PrimaryColumn>
       <Main>
         <MainHeader
           title={
-            currentGfcId === null
+            currentId === null
               ? 'Graphics'
               : isTitleGfx
-                ? `Title graphics tileset ${currentGfcId}`
+                ? `Title graphics tileset ${currentId}`
                 : isCostumeGfx
-                  ? `Costume graphics tileset ${currentGfcId}`
-                  : `Room graphics tileset ${currentGfcId}`
+                  ? `Costume graphics tileset ${currentId}`
+                  : `Room graphics tileset ${currentId}`
           }>
-          {currentGfcId !== null && (
-            <ResourceMetadata metadata={gfc.metadata} />
-          )}
+          {currentId !== null && <ResourceMetadata metadata={gfc.metadata} />}
         </MainHeader>
         <GfxCanvasContainer
           gfx={gfc.gfx}
diff --git a/src/containers/ResourceExplorer.js b/src/containers/ResourceExplorer.js
index 0a4265a..00cd0cf 100644
--- a/src/containers/ResourceExplorer.js
+++ b/src/containers/ResourceExplorer.js
@@ -67,7 +67,7 @@ const ResourceExplorer = () => {
           />
         }>
         <Route
-          path=":gfcId"
+          path=":id"
           element={
             <GfxContainer
               titlegfx={resources.titles}
@@ -87,7 +87,7 @@ const ResourceExplorer = () => {
           />
         }>
         <Route
-          path=":gfcId"
+          path=":id"
           element={
             <GfxContainer
               titlegfx={resources.titles}
@@ -107,7 +107,7 @@ const ResourceExplorer = () => {
           />
         }>
         <Route
-          path=":gfcId"
+          path=":id"
           element={
             <GfxContainer
               titlegfx={resources.titles}
@@ -130,7 +130,7 @@ const ResourceExplorer = () => {
         path="/scripts"
         element={<ScriptContainer scripts={resources.scripts} />}>
         <Route
-          path=":scriptId"
+          path=":id"
           element={<ScriptContainer scripts={resources.scripts} />}
         />
       </Route>
diff --git a/src/containers/RoomsContainer.js b/src/containers/RoomsContainer.js
index b50ad16..038e7c2 100644
--- a/src/containers/RoomsContainer.js
+++ b/src/containers/RoomsContainer.js
@@ -28,7 +28,9 @@ const RoomsContainer = ({ rooms, titles, roomgfx, globdata }) => {
 
   const currentId = typeof id === 'undefined' ? null : parseInt(id, 10);
   const baseTiles = roomgfx?.find(({ metadata }) => metadata.id === 0);
-  let roomgfc = roomgfx?.find(({ metadata }) => metadata.id === room?.tileset);
+  const roomgfc = roomgfx?.find(
+    ({ metadata }) => metadata.id === room?.tileset,
+  );
 
   useEffect(() => {
     const room =
diff --git a/src/containers/ScriptContainer.js b/src/containers/ScriptContainer.js
index 20eded8..1080e00 100644
--- a/src/containers/ScriptContainer.js
+++ b/src/containers/ScriptContainer.js
@@ -5,20 +5,18 @@ import ScriptsList from '../components/ScriptsList';
 import Script from '../components/Script';
 
 const ScriptContainer = ({ scripts }) => {
-  const { scriptId } = useParams();
-
-  const currentScriptId =
-    typeof scriptId === 'undefined' ? null : parseInt(scriptId, 10);
+  const { id } = useParams();
 
+  const currentId = typeof id === 'undefined' ? null : parseInt(id, 10);
   const script =
-    scripts.find(({ metadata }) => metadata.id === currentScriptId) || null;
+    scripts.find(({ metadata }) => metadata.id === currentId) || null;
 
   return (
     <>
       <PrimaryColumn>
         <ScriptsList
           scripts={scripts}
-          currentId={currentScriptId}
+          currentId={currentId}
         />
       </PrimaryColumn>
       <Main>