STUD-300: Implement 404 "Page Not Found" error page for NEWM Studio

apps/studio/src/App.tsx

@@ -9,6 +9,7 @@ import { GOOGLE_CLIENT_ID } from "@newm-web/env";
 import {
   LDProvider,
   Maintenance,
+  PageNotFound,
   UnsupportedBrowserBanner,
 } from "@newm-web/components";
 import {
@@ -121,6 +122,9 @@ const App = () => {
                         }
                         path="create-profile/*"
                       />
+
+                      { /* Catch-all route for 404 Page Not Found */ }
+                      <Route element={ <PageNotFound /> } path="*" />
                     </Routes>
                   </BrowserRouter>
                 </Background>

apps/studio/src/pages/createProfile/CreateProfile.tsx

@@ -1,8 +1,10 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import { Box, Container, useTheme } from "@mui/material";
 import { WizardForm } from "@newm-web/elements";
 import * as Yup from "yup";
 import { getUpdatedValues } from "@newm-web/utils";
+import { useLocation } from "react-router-dom";
+import { PageNotFound } from "@newm-web/components";
 import Begin from "./Begin";
 import SelectNickname from "./SelectNickname";
 import SelectRole from "./SelectRole";
@@ -21,6 +23,9 @@ import {
 
 const CreateProfile: FunctionComponent = () => {
   const theme = useTheme();
+  const currentPathLocation = useLocation();
+  const [isValidPath, setIsValidPath] = useState(true);
+
   const { data: roles = [] } = useGetRolesQuery();
   const {
     data: { firstName, lastName, role, location, nickname } = emptyProfile,
@@ -59,6 +64,30 @@ const CreateProfile: FunctionComponent = () => {
     updateInitialProfile(updatedValues);
   };
 
+  /**
+   * Checks if the current path is a valid path or requires a 404 page.
+   */
+  useEffect(() => {
+    const validPaths = [
+      "/create-profile",
+      "/create-profile/what-is-your-first-name",
+      "/create-profile/what-is-your-last-name",
+      "/create-profile/what-should-we-call-you",
+      "/create-profile/what-is-your-role",
+      "/create-profile/what-is-your-location",
+      "/create-profile/complete",
+    ];
+
+    const normalizePath = (path: string) => path.replace(/\/+$/, ""); // Remove trailing slashes
+    const currentPath = normalizePath(currentPathLocation.pathname);
+
+    setIsValidPath(validPaths.map(normalizePath).includes(currentPath));
+  }, [currentPathLocation.pathname]);
+
+  if (!isValidPath) {
+    return <PageNotFound />;
+  }
+
   return (
     <Box
       sx={ {

apps/studio/src/pages/forgotPassword/ForgotPassword.tsx

@@ -1,9 +1,11 @@
 import * as Yup from "yup";
 import { Box, Container } from "@mui/material";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import { FormikHelpers, FormikValues } from "formik";
 import theme from "@newm-web/theme";
 import { WizardForm } from "@newm-web/elements";
+import { useLocation } from "react-router";
+import { PageNotFound } from "@newm-web/components";
 import InitiateReset from "./InitiateReset";
 import VerifyEmail from "./VerifyEmail";
 import ResetPassword from "./ResetPassword";
@@ -13,6 +15,8 @@ import { ResponsiveNEWMLogo } from "../../components";
 
 const ForgotPassword: FunctionComponent = () => {
   const dispatch = useAppDispatch();
+  const location = useLocation();
+  const [isValidPath, setIsValidPath] = useState(true); // State to track path validity
 
   const initialValues = {
     authCode: "",
@@ -38,6 +42,23 @@ const ForgotPassword: FunctionComponent = () => {
     setSubmitting(false);
   };
 
+  useEffect(() => {
+    const validPaths = [
+      "/forgot-password",
+      "/forgot-password/verification",
+      "/forgot-password/reset",
+    ];
+
+    const normalizePath = (path: string) => path.replace(/\/+$/, ""); // Remove trailing slashes
+    const currentPath = normalizePath(location.pathname);
+
+    setIsValidPath(validPaths.map(normalizePath).includes(currentPath));
+  }, [location.pathname]);
+
+  if (!isValidPath) {
+    return <PageNotFound />;
+  }
+
   return (
     <Container
       maxWidth={ false }

apps/studio/src/pages/home/Home.tsx

@@ -3,6 +3,7 @@ import { FunctionComponent, useState } from "react";
 import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import MenuIcon from "@mui/icons-material/Menu";
+import { PageNotFound } from "@newm-web/components";
 import SideBar from "./SideBar";
 import UploadSong from "./uploadSong/UploadSong";
 import Library from "./library/Library";
@@ -78,6 +79,8 @@ const Home: FunctionComponent = () => {
           <Route element={ <Wallet /> } path="wallet" />
           <Route element={ <Profile /> } path="profile" />
           <Route element={ <Settings /> } path="settings" />
+
+          <Route element={ <PageNotFound /> } path="*" />
         </Routes>
       </Box>
     </Box>

apps/studio/src/pages/home/library/EditSong.tsx

@@ -257,10 +257,11 @@ const EditSong: FunctionComponent = () => {
    * Ensure user is returned to first step on refresh since form
    * contents are not persisted.
    *
-   * TODO: remove this when form values are persisted on refresh
+   * TODO: remove the navigation when form values are persisted on refresh
    */
   useEffect(() => {
     navigate(`/home/library/edit-song/${songId}`, { replace: true });
+
     // useNavigate doesn't return memoized function, including it
     // as dependency will run this when navigation occurs. Exclude
     // to only run on mount.

apps/studio/src/pages/home/library/Library.tsx

@@ -1,6 +1,7 @@
 import { Container } from "@mui/material";
 import { FunctionComponent } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
+import { PageNotFound } from "@newm-web/components";
 import EditSong from "./EditSong";
 import Discography from "./Discography";
 import ViewDetails from "./ViewDetails";
@@ -23,7 +24,7 @@ const Library: FunctionComponent = () => (
       <Route element={ <EditSong /> } path="edit-song/:songId*" />
       <Route element={ <ViewDetails /> } path="view-details/:songId" />
 
-      <Route element={ <Navigate to="/home/library" replace /> } path="*" />
+      <Route element={ <PageNotFound redirectUrl="/home/library" /> } path="*" />
     </Routes>
   </Container>
 );

apps/studio/src/pages/home/owners/Owners.tsx

@@ -1,6 +1,7 @@
 import { Container } from "@mui/material";
 import { FunctionComponent } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
+import { PageNotFound } from "@newm-web/components";
 import Owner from "./Owner";
 import OwnersList from "./OwnersList";
 
@@ -21,7 +22,10 @@ const Owners: FunctionComponent = () => (
       <Route element={ <OwnersList /> } path="/" />
       <Route element={ <Owner /> } path="/:userId" />
 
-      <Route element={ <Navigate to="/home/collaborators" replace /> } path="*" />
+      <Route
+        element={ <PageNotFound redirectUrl="/home/collaborators" /> }
+        path="*"
+      />
     </Routes>
   </Container>
 );

apps/studio/src/pages/home/uploadSong/UploadSong.tsx

@@ -1,9 +1,10 @@
 import { Box, Container, Typography } from "@mui/material";
 import { WizardForm } from "@newm-web/elements";
 import { FormikHelpers, FormikValues } from "formik";
-import { FunctionComponent, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { FunctionComponent, useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import * as Yup from "yup";
+import { PageNotFound } from "@newm-web/components";
 import AdvancedSongDetails from "./AdvancedSongDetails";
 import BasicSongDetails from "./BasicSongDetails";
 import ConfirmAgreement from "./ConfirmAgreement";
@@ -28,6 +29,9 @@ export interface UploadSongFormValues extends UploadSongThunkRequest {
 
 const UploadSong: FunctionComponent = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+
+  const [isValidPath, setIsValidPath] = useState(true);
 
   const { data: genres = [] } = useGetGenresQuery();
   const { data: roles = [] } = useGetRolesQuery();
@@ -139,17 +143,37 @@ const UploadSong: FunctionComponent = () => {
 
   /**
    * Ensure user is returned to first step on refresh since form
-   * contents are not persisted.
+   * contents are not persisted. If user navigates to an invalid
+   * path, redirect to 404 page.
    *
-   * TODO: remove this when form values are persisted on refresh
+   * TODO: remove the navigation when form values are persisted on refresh
    */
   useEffect(() => {
-    navigate("/home/upload-song", { replace: true });
+    const validPaths = [
+      "/home/upload-song",
+      "/home/upload-song/advanced-details",
+      "/home/upload-song/confirm",
+    ];
+
+    // Remove trailing slashes to compare paths
+    const normalizePath = (path: string) => path.replace(/\/+$/, "");
+    const currentPath = normalizePath(location.pathname);
+
+    if (!validPaths.includes(currentPath)) {
+      setIsValidPath(false);
+    } else {
+      setIsValidPath(true);
+      navigate("/home/upload-song", { replace: true });
+    }
     // useNavigate doesn't return memoized function, including it
     // as dependency will run this when navigation occurs. Exclude
     // to only run on mount.
     // eslint-disable-next-line
-  }, []);
+  }, [location.pathname]);
+
+  if (!isValidPath) {
+    return <PageNotFound redirectUrl="/home/upload-song" />;
+  }
 
   const validations = {
     agreesToCoverArtGuidelines: commonYupValidation.agreesToCoverArtGuidelines,

apps/studio/src/pages/signUp/SignUp.tsx

@@ -1,8 +1,10 @@
 import * as Yup from "yup";
 import { Box, useTheme } from "@mui/material";
 import { FormikValues } from "formik";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import { WizardForm } from "@newm-web/elements";
+import { useLocation } from "react-router";
+import { PageNotFound } from "@newm-web/components";
 import Verification from "./Verification";
 import Welcome from "./Welcome";
 import { commonYupValidation, useAppDispatch } from "../../common";
@@ -18,6 +20,9 @@ interface AccountValues {
 const SignUp: FunctionComponent = () => {
   const theme = useTheme();
   const dispatch = useAppDispatch();
+  const location = useLocation();
+  const [isValidPath, setIsValidPath] = useState(true); // State to track path validity
+
   const initialValues: AccountValues = {
     authCode: "",
     confirmPassword: "",
@@ -55,6 +60,19 @@ const SignUp: FunctionComponent = () => {
     dispatch(createAccount({ authCode, confirmPassword, email, newPassword }));
   };
 
+  useEffect(() => {
+    const validPaths = ["/sign-up", "/sign-up/verification"];
+
+    const normalizePath = (path: string) => path.replace(/\/+$/, ""); // Remove trailing slashes
+    const currentPath = normalizePath(location.pathname);
+
+    setIsValidPath(validPaths.map(normalizePath).includes(currentPath));
+  }, [location.pathname]);
+
+  if (!isValidPath) {
+    return <PageNotFound redirectUrl="/sign-up" />;
+  }
+
   return (
     <Box
       sx={ {

packages/assets/src/index.ts

@@ -1,7 +1,5 @@
 import AddImage from "./lib/icons/AddImage";
 import AddSong from "./lib/icons/AddSong";
-import artistAgreementPreview from "./lib/images/artist-agreement-preview.jpg";
-import bgImage from "./lib/images/bg-img.webp";
 import Charli3Logo from "./lib/icons/Charli3Logo";
 import CheckboxIcon from "./lib/icons/CheckboxIcon";
 import CheckCircle from "./lib/icons/CheckCircle";
@@ -19,26 +17,29 @@ import ItunesLogo from "./lib/icons/ItunesLogo";
 import NEWMLogo from "./lib/icons/NEWMLogo";
 import NEWMLogoSmInverse from "./lib/icons/NEWMLogoSmInverse";
 import NEWMMarketplaceLogo from "./lib/icons/NEWMMarketplaceLogo";
-import { default as NEWMMonster } from "./lib/images/NEWMMonster.png";
 import Owner from "./lib/icons/Owner";
 import PeopleIcon from "./lib/icons/PeopleIcon";
 import PlayButton from "./lib/icons/PlayButton";
-import SelectedCheckboxIcon from "./lib/icons/SelectedCheckboxIcon";
-import SoundWave from "./lib/icons/SoundWave";
-import Suitcase from "./lib/icons/Suitcase";
 import Search from "./lib/icons/Search";
+import SelectedCheckboxIcon from "./lib/icons/SelectedCheckboxIcon";
 import SoundCloudLogo from "./lib/icons/SoundCloudLogo";
+import SoundWave from "./lib/icons/SoundWave";
 import SpotifyLogo from "./lib/icons/SpotifyLogo";
+import Suitcase from "./lib/icons/Suitcase";
 import TimeCircleLine from "./lib/icons/TimeCircleLine";
 import UnselectedCheckboxIcon from "./lib/icons/UnselectedCheckboxIcon";
 import UploadIcon from "./lib/icons/UploadIcon";
 import VerticalEllipsis from "./lib/icons/VerticalEllipsis";
 import WalletIcon from "./lib/icons/WalletIcon";
 import XLogo from "./lib/icons/XLogo";
+import artistAgreementPreview from "./lib/images/artist-agreement-preview.jpg";
+import bgImage from "./lib/images/bg-img.webp";
+import { default as NEWMMonsterPercussion } from "./lib/images/NEWMMonsterPercussion.png";
+import { default as NEWMMonsterRock } from "./lib/images/NEWMMonsterRock.png";
 
 export {
-  AddSong,
   AddImage,
+  AddSong,
   artistAgreementPreview,
   bgImage,
   Charli3Logo,
@@ -58,12 +59,13 @@ export {
   NEWMLogo,
   NEWMLogoSmInverse,
   NEWMMarketplaceLogo,
-  NEWMMonster,
+  NEWMMonsterPercussion,
+  NEWMMonsterRock,
   Owner,
   PeopleIcon,
   PlayButton,
-  SelectedCheckboxIcon,
   Search,
+  SelectedCheckboxIcon,
   SoundCloudLogo,
   SoundWave,
   SpotifyLogo,