Added jobs list to vehicle detail page.

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

@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ProfilePage from "./profile.page";
-
+import { useTranslation } from "react-i18next";
 export default function ProfileContainerPage() {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.profile");
+  }, [t]);
+
   return <ProfilePage />;
 }

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

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

client/src/pages/vehicles-detail/vehicles-detail.page.component.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import VehicleDetailFormContainer from "../../components/vehicle-detail-form/vehicle-detail-form.container";
+import VehicleDetailJobsComponent from "../../components/vehicle-detail-jobs/vehicle-detail-jobs.component";
 
 export default function VehicleDetailComponent({ vehicle, refetch }) {
   return (
@@ -7,7 +8,7 @@ export default function VehicleDetailComponent({ vehicle, refetch }) {
       Veh detail <span>{vehicle.v_vin}</span>
       <div>Vehicle Fields</div>
       <VehicleDetailFormContainer vehicle={vehicle} refetch={refetch} />
-      <div>Associated Jobs</div>
+      <VehicleDetailJobsComponent vehicle={vehicle} />
     </div>
   );
 }

client/src/pages/vehicles-detail/vehicles-detail.page.container.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import VehicleDetailComponent from "./vehicles-detail.page.component";
 import { useQuery } from "react-apollo";
 import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
@@ -14,6 +14,15 @@ export default function VehicleDetailContainer({ match }) {
     fetchPolicy: "network-only"
   });
 
+  useEffect(() => {
+    document.title = t("titles.vehicledetail", {
+      vehicle:
+        data && data.vehicles[0]
+          ? `${data.vehicles[0].v_model_yr} ${data.vehicles[0].v_make_desc} ${data.vehicles[0].v_model_desc}`
+          : ""
+    });
+  }, [t, data]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;