Refactor and standardize

backend/typescript/types.ts

@@ -45,8 +45,8 @@ export const sexEnum: Sex[] = [...sexValues];
 export type Sex = typeof sexValues[number];
 
 const petStatusValues = [
-  "Assigned",
-  "Active",
+  "Assigned", // Assigned to me
+  "Active", // Occupied
   "Needs Care",
   "Does Not Need Care",
 ] as const;

frontend/src/App.tsx

@@ -2,20 +2,20 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import React, { useState, useReducer } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
-import Default from "./components/pages/Default";
-import Login from "./components/auth/Login";
+import Default from "./pages/Default";
+import LoginPage from "./pages/LoginPage";
 import Signup from "./components/auth/Signup";
-import ForgotPasswordPage from "./components/pages/ForgotPassword";
+import ForgotPasswordPage from "./pages/ForgotPassword";
 import PrivateRoute from "./components/auth/PrivateRoute";
-import CreatePage from "./components/pages/CreatePage";
-import PetListPage from "./components/pages/PetListPage";
-import DisplayPage from "./components/pages/DisplayPage";
-import SimpleEntityCreatePage from "./components/pages/SimpleEntityCreatePage";
-import SimpleEntityDisplayPage from "./components/pages/SimpleEntityDisplayPage";
-import NotFound from "./components/pages/NotFound";
-import UpdatePage from "./components/pages/UpdatePage";
-import SimpleEntityUpdatePage from "./components/pages/SimpleEntityUpdatePage";
-import CreatePasswordPage from "./components/pages/CreatePasswordPage";
+import CreatePage from "./pages/CreatePage";
+import PetListPage from "./pages/PetListPage";
+import DisplayPage from "./pages/DisplayPage";
+import SimpleEntityCreatePage from "./pages/SimpleEntityCreatePage";
+import SimpleEntityDisplayPage from "./pages/SimpleEntityDisplayPage";
+import NotFound from "./pages/NotFound";
+import UpdatePage from "./pages/UpdatePage";
+import SimpleEntityUpdatePage from "./pages/SimpleEntityUpdatePage";
+import CreatePasswordPage from "./pages/CreatePasswordPage";
 import * as Routes from "./constants/Routes";
 import * as AuthConstants from "./constants/AuthConstants";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
@@ -26,12 +26,12 @@ import SampleContext, {
 } from "./contexts/SampleContext";
 import sampleContextReducer from "./reducers/SampleContextReducer";
 import SampleContextDispatcherContext from "./contexts/SampleContextDispatcherContext";
-import EditTeamInfoPage from "./components/pages/EditTeamPage";
-import HooksDemo from "./components/pages/HooksDemo";
-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 EditTeamInfoPage from "./pages/EditTeamPage";
+import HooksDemo from "./pages/HooksDemo";
+import InteractionLogPage from "./pages/InteractionLogPage";
+import ProfilePage from "./pages/ProfilePage";
+import UserManagementPage from "./pages/UserManagementPage";
+import AdminPage from "./pages/AdminPage";
 import Layout from "./Layout";
 
 import { AuthenticatedUser } from "./types/AuthTypes";
