Issue #7 🎫: 404 not found page (component) and HashRouter migration

[ITurres]

Pull Request Summary for Issue #7 Completion

---

Overview:

• Issue [4pt] 404 not found -page- component and migrate BrowserRouter to HashRouter #7.

Prior to these changes, the 404.html was used to catch the GitHub 404 error and redirect the user to the AccessPage i.e /iturres-reactive-portfolio/ path. This was okay, but it was not the best solution, because being again at the access page will require the user to click the access button and see the time-warp animation again, which is not the best UX.
The migration from BrowserRouter to HashRouter was necessary to fix the issue with the NotFoundPage component being rendered when the user navigates to a non-existing path on the deployed version using GitHub Pages (gh-pages). HashRouter has the necessary functionality to handle the GitHub 404 error and render the NotFoundPage component.

Changes Made:

Added:

/src/components/pages/NotFoundPage.tsx

• This new page component will render a heading, a paragraph and a button to redirect the user back to either the home page or the access page, depending on the path sent as a prop.
• This component will also render the FloatingAstronaut animation component.

/src/styles/pages/notFoundPage.scss

• Added a new stylesheet to style the NotFoundPage component.

---

Modified:

.eslintrc.json

• Added a new rule no-undef set to off for all .ts and .tsx files.

/src/index.tsx

• Migrated from BrowserRouter to HashRouter to fix the issue with the 404 page not being rendered when the user navigates to a non-existing path on the deployed version using GitHub Pages (gh-pages).

/src/App.tsx

• Imported and rendered the new NotFoundPage component when the path does not match any routes at the root level, i.e /.

/src/App.tsx

/src/components/UI/AnimatedButton.tsx

/src/components/UI/FileTabsNavbar.tsx

/src/components/UI/Navbar.tsx

/src/components/pages/AboutPage.tsx

/src/components/pages/AccessPage.tsx

• Removed the /iturres-reactive-portfolio/ prefix from all URL paths.

/src/components/pages/HomePage.tsx

• Imported and rendered the new NotFoundPage component when the path does not match any of the routes at the home page level onwards, i.e /homepage.

/src/styles/UI/button.scss

• Added a new global class .static-shadow to style the NotFoundPage button. This class can also be used to style other buttons.

---

Deleted:

/public/404.html

• Removed the 404.html file from the /public directory since it is no longer being used.

---

Reasoning:

• The NotFoundPage will be rendered in two different scenarios:

  • When the user navigates to a non-existing path from the root path / i.e the Access page, the button will display the text "Go back to the Access Page" and redirect the user to the / path.
  • When the user navigates to a non-existing path from the home page, the button will display the text "Go back to the About Page" and redirect the user to the /homepage path.

Impact:

• The user will no longer be redirected to the Access page when navigating to a non-existing path regardless of the page they are currently on. Instead, the NotFoundPage will be rendered and the user can go back to the About page or the Access page, improving the user experience.

Testing:

• n/a.

Related Issues:

• Closes [4pt] 404 not found -page- component and migrate BrowserRouter to HashRouter #7.

Dependencies:

• n/a.

Additional Notes:

• The 'going back' to the About page in the NotFoundPage button text and redirecting the user to the /homepage path, is a bit misleading. I will open a new issue to address this.

• A new deployment has been triggered to update with all these new changes the live version of the portfolio.
  You can see here v2.0.0 - Migrate to HashRouter.

---

[ITurres]

✅ Good for merge.