Added additional translations.

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useSubscription } from "@apollo/react-hooks";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
@@ -6,15 +6,26 @@ import JobTombstone from "../../components/job-tombstone/job-tombstone.component
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { Tabs, Icon, Row } from "antd";
 import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import { useTranslation } from "react-i18next";
 
 function JobsDetailPage({ match }) {
   const { jobId } = match.params;
+  const { t } = useTranslation();
   const { loading, error, data } = useSubscription(GET_JOB_BY_PK, {
     variables: { id: jobId },
     fetchPolicy: "network-only"
   });
+
+  useEffect(() => {
+    document.title = loading
+      ? "..."
+      : t("titles.jobsdetail", {
+          ro_number: data.jobs_by_pk.ro_number
+        });
+  }, [loading]);
+
   if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <div>
@@ -22,38 +33,35 @@ function JobsDetailPage({ match }) {
         <JobTombstone job={data.jobs_by_pk} />
       </Row>
       <Row>
-        <Tabs defaultActiveKey="lines">
+        <Tabs defaultActiveKey='lines'>
           <Tabs.TabPane
             tab={
               <span>
-                <Icon type="bars" />
+                <Icon type='bars' />
                 Lines
               </span>
             }
-            key="lines"
-          >
+            key='lines'>
             <JobLinesContainer match={match} />
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={
               <span>
-                <Icon type="dollar" />
+                <Icon type='dollar' />
                 Rates
               </span>
             }
-            key="rates"
-          >
+            key='rates'>
             Estimate Rates
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={
               <span>
-                <Icon type="tool1" />
+                <Icon type='tool1' />
                 Parts
               </span>
             }
-            key="parts"
-          >
+            key='parts'>
             Estimate Parts
           </Tabs.TabPane>
         </Tabs>

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

@@ -3,16 +3,17 @@ import { useSubscription } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 import { Col } from "antd";
 import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
-
+import { useTranslation } from "react-i18next";
 import JobsList from "../../components/jobs-list/jobs-list.component";
 
 export default function JobsPage() {
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
   });
+  const { t } = useTranslation();
 
   useEffect(() => {
-    document.title = "new title";
+    document.title = t("titles.jobs");
   }, []);
 
   if (error) return <AlertComponent message={error.message} />;

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

@@ -1,6 +1,7 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import { Route } from "react-router";
 import { Layout, BackTop } from "antd";
+import { useTranslation } from "react-i18next";
 
 //Component Imports
 import HeaderContainer from "../../components/header/header.container";
@@ -14,6 +15,12 @@ const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
 export default function Manage({ match }) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.app");
+  }, []);
+
   return (
     <Layout>
       <Header>
@@ -23,8 +30,7 @@ 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} />