Merge pull request #9 from MobilityData/feat/1601-remove-legacy-routing

feat: replace legacy router

Author: Alessandro100

src/app/AppContainer.tsx

@@ -3,17 +3,17 @@
 import * as React from 'react';
 import { Box, LinearProgress } from '@mui/material';
 import type ContextProviderProps from './interface/ContextProviderProps';
-import { useLocation } from 'react-router-dom';
+import { usePathname } from 'next/navigation';
 import { selectLoadingApp } from './store/selectors';
 import { useSelector } from 'react-redux';
 
 const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
   const isAppLoading = useSelector(selectLoadingApp);
-  const location = useLocation();
+  const pathname = usePathname();
 
   React.useLayoutEffect(() => {
     window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
-  }, [location.pathname]);
+  }, [pathname]);
 
   return (
     <>

src/app/screens/Analytics/GBFSFeedAnalytics/GBFSFeedAnalyticsTable.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { type MRT_Cell, type MRT_ColumnDef } from 'material-react-table';
 import { format } from 'date-fns';
 import { type GBFSFeedMetrics } from '../types';
-import { useNavigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
 import { Box } from '@mui/material';
 import { OpenInNew } from '@mui/icons-material';
 
@@ -13,7 +13,7 @@ import { OpenInNew } from '@mui/icons-material';
 export const useTableColumns = (): Array<
   MRT_ColumnDef<GBFSFeedMetrics & { error_count: number }>
 > => {
-  const navigate = useNavigate();
+  const router = useRouter();
 
   return useMemo<
     Array<MRT_ColumnDef<GBFSFeedMetrics & { error_count: number }>>
@@ -98,7 +98,7 @@ export const useTableColumns = (): Array<
                 }}
                 className={'navigable-list-item'}
                 onClick={() => {
-                  navigate(`/metrics/gbfs/versions?version=${version}`);
+                  router.push(`/metrics/gbfs/versions?version=${version}`);
                 }}
               >
                 {version}
@@ -147,6 +147,6 @@ export const useTableColumns = (): Array<
         size: 200,
       },
     ],
-    [navigate],
+    [router],
   );
 };

src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx

@@ -25,7 +25,7 @@ import {
 } from '@mui/material';
 
 import '../analytics.css';
