Manage Profile Pages

client/src/pages/jobs-detail/jobs-detail.page.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useSubscription } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/react-hooks";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
 import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 function JobsDetailPage({ match }) {
   const { jobId } = match.params;
   const { t } = useTranslation();
-  const { loading, error, data } = useSubscription(GET_JOB_BY_PK, {
+  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
     variables: { id: jobId },
     fetchPolicy: "network-only"
   });
@@ -22,7 +22,7 @@ function JobsDetailPage({ match }) {
       : t("titles.jobsdetail", {
           ro_number: data.jobs_by_pk.ro_number
         });
-  }, [loading]);
+  }, [loading,data,t]);
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;

client/src/pages/jobs/jobs.page.jsx

@@ -14,7 +14,7 @@ export default function JobsPage() {
 
   useEffect(() => {
     document.title = t("titles.jobs");
-  }, []);
+  }, [t]);
 
   if (error) return <AlertComponent message={error.message} />;
 

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

@@ -11,6 +11,7 @@ import ErrorBoundary from "../../components/error-boundary/error-boundary.compon
 const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
+const ProfilePage = lazy(() => import("../profile/profile.container.page"));
 
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
@@ -19,7 +20,7 @@ export default function Manage({ match }) {
 
   useEffect(() => {
     document.title = t("titles.app");
-  }, []);
+  }, [t]);
 
   return (
     <Layout>
@@ -30,7 +31,8 @@ export default function Manage({ match }) {
       <Content>
         <ErrorBoundary>
           <Suspense
-            fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>
+            fallback={<div>TODO: Suspended Loading in Manage Page...</div>}
+          >
             <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
             <Route exact path={`${match.path}/jobs`} component={JobsPage} />
@@ -38,6 +40,12 @@ export default function Manage({ match }) {
               path={`${match.path}/jobs/:jobId`}
               component={JobsDetailPage}
             />
+
+            <Route
+              exact
+              path={`${match.path}/profile`}
+              component={ProfilePage}
+            />
           </Suspense>
         </ErrorBoundary>
       </Content>

client/src/pages/profile/profile.container.page.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import ProfilePage from "./profile.page";
+
+export default function ProfileContainerPage() {
+  return <ProfilePage />;
+}

client/src/pages/profile/profile.page.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Layout, Menu, Icon } from "antd";
+import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
+import ProfileContent from "../../components/profile-content/profile-content.component";
+
+export default function ProfilePage() {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.profile");
+  }, [t]);
+
+  const [sidebarSelection, setSidebarSelection] = useState({ key: "profile" });
+  return (
+    <Layout>
+      <ProfileSideBar
+        sidebarSelection={sidebarSelection}
+        setSidebarSelection={setSidebarSelection}
+      />
+
+      <Layout.Content>
+        <ProfileContent sidebarSelection={sidebarSelection} />
+      </Layout.Content>
+    </Layout>
+  );
+}