Added tabs to jobs detail + some basic rendering.

components/screen-job-detail/screen-job-detail.component.jsx

@@ -1,10 +1,44 @@
+import { useQuery } from "@apollo/client";
+import { Tab, Tabs } from "native-base";
 import React from "react";
-import { View, Text } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Text } from "react-native";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import ErrorDisplay from "../error-display/error-display.component";
+import JobTombstone from "../job-tombstone/job-tombstone.component";
+import LoadingDisplay from "../loading-display/loading-display.component";
+import JobNotes from "../job-notes/job-notes.component";
+export default function ScreenJobDetail({ navigation, route, ...restProps }) {
+  const {
+    params: { jobId },
+  } = route;
+  const { t } = useTranslation();
+
+  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+    variables: {
+      id: jobId,
+    },
+    skip: !jobId,
+  });
+
+  if (loading) return <LoadingDisplay />;
+  if (error) return <ErrorDisplay errorMessage={error.message} />;
 
-export default function ScreenJobDetail({ navigation, ...restProps }) {
   return (
-    <View>
-      <Text>The is the detail of the job.</Text>
-    </View>
+    <Tabs>
+      <Tab heading={t("jobdetail.labels.job")}>
+        <JobTombstone
+          job={data.jobs_by_pk}
+          loading={loading}
+          refetch={refetch}
+        />
+      </Tab>
+      <Tab heading={t("jobdetail.labels.documents")}>
+        <Text>Tab1</Text>
+      </Tab>
+      <Tab heading={t("jobdetail.labels.notes")}>
+        <JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
+      </Tab>
+    </Tabs>
   );
 }