Added jobs list to vehicle detail page.

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" />;