-import { useLocation } from 'react-router-dom';
+import { useSearchParams } from 'next/navigation';
 import {
   fetchAvailableFilesStart,
   selectFile,
@@ -46,16 +46,15 @@ export const getAnalyticsBucketEndpoint = (): string | undefined =>
   globalAnalyticsBucketEndpoint;
 
 export default function GBFSFeedAnalytics(): React.ReactElement {
-  const { search } = useLocation();
-  const params = new URLSearchParams(search);
+  const searchParams = useSearchParams();
   const { config } = useRemoteConfig();
   const [schemaPathFilters, setSchemaPathFilters] = React.useState<string[]>(
     [],
   );
 
-  const versionFilter = params.get('version');
+  const versionFilter = searchParams.get('version');
   const schemaPathInitFilter = decodeURIComponent(
-    params.get('schemaPath') ?? '',
+    searchParams.get('schemaPath') ?? '',
   );
 
   const dispatch = useDispatch();

src/app/screens/Analytics/GBFSNoticeAnalytics/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useSearchParams, useRouter } from 'next/navigation';
 
 import {
   MaterialReactTable,
@@ -27,10 +27,9 @@ import { type GBFSNoticeMetrics } from '../types';
 import { useRemoteConfig } from '../../../context/RemoteConfigProvider';
 
 export default function GBFSNoticeAnalytics(): React.ReactElement {
-  const navigateTo = useNavigate();
-  const { search } = useLocation();
-  const params = new URLSearchParams(search);
-  const noticeCode = params.get('noticeCode');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const noticeCode = searchParams.get('noticeCode');
   const [data, setData] = useState<GBFSNoticeMetrics[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -191,7 +190,7 @@ export default function GBFSNoticeAnalytics(): React.ReactElement {
                 sx={{ mb: 2 }}
                 startIcon={<ListAltOutlined />}
                 onClick={() => {
-                  navigateTo(
+                  router.push(
                     `/metrics/gbfs/feeds?schemaPath=${encodeURIComponent(
                       metrics.schema_path,
                     )}`,

src/app/screens/Analytics/GBFSVersionAnalytics/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useSearchParams, useRouter } from 'next/navigation';
 
 import {
   MaterialReactTable,
@@ -36,13 +36,13 @@ import MUITooltip from '@mui/material/Tooltip';
 import { GBFS_LINK } from '../../../constants/Navigation';
 
 export default function GBFSVersionAnalytics(): React.ReactElement {
-  const navigateTo = useNavigate();
+  const router = useRouter();
   const [data, setData] = useState<GBFSVersionMetrics[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const { config } = useRemoteConfig();
-  const params = new URLSearchParams(useLocation().search);
-  const versionFilter = params.get('version');
+  const searchParams = useSearchParams();
+  const versionFilter = searchParams.get('version');
   const initialFilter = useMemo(() => {
     if (versionFilter != null) {
       return [{ id: 'version', value: versionFilter }];
@@ -131,7 +131,7 @@ export default function GBFSVersionAnalytics(): React.ReactElement {
         },
       },
     ],
-    [data, navigateTo],
+    [data, router],
   );
 
   const table = useMaterialReactTable({
@@ -214,7 +214,7 @@ export default function GBFSVersionAnalytics(): React.ReactElement {
                 sx={{ mb: 2 }}
                 startIcon={<ListAltOutlined />}
                 onClick={() => {
-                  navigateTo(`/metrics/gbfs/feeds?version=${metrics.version}`);
+                  router.push(`/metrics/gbfs/feeds?version=${metrics.version}`);
                 }}
               >
                 Show Feeds

src/app/screens/Analytics/GTFSFeatureAnalytics/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useSearchParams, useRouter } from 'next/navigation';
 import {
   MaterialReactTable,
   type MRT_ColumnDef,
@@ -38,10 +38,9 @@ import {
 } from '../../../utils/consts';
 
 export default function GTFSFeatureAnalytics(): React.ReactElement {
-  const navigateTo = useNavigate();
-  const { search } = useLocation();
-  const params = new URLSearchParams(search);
-  const featureName = params.get('featureName');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const featureName = searchParams.get('featureName');
   const [data, setData] = useState<FeatureMetrics[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -281,7 +280,7 @@ export default function GTFSFeatureAnalytics(): React.ReactElement {
                 sx={{ mb: 2 }}
                 startIcon={<ListAltOutlined />}
                 onClick={() => {
-                  navigateTo(
+                  router.push(
                     `/metrics/gtfs/feeds?featureName=${metrics.feature}`,
                   );
                 }}

src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { type MRT_Cell, type MRT_ColumnDef } from 'material-react-table';
 import { format } from 'date-fns';
 import { type GTFSFeedMetrics } from '../types';
-import { useNavigate } from 'react-router-dom';
+import { useRouter } from 'next/navigation';
 import { Box, IconButton, MenuItem, Stack, Tooltip } from '@mui/material';
 import { OpenInNew } from '@mui/icons-material';
 import {
@@ -30,7 +30,7 @@ export const useTableColumns = (
   avgWarnings: number,
   avgInfos: number,
 ): Array<MRT_ColumnDef<GTFSFeedMetrics>> => {
-  const navigate = useNavigate();
+  const router = useRouter();
 
   return useMemo<Array<MRT_ColumnDef<GTFSFeedMetrics>>>(
     () => [
@@ -166,7 +166,7 @@ export const useTableColumns = (
                 }}
                 className={'navigable-list-item'}
                 onClick={() => {
-                  navigate(`/metrics/gtfs/notices?noticeCode=${error}`);
+                  router.push(`/metrics/gtfs/notices?noticeCode=${error}`);
                 }}
               >
                 {error}
@@ -208,7 +208,7 @@ export const useTableColumns = (
                 }}
                 className={'navigable-list-item'}
                 onClick={() => {
-                  navigate(`/metrics/gtfs/notices?noticeCode=${warning}`);
+                  router.push(`/metrics/gtfs/notices?noticeCode=${warning}`);
                 }}
               >
                 {warning}
@@ -258,7 +258,7 @@ export const useTableColumns = (
                 }}
                 className={'navigable-list-item'}
                 onClick={() => {
-                  navigate(`/metrics/gtfs/notices?noticeCode=${info}`);
+                  router.push(`/metrics/gtfs/notices?noticeCode=${info}`);
                 }}
               >
                 {info}
@@ -318,7 +318,7 @@ export const useTableColumns = (
                           style={{ cursor: 'pointer', marginLeft: '10px' }}
                           className={'navigable-list-item'}
                           onClick={() => {
-                            navigate(
+                            router.push(
                               `/metrics/gtfs/features?featureName=${featureData.feature}`,
                             );
                           }}
@@ -349,7 +349,7 @@ export const useTableColumns = (
       },
     ],
     [
-      navigate,
+      router,
       uniqueErrors,
       uniqueWarnings,
       uniqueInfos,

src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx

@@ -19,7 +19,7 @@ import {
 } from '@mui/material';
 
 import '../analytics.css';
-import { useLocation } from 'react-router-dom';
+import { useSearchParams } from 'next/navigation';
 import {
   fetchAvailableFilesStart,
   selectFile,
@@ -42,13 +42,12 @@ export const getAnalyticsBucketEndpoint = (): string | undefined =>
   globalAnalyticsBucketEndpoint;
 
 export default function GTFSFeedAnalytics(): React.ReactElement {
-  const { search } = useLocation();
-  const params = new URLSearchParams(search);
+  const searchParams = useSearchParams();
   const { config } = useRemoteConfig();
 
-  const severity = params.get('severity');
-  const noticeCode = params.get('noticeCode');
-  const featureName = params.get('featureName');
+  const severity = searchParams.get('severity');
+  const noticeCode = searchParams.get('noticeCode');
+  const featureName = searchParams.get('featureName');
 
   const dispatch = useDispatch();
   const data = useSelector(selectGTFSFeedMetrics);

src/app/screens/Analytics/GTFSNoticeAnalytics/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useSearchParams, useRouter } from 'next/navigation';
 
 import {
   MaterialReactTable,
@@ -36,10 +36,9 @@ import { WEB_VALIDATOR_LINK } from '../../../constants/Navigation';
 import { useRemoteConfig } from '../../../context/RemoteConfigProvider';
 
 export default function GTFSNoticeAnalytics(): React.ReactElement {
-  const navigateTo = useNavigate();
-  const { search } = useLocation();
-  const params = new URLSearchParams(search);
-  const noticeCode = params.get('noticeCode');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const noticeCode = searchParams.get('noticeCode');
   const [data, setData] = useState<NoticeMetrics[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -251,7 +250,7 @@ export default function GTFSNoticeAnalytics(): React.ReactElement {
                 sx={{ mb: 2 }}
                 startIcon={<ListAltOutlined />}
                 onClick={() => {
-                  navigateTo(
+                  router.push(
                     `/metrics/gtfs/feeds?severity=${metrics.severity}&noticeCode=${metrics.notice}`,
                   );
                 }}

src/app/screens/CompleteRegistration.tsx

@@ -16,7 +16,7 @@ import {
 } from '@mui/material';
 import { useAppDispatch } from '../hooks';
 import { refreshUserInformation } from '../store/profile-reducer';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useRouter, useSearchParams } from 'next/navigation';
 import {
   selectUserProfileStatus,
   selectRegistrationError,
@@ -28,13 +28,13 @@ export default function CompleteRegistration(): React.ReactElement {
   const auth = getAuth();
   const user = auth.currentUser;
   const dispatch = useAppDispatch();
-  const navigateTo = useNavigate();
+  const router = useRouter();
 
   const userProfileStatus = useSelector(selectUserProfileStatus);
   const registrationError = useSelector(selectRegistrationError);
 
   const [isSubmitted, setIsSubmitted] = React.useState(false);
-  const [searchParams] = useSearchParams();
+  const searchParams = useSearchParams();
 
   const termsAndConditionsElement = (
     <span>
@@ -67,9 +67,9 @@ export default function CompleteRegistration(): React.ReactElement {
   React.useEffect(() => {
     if (userProfileStatus === 'registered') {
       if (searchParams.has('add_feed')) {
-        navigateTo(ADD_FEED_TARGET, { state: { from: 'registration' } });
+        router.push(ADD_FEED_TARGET + '?from=registration');
       } else {
-        navigateTo(ACCOUNT_TARGET);
+        router.push(ACCOUNT_TARGET);
       }
     }
   }, [userProfileStatus]);