Merge pull request #131 from MobilityData/feat/26-legacy-router-migration-4

feat: legacy router migration 4

Author: Alessandro100

package.json

@@ -41,7 +41,6 @@
     "react-hook-form": "^7.52.1",
     "react-map-gl": "^8.0.4",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.16.0",
     "react-window": "^2.1.2",
     "recharts": "^2.12.7",
     "redux-persist": "^6.0.0",
@@ -104,7 +103,6 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-google-recaptcha": "^2.1.8",
     "@types/react-redux": "^7.1.27",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-window": "^2.0.0",
     "@types/redux-saga": "^0.10.5",
     "@typescript-eslint/eslint-plugin": "^6.7.0",

src/app/App.css

@@ -22,8 +22,7 @@ interface Props {
  * SECURITY: Direct access to /static/ routes is blocked at the proxy level
  * (middleware returns 404). This route is only accessible via proxy rewrite
  * from the clean URLs like /feeds/gtfs/mdb-123.
- * NOTE: In the future we will use private route `_static` but due to our legacy handler `[...slug]` catching all routes, we need to use a public route and block access at the proxy for now.
- *
+ * TODO: Now that legacy catch-all route is removed, change this to a private route `_static` and update proxy and links accordingly.
  */
 export default async function StaticFeedLayout({
   children,

src/app/App.tsx

@@ -13,7 +13,6 @@ import {
 
 /**
  * Registers the cross-tab auth broadcast channels once for the App Router tree.
- * This replaces the legacy BrowserRouter-based registration in Router.tsx.
  */
 export function AuthBroadcastChannelSync(): ReactElement | null {
   const router = useRouter();

src/app/AppContainer.tsx

@@ -8,7 +8,8 @@ import { store } from '../store/store';
 /**
  * This component is used to wrap the entire application with Redux Provider
  * It provides the Redux store to all components in the app
- * IMPORTANT: This does not include the PersistGate, which is used in the page component to delay rendering until the store is rehydrated
+ * IMPORTANT: This does not include the PersistGate, which is applied by
+ * route-level wrappers where delayed rendering is required.
  * This allows for a fast initial render, but makes it possible for components to access the store before it's fully rehydrated.
  * This also allows for us to have SSG pages that use Redux. It also allows for these pages to be rendered purely in HTML on the server side without waiting for Redux Persist to rehydrate the store.
  * Use the `useRehydrated` hook to check rehydration status if needed.

src/app/[locale]/[...slug]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-// TODO: Once the [...slug] catch-all route is removed, replace this wrapper
-// with a (protected) route group layout that provides auth guarding at the layout level.
+// TODO: Replace this wrapper with a (protected) route group layout that
+// provides auth guarding at the layout level.
 // targetStatus can be used to scope groups further (e.g. (authenticated), (unverified)).
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';

src/app/[locale]/feeds/[feedDataType]/[feedId]/static/layout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-// TODO: Once the [...slug] catch-all route is removed, replace this wrapper
-// with a (store) route group layout that provides PersistGate at the layout level.
+// TODO: Replace this wrapper with a (store) route group layout that provides
+// PersistGate at the layout level.
 import { Suspense } from 'react';
 import { PersistGate } from 'redux-persist/integration/react';
 import { persistor } from '../store/store';