Simplify the router id 🪪.

gmarty · Jun 4, 2024 · 384c8fb · 384c8fb
1 parent 750ea3d
commit 384c8fb
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>