Rewrote app to use hooks and fixed multiple re-renders.

client/src/pages/landing/landing.page.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Typography } from "antd";
 
-import HeaderContainer from "../../components/header/header.container";
+import HeaderComponent from "../../components/header/header.component";
 
 export default function LandingPage() {
   return (
     <div>
-      <HeaderContainer landingHeader />
+      <HeaderComponent landingHeader />
       <Typography.Title>
         Welcome to bodyshop.app.
       </Typography.Title>

client/src/pages/manage/manage.page.jsx

@@ -5,7 +5,7 @@ import { Route } from "react-router";
 import WhiteBoardPage from "../white-board/white-board.page";
 import JobsPage from "../jobs/jobs.page";
 import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container";
-import HeaderComponentContainer from "../../components/header/header.container";
+import HeaderComponent from "../../components/header/header.component";
 import FooterComponent from "../../components/footer/footer.component";
 
 import { Layout } from "antd";
@@ -16,7 +16,7 @@ export default function Manage({ match }) {
   return (
     <Layout>
       <Header>
-        <HeaderComponentContainer />
+        <HeaderComponent />
       </Header>
 
       <Content>

client/src/pages/unauthorized/unauthorized.component.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography } from "antd";
-import HeaderContainer from "../../components/header/header.container";
+import HeaderContainer from "../../components/header/header.component";
 
 export default function Unauthorized() {
   return (