Add AccountPage and navigation from ProfilePage

frontend/src/App.tsx

@@ -31,6 +31,7 @@ import NotificationsPage from "./components/pages/NotificationsPage";
 import ProfilePage from "./components/pages/ProfilePage";
 import UserManagementPage from "./components/pages/UserManagementPage";
 import AdminPage from "./components/pages/AdminPage";
+import AccountPage from "./components/pages/AccountPage";
 
 import { AuthenticatedUser } from "./types/AuthTypes";
 
@@ -139,6 +140,12 @@ const App = (): React.ReactElement => {
                 component={ProfilePage}
                 allowedRoles={AuthConstants.ALL_ROLES}
               />
+              <PrivateRoute
+                exact
+                path={Routes.ACCOUNT_PAGE}
+                component={AccountPage}
+                allowedRoles={AuthConstants.ALL_ROLES}
+              />
               <PrivateRoute
                 exact
                 path={Routes.ADMIN_PAGE}

frontend/src/components/auth/PrivateRoute.tsx

@@ -1,32 +1,32 @@
-import React, { useContext } from "react";
-import { Route, Redirect } from "react-router-dom";
-
-import AuthContext from "../../contexts/AuthContext";
-import { LOGIN_PAGE } from "../../constants/Routes";
-
-type PrivateRouteProps = {
-  component: React.FC;
-  path: string;
-  exact: boolean;
-  allowedRoles: Set<string>;
-};
-
-const PrivateRoute: React.FC<PrivateRouteProps> = ({
-  component,
-  exact,
-  path,
-  allowedRoles,
-}: PrivateRouteProps) => {
-  const { authenticatedUser } = useContext(AuthContext);
-
-  if (!authenticatedUser) {
-    return <Redirect to={LOGIN_PAGE} />;
-  }
-  if (!allowedRoles.has(authenticatedUser.role)) {
-    return <Redirect to="*" />;
-  }
-
-  return <Route path={path} exact={exact} component={component} />;
-};
-
-export default PrivateRoute;
+import React, { useContext } from "react";
+import { Route, Redirect } from "react-router-dom";
+
+import AuthContext from "../../contexts/AuthContext";
+import { LOGIN_PAGE } from "../../constants/Routes";
+
+type PrivateRouteProps = {
+  component: React.FC;
+  path: string;
+  exact: boolean;
+  allowedRoles: Set<string>;
+};
+
+const PrivateRoute: React.FC<PrivateRouteProps> = ({
+  component,
+  exact,
+  path,
+  allowedRoles,
+}: PrivateRouteProps) => {
+  const { authenticatedUser } = useContext(AuthContext);
+
+  if (!authenticatedUser) {
+    return <Redirect to={LOGIN_PAGE} />;
+  }
+  if (!allowedRoles.has(authenticatedUser.role)) {
+    return <Redirect to="*" />;
+  }
+
+  return <Route path={path} exact={exact} component={component} />;
+};
+
+export default PrivateRoute;

frontend/src/components/pages/AccountPage.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Text } from "@chakra-ui/react";
+import { useHistory } from "react-router-dom";
+import NavBar from "../common/navbar/NavBar";
+import { PROFILE_PAGE } from "../../constants/Routes";
+
+const AccountPage = (): React.ReactElement => {
+  const history = useHistory();
+  const navigateTo = () => history.push(PROFILE_PAGE);
+  return (
+    <div style={{ textAlign: "center" }}>
+      <NavBar pageName="Profile" />
+      <Text textStyle="h3" mt={{ base: "6.375rem", md: "9.375rem" }}>
+        Account Page ⚙️
+      </Text>
+      <button
+        onClick={navigateTo}
+        className="btn btn-primary"
+        type="button"
+        style={{ textAlign: "center" }}
+      >
+        My profile
+      </button>
+    </div>
+  );
+};
+
+export default AccountPage;

frontend/src/components/pages/ProfilePage.tsx

@@ -1,16 +1,28 @@
-import React from "react";
-import { Text } from "@chakra-ui/react";
-import NavBar from "../common/navbar/NavBar";
-
-const ProfilePage = (): React.ReactElement => {
-  return (
-    <div style={{ textAlign: "center" }}>
-      <NavBar pageName="Profile" />
-      <Text textStyle="h3" mt={{ base: "6.375rem", md: "9.375rem" }}>
-        Profile Page 🫨
-      </Text>
-    </div>
-  );
-};
-
-export default ProfilePage;
+import React from "react";
+import { Text } from "@chakra-ui/react";
+import { useHistory } from "react-router-dom";
+import NavBar from "../common/navbar/NavBar";
+import { ACCOUNT_PAGE } from "../../constants/Routes";
+
+const ProfilePage = (): React.ReactElement => {
+  const history = useHistory();
+  const navigateTo = () => history.push(ACCOUNT_PAGE);
+  return (
+    <div style={{ textAlign: "center" }}>
+      <NavBar pageName="Profile" />
+      <Text textStyle="h3" mt={{ base: "6.375rem", md: "9.375rem" }}>
+        Profile Page 🫨
+      </Text>
+      <button
+        onClick={navigateTo}
+        className="btn btn-primary"
+        type="button"
+        style={{ textAlign: "center" }}
+      >
+        My Account
+      </button>
+    </div>
+  );
+};
+
+export default ProfilePage;

frontend/src/constants/Routes.ts

@@ -26,6 +26,8 @@ export const NOTIFICATIONS_PAGE = "/notifications";
 
 export const PROFILE_PAGE = "/profile";
 
+export const ACCOUNT_PAGE = "/account/:id";
+
 export const DEV_UTILITY_PAGE = "/dev-utility"; // TODO: This is only here for development purposes
 
 export const USER_MANAGEMENT_PAGE = "/admin/users";