@@ -62,7 +62,7 @@ const App = (): React.ReactElement => {
         >
           <Router>
             <Switch>
-              <Route exact path={Routes.LOGIN_PAGE} component={Login} />
+              <Route exact path={Routes.LOGIN_PAGE} component={LoginPage} />
               <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
               <PrivateRoute
                 exact
@@ -140,8 +140,8 @@ const App = (): React.ReactElement => {
                 />
                 <PrivateRoute
                   exact
-                  path={Routes.NOTIFICATIONS_PAGE}
-                  component={NotificationsPage}
+                  path={Routes.INTERACTION_LOG_PAGE}
+                  component={InteractionLogPage}
                   allowedRoles={AuthConstants.ALL_ROLES}
                 />
                 <PrivateRoute

frontend/src/Layout.tsx

@@ -35,8 +35,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
         return "Update Simple Entity";
       case ROUTES.HOOKS_PAGE:
         return "Hooks";
-      case ROUTES.NOTIFICATIONS_PAGE:
-        return "Notifications";
+      case ROUTES.INTERACTION_LOG_PAGE:
+        return "Interaction Log";
       case ROUTES.PROFILE_PAGE:
         return "Profile";
       case ROUTES.DEV_UTILITY_PAGE:

frontend/src/components/auth/Signup.tsx

@@ -6,6 +6,7 @@ import { HOME_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
 
+// NOTE: OHMS Onboarding flow does not use this page, this is from starter code
 const Signup = (): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
   const [firstName, setFirstName] = useState("");

frontend/src/components/common/navbar/NavInteractionLogButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { Box, IconButton } from "@chakra-ui/react";
+import { FaBell } from "react-icons/fa";
+import { INTERACTION_LOG_PAGE } from "../../../constants/Routes";
+
+const NavNotificationButton = (): React.ReactElement => {
+  const history = useHistory();
+  const goToNotifications = () => {
+    history.push(INTERACTION_LOG_PAGE);
+  };
+  return (
+    <Box
+      mr={{ base: "0.75rem", md: "1.13rem" }}
+      mb={{ base: "0.19rem", md: "0.87rem" }}
+    >
+      <IconButton
+        aria-label="Notifications"
+        fontSize={{ base: "2rem", md: "2.6875rem" }}
+        variant="unstyled"
+        icon={<FaBell />}
+        onClick={goToNotifications}
+        display="flex" // the svg wasn't centered in the iconbutton
+        justifyContent="center"
+        alignItems="center"
+      />
+    </Box>
+  );
+};
+
+export default NavNotificationButton;

frontend/src/components/common/navbar/NavNotificationButton.tsx

@@ -2,24 +2,24 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import { Box, IconButton } from "@chakra-ui/react";
 import { FaBell } from "react-icons/fa";
-import { NOTIFICATIONS_PAGE } from "../../../constants/Routes";
+import { INTERACTION_LOG_PAGE } from "../../../constants/Routes";
 
-const NavNotificationButton = (): React.ReactElement => {
+const NavInteractionLogButton = (): React.ReactElement => {
   const history = useHistory();
-  const goToNotifications = () => {
-    history.push(NOTIFICATIONS_PAGE);
+  const goToInteractionLog = () => {
+    history.push(INTERACTION_LOG_PAGE);
   };
   return (
     <Box
       mr={{ base: "0.75rem", md: "1.13rem" }}
       mb={{ base: "0.19rem", md: "0.87rem" }}
     >
       <IconButton
-        aria-label="Notifications"
+        aria-label="InteractionLogs"
         fontSize={{ base: "2rem", md: "2.6875rem" }}
         variant="unstyled"
         icon={<FaBell />}
-        onClick={goToNotifications}
+        onClick={goToInteractionLog}
         display="flex" // the svg wasn't centered in the iconbutton
         justifyContent="center"
         alignItems="center"
@@ -28,4 +28,4 @@ const NavNotificationButton = (): React.ReactElement => {
   );
 };
 
-export default NavNotificationButton;
+export default NavInteractionLogButton;

frontend/src/constants/Routes.ts

@@ -1,10 +1,23 @@
-export const HOME_PAGE = "/";
+export const HOME_PAGE = "/"; // Pet List
 
 export const LOGIN_PAGE = "/login";
 
-export const SIGNUP_PAGE = "/signup";
+export const FORGOT_PASSWORD_PAGE = "/forgot-password";
+
+export const INTERACTION_LOG_PAGE = "/interaction-log";
+
+export const PROFILE_PAGE = "/profile";
+
+export const DEV_UTILITY_PAGE = "/dev-utility"; // TODO: This is only here for development purposes
+
+export const USER_MANAGEMENT_PAGE = "/admin/users";
+
+export const ADMIN_PAGE = "/admin";
+
+export const CREATE_PASSWORD_PAGE = "/create-password";
 
-export const FORGOT_PASSWORD_PAGE = "/forgotPassword";
+// STARTER CODE ROUTES
+export const SIGNUP_PAGE = "/signup";
 
 export const EDIT_TEAM_PAGE = "/edit-team";
 
@@ -21,15 +34,3 @@ export const CREATE_SIMPLE_ENTITY_PAGE = "/simpleEntity/create";
 export const UPDATE_SIMPLE_ENTITY_PAGE = "/simpleEntity/update";
 
 export const HOOKS_PAGE = "/hooks";
-
-export const NOTIFICATIONS_PAGE = "/notifications";
-
-export const PROFILE_PAGE = "/profile";
-
-export const DEV_UTILITY_PAGE = "/dev-utility"; // TODO: This is only here for development purposes
-
-export const USER_MANAGEMENT_PAGE = "/admin/users";
-
-export const ADMIN_PAGE = "/admin";
-
-export const CREATE_PASSWORD_PAGE = "/create-password";

frontend/src/components/pages/AdminPage.tsx → frontend/src/pages/AdminPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import MainPageButton from "../common/MainPageButton";
+import MainPageButton from "../components/common/MainPageButton";
 
 const AdminPage = (): React.ReactElement => {
   return (

frontend/src/components/pages/CreatePage.tsx → frontend/src/pages/CreatePage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import CreateForm from "../crud/CreateForm";
-import MainPageButton from "../common/MainPageButton";
+import CreateForm from "../components/crud/CreateForm";
+import MainPageButton from "../components/common/MainPageButton";
 
 const CreatePage = (): React.ReactElement => {
   return (

frontend/src/components/pages/CreatePasswordPage.tsx → frontend/src/pages/CreatePasswordPage.tsx

@@ -11,14 +11,14 @@ import {
   FormControl,
 } from "@chakra-ui/react";
 import { useHistory } from "react-router-dom";
-import ResponsiveLogo from "../common/responsive/ResponsiveAuthPageLogo";
-import ResponsivePasswordInput from "../common/responsive/ResponsivePasswordInput";
-import ResponsiveAuthContainer from "../common/responsive/ResponsiveAuthContainer";
-import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
-import background from "../assets/background.png";
-import backgroundMobile from "../assets/background_mobile.png";
-import AuthAPIClient from "../../APIClients/AuthAPIClient";
-import { HOME_PAGE } from "../../constants/Routes";
+import ResponsiveLogo from "../components/common/responsive/ResponsiveLogo";
+import ResponsivePasswordInput from "../components/common/responsive/ResponsivePasswordInput";
+import ResponsiveAuthContainer from "../components/common/responsive/ResponsiveAuthContainer";
+import ResponsiveModalWindow from "../components/common/responsive/ResponsiveModalWindow";
+import background from "../assets/images/background.png";
+import backgroundMobile from "../assets/images/background_mobile.png";
+import AuthAPIClient from "../APIClients/AuthAPIClient";
+import { HOME_PAGE } from "../constants/Routes";
 
 const CreatePasswordPage = (): React.ReactElement => {
   const [showModal, setShowModal] = React.useState(false);

frontend/src/components/pages/Default.tsx → frontend/src/pages/Default.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from "react";
 import { useHistory } from "react-router-dom";
-import * as Routes from "../../constants/Routes";
-import SampleContext from "../../contexts/SampleContext";
+import * as Routes from "../constants/Routes";
+import SampleContext from "../contexts/SampleContext";
 
-import Logout from "../auth/Logout";
-import RefreshCredentials from "../auth/RefreshCredentials";
-import ResetPassword from "../auth/ResetPassword";
+import Logout from "../components/auth/Logout";
+import RefreshCredentials from "../components/auth/RefreshCredentials";
+import ResetPassword from "../components/auth/ResetPassword";
 
 type ButtonProps = { text: string; path: string };
 

frontend/src/components/pages/DisplayPage.tsx → frontend/src/pages/DisplayPage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import DisplayTableContainer from "../crud/DisplayTableContainer";
-import MainPageButton from "../common/MainPageButton";
+import DisplayTableContainer from "../components/crud/DisplayTableContainer";
+import MainPageButton from "../components/common/MainPageButton";
 
 const GetPage = (): React.ReactElement => {
   return (

frontend/src/components/pages/EditTeamPage.tsx → frontend/src/pages/EditTeamPage.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
-import SampleContext from "../../contexts/SampleContext";
-import MainPageButton from "../common/MainPageButton";
-import SampleContextDispatcherContext from "../../contexts/SampleContextDispatcherContext";
+import SampleContext from "../contexts/SampleContext";
+import MainPageButton from "../components/common/MainPageButton";
+import SampleContextDispatcherContext from "../contexts/SampleContextDispatcherContext";
 
 type DeleteButtonProps = { index: number; onClick: (index: number) => void };
 

frontend/src/components/pages/ForgotPassword.tsx → frontend/src/pages/ForgotPassword.tsx

@@ -8,9 +8,9 @@ import {
   FormErrorMessage,
   Flex,
 } from "@chakra-ui/react";
-import StatusMessage from "../common/StatusMessage";
-import background from "./login_background.png";
-import backgroundMobile from "./login_background_phone.png";
+import StatusMessage from "../components/common/StatusMessage";
+import background from "../assets/images/background.png";
+import backgroundMobile from "../assets/images/login_background_phone.png";
 
 type SentEmail = {
   email: string;

frontend/src/components/pages/NotificationsPage.tsx → frontend/src/pages/InteractionLogPage.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Text } from "@chakra-ui/react";
-import NavBar from "../common/navbar/NavBar";
+import NavBar from "../components/common/navbar/NavBar";
 
-const NotificationsPage = (): React.ReactElement => {
+const InteractionLogPage = (): React.ReactElement => {
   return (
     <div style={{ textAlign: "center" }}>
-      <NavBar pageName="Notifications" />
+      <NavBar pageName="Interaction Log" />
       <Text textStyle="h3" mt={{ base: "6.375rem", md: "9.375rem" }}>
-        Notifications Page 🫨
+        Interaction Log Page 🫨
       </Text>
       <Text>
         Lorem ipsum odor amet, consectetuer adipiscing elit. Viverra efficitur
@@ -45,4 +45,4 @@ const NotificationsPage = (): React.ReactElement => {
   );
 };
 
-export default NotificationsPage;
+export default InteractionLogPage;

frontend/src/components/auth/Login.tsx → frontend/src/pages/LoginPage.tsx

@@ -11,20 +11,20 @@ import {
   FormControl,
 } from "@chakra-ui/react";
 import { isSignInWithEmailLink } from "firebase/auth";
-import ResponsiveLogo from "../common/responsive/ResponsiveLogo";
-import ResponsiveEmailInput from "../common/responsive/ResponsiveEmailInput";
-import ResponsivePasswordInput from "../common/responsive/ResponsivePasswordInput";
-import ResponsiveAuthContainer from "../common/responsive/ResponsiveAuthContainer";
-import background from "../assets/background.png";
-import backgroundMobile from "../assets/background_mobile.png";
-import auth from "../../firebase/firebase";
-import authAPIClient from "../../APIClients/AuthAPIClient";
-import { CREATE_PASSWORD_PAGE, HOME_PAGE } from "../../constants/Routes";
-import AuthContext from "../../contexts/AuthContext";
-import { AuthenticatedUser } from "../../types/AuthTypes";
-import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
+import ResponsiveLogo from "../components/common/responsive/ResponsiveLogo";
+import ResponsiveEmailInput from "../components/common/responsive/ResponsiveEmailInput";
+import ResponsivePasswordInput from "../components/common/responsive/ResponsivePasswordInput";
+import ResponsiveAuthContainer from "../components/common/responsive/ResponsiveAuthContainer";
+import background from "../assets/images/background.png";
+import backgroundMobile from "../assets/images/background_mobile.png";
+import auth from "../firebase/firebase";
+import authAPIClient from "../APIClients/AuthAPIClient";
+import { CREATE_PASSWORD_PAGE, HOME_PAGE } from "../constants/Routes";
+import AuthContext from "../contexts/AuthContext";
+import { AuthenticatedUser } from "../types/AuthTypes";
+import ResponsiveModalWindow from "../components/common/responsive/ResponsiveModalWindow";
 
-const Login = (): React.ReactElement => {
+const LoginPage = (): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -268,4 +268,4 @@ const Login = (): React.ReactElement => {
   );
 };
 
-export default Login;
+export default LoginPage;

frontend/src/components/pages/ProfilePage.tsx → frontend/src/pages/ProfilePage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text } from "@chakra-ui/react";
-import NavBar from "../common/navbar/NavBar";
-import Logout from "../auth/Logout";
+import NavBar from "../components/common/navbar/NavBar";
+import Logout from "../components/auth/Logout";
 
 const ProfilePage = (): React.ReactElement => {
   return (

frontend/src/components/pages/SimpleEntityCreatePage.tsx → frontend/src/pages/SimpleEntityCreatePage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import SimpleEntityCreateForm from "../crud/SimpleEntityCreateForm";
-import MainPageButton from "../common/MainPageButton";
+import SimpleEntityCreateForm from "../components/crud/SimpleEntityCreateForm";
+import MainPageButton from "../components/common/MainPageButton";
 
 const SimpleEntityCreatePage = (): React.ReactElement => {
   return (

frontend/src/components/pages/SimpleEntityDisplayPage.tsx → frontend/src/pages/SimpleEntityDisplayPage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import SimpleEntityDisplayTableContainer from "../crud/SimpleEntityDisplayTableContainer";
-import MainPageButton from "../common/MainPageButton";
+import SimpleEntityDisplayTableContainer from "../components/crud/SimpleEntityDisplayTableContainer";
+import MainPageButton from "../components/common/MainPageButton";
 
 const GetSimpleEntitiesPage = (): React.ReactElement => {
   return (