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

[dmkirshon]

Add:

• Page Not Found component
• Asset for Page Not Found Component

Update:

• Route navigation when attempting to hit a page that doesn't exist

Note:

• Maintained navigation logic for songs and collaboration artist pages, so that if an incorrect ID is used it will fail and return to the appropriate route path.

[scandycuz]

Looking good but had some comments.

[scandycuz]

This approach could create some issues, as we'll need to make sure to always update this array when adding a new route, or it could result in the 404 component being incorrectly displayed. Instead, it would be better to declare the routes variable externally and then derive this array from them. E.g.

const routes = [{
  path: "advanced-details",
  ...
}]

const validRoutes = routes.map((route) =>  `/home/upload-song/${route.path}`)

...

if (!isValidPath) {
  return <PageNotFound redirectUrl="/home/upload-song" />;
}

return (
  <WizardForm
    routes={routes}
    ...

That way it only has to be updated in one place, when the routes are declared.

[scandycuz]

The 404 redirect functionality could also be included in the WizardForm component, although I feel less strongly about that.

[dmkirshon]

Makes sense to consolidate the routes, will make those changes.

I was trying to keep to the highest level where the routing logic was made. WizardForm is used in multiple different contexts so it felt off to integrate any triggering there.

[scandycuz]

Yeah, I don't have a strong opinion on having the logic in the WizardForm. There are pros and cons to doing it that way.

[scandycuz]

Do we need this useEffect? Couldn't we just use

if (!isValidPath) {
  return <PageNotFound />;
}

directly? It would make the code a bit cleaner.

[dmkirshon]

Do you mean to remove the useEffect and convert the valid path conditional into a function? I will play around with removing the useEffect and see how the rendering is affected by it.

[scandycuz]

I supposed a benefit of having it in a useEffect call is that it would only run once. It could be fine to keep it there, on second thought.