Adjust frontend URLs to match API endpoints (#695)

Signed-off-by: Marvin A. Ruder <[email protected]>
marvinruder · Nov 12, 2023 · 1a1f0ff · 1a1f0ff
1 parent d1a61a8
commit 1a1f0ff
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 17 deletions.
diff --git a/packages/frontend/src/components/stock/layouts/StockRow.tsx b/packages/frontend/src/components/stock/layouts/StockRow.tsx
@@ -190,7 +190,7 @@ export const StockRow = (props: StockRowProps): JSX.Element => {
             <MenuItem
               onClick={() => setOptionsMenuOpen(false)}
               component={NavLink}
-              to={`/stock/${props.stock.ticker}`}
+              to={`${stocksEndpointPath}/${props.stock.ticker}`}
               target="_blank"
             >
               <ListItemIcon>

diff --git a/packages/frontend/src/content/modules/Stock/StockHeader.tsx b/packages/frontend/src/content/modules/Stock/StockHeader.tsx
@@ -181,7 +181,7 @@ export const StockHeader = (props: StockHeaderProps): JSX.Element => {
         <EditStock stock={props.stock} getStocks={props.getStock} onClose={() => setEditDialogOpen(false)} />
       </Dialog>
       <Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
-        <DeleteStock stock={props.stock} onClose={() => setDeleteDialogOpen(false)} navigateTo="/stock" />
+        <DeleteStock stock={props.stock} onClose={() => setDeleteDialogOpen(false)} navigateTo={stocksEndpointPath} />
       </Dialog>
     </>
   );

diff --git a/packages/frontend/src/content/modules/Watchlist/WatchlistHeader.tsx b/packages/frontend/src/content/modules/Watchlist/WatchlistHeader.tsx
@@ -112,7 +112,7 @@ export const WatchlistHeader = (props: WatchlistHeaderProps): JSX.Element => {
             <DeleteWatchlist
               watchlist={props.watchlist}
               onClose={() => setDeleteDialogOpen(false)}
-              navigateTo="/watchlist"
+              navigateTo={watchlistsEndpointPath}
             />
           </Dialog>
         </>

diff --git a/packages/frontend/src/content/modules/WatchlistSummary/WatchlistCard.tsx b/packages/frontend/src/content/modules/WatchlistSummary/WatchlistCard.tsx
@@ -41,7 +41,12 @@ const WatchlistCard = (props: WatchlistCardProps): JSX.Element => {
   return (
     <Card>
       <CardActionArea>
-        <Link to={`/watchlist/${props.watchlist?.id}`} component={NavLink} color="inherit" underline="none">
+        <Link
+          to={`${watchlistsEndpointPath}/${props.watchlist?.id}`}
+          component={NavLink}
+          color="inherit"
+          underline="none"
+        >
           <CardContent>
             <Grid container justifyContent="space-between">
               <Grid item display="flex" alignItems="center" maxWidth={isFavorites ? "calc(100% - 36px)" : undefined}>

diff --git a/packages/frontend/src/layouts/SidebarLayout/Header/Buttons/SearchButton.tsx b/packages/frontend/src/layouts/SidebarLayout/Header/Buttons/SearchButton.tsx
@@ -83,7 +83,7 @@ export const HeaderSearchButton = (): JSX.Element => {
       if (e.key === "Enter") {
         if (stocks.length) {
           handleClose();
-          navigate(`/stock/${stocks[0].ticker}`);
+          navigate(`${stocksEndpointPath}/${stocks[0].ticker}`);
         }
       }
     };
@@ -267,7 +267,7 @@ export const HeaderSearchButton = (): JSX.Element => {
                     <Fragment key={stock.ticker}>
                       <ListItem
                         component={NavLink}
-                        to={`/stock/${stock.ticker}`}
+                        to={`${stocksEndpointPath}/${stock.ticker}`}
                         onClick={handleClose}
                         sx={{
                           py: 1.5,

diff --git a/packages/frontend/src/layouts/SidebarLayout/Sidebar/SidebarContent.tsx b/packages/frontend/src/layouts/SidebarLayout/Sidebar/SidebarContent.tsx
@@ -18,7 +18,12 @@ import {
   Grid,
   Skeleton,
 } from "@mui/material";
-import { ADMINISTRATIVE_ACCESS } from "@rating-tracker/commons";
+import {
+  ADMINISTRATIVE_ACCESS,
+  stocksEndpointPath,
+  usersEndpointPath,
+  watchlistsEndpointPath,
+} from "@rating-tracker/commons";
 import React, { FC, Fragment, useContext, useState } from "react";
 import { NavLink } from "react-router-dom";
 
@@ -168,7 +173,7 @@ export const SidebarContent = (): JSX.Element => {
                   sx={{ ".MuiTouchRipple-child": { backgroundColor: theme.colors.alpha.trueWhite[30] } }}
                   component={NavLink}
                   onClick={closeSidebar}
-                  to="/stock"
+                  to={stocksEndpointPath}
                   startIcon={<ListIcon />}
                 >
                   All Stocks
@@ -179,7 +184,7 @@ export const SidebarContent = (): JSX.Element => {
                   sx={{ ".MuiTouchRipple-child": { backgroundColor: theme.colors.alpha.trueWhite[30] } }}
                   component={NavLink}
                   onClick={closeSidebar}
-                  to="/watchlist"
+                  to={watchlistsEndpointPath}
                   startIcon={<CollectionsBookmarkIcon />}
                 >
                   Watchlists
@@ -197,7 +202,7 @@ export const SidebarContent = (): JSX.Element => {
                       sx={{ ".MuiTouchRipple-child": { backgroundColor: theme.colors.alpha.trueWhite[30] } }}
                       component={NavLink}
                       onClick={closeSidebar}
-                      to="/usermanagement"
+                      to={usersEndpointPath}
                       startIcon={<ManageAccountsIcon />}
                     >
                       User Management

diff --git a/packages/frontend/src/router.tsx b/packages/frontend/src/router.tsx
@@ -1,5 +1,11 @@
 import { Box, CircularProgress } from "@mui/material";
-import { User, accountEndpointPath } from "@rating-tracker/commons";
+import {
+  User,
+  accountEndpointPath,
+  stocksEndpointPath,
+  usersEndpointPath,
+  watchlistsEndpointPath,
+} from "@rating-tracker/commons";
 import NProgress from "nprogress";
 import { Suspense, lazy, useState, useEffect, createContext } from "react";
 import type { RouteObject } from "react-router";
@@ -212,7 +218,7 @@ const AuthWrapper = (props: AuthWrapperProps): JSX.Element => {
       props.isLoginPage ? (
         // If an authenticated user tries to access the login page, redirect them to their desired page
         // If no redirect was specified, redirect to the stock page
-        <Navigate to={searchParams.get("redirect") || "/stock"} replace />
+        <Navigate to={searchParams.get("redirect") || stocksEndpointPath} replace />
       ) : (
         <Page /> // If any other page was requested, show it
       )
@@ -276,23 +282,23 @@ const routes: RouteObject[] = [
     ),
     children: [
       {
-        path: "stock",
+        path: stocksEndpointPath,
         element: <StockList />,
       },
       {
-        path: "stock/:ticker",
+        path: stocksEndpointPath + "/:ticker",
         element: <Stock />,
       },
       {
-        path: "usermanagement",
+        path: usersEndpointPath,
         element: <UserManagement />,
       },
       {
-        path: "watchlist",
+        path: watchlistsEndpointPath,
         element: <WatchlistSummary />,
       },
       {
-        path: "watchlist/:id",
+        path: watchlistsEndpointPath + "/:id",
         element: <Watchlist />,
       },
     ],