Added owners detail fields and owner jobs list.

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

@@ -1,5 +1,11 @@
 import React from "react";
-
-export default function OwnersDetailComponent() {
-  return <div>Owner Detail</div>;
+import OwnerDetailForm from "../../components/owner-detail-form/owner-detail-form.container";
+import OwnerDetailJobsComponent from "../../components/owner-detail-jobs/owner-detail-jobs.component";
+export default function OwnersDetailComponent({ owner, refetch }) {
+  return (
+    <div>
+      <OwnerDetailForm owner={owner} refetch={refetch} />
+      <OwnerDetailJobsComponent owner={owner} />
+    </div>
+  );
 }

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

@@ -1,8 +1,28 @@
 import React from "react";
 import OwnersDetailComponent from "./owners-detail.page.component";
-
+import { useTranslation } from "react-i18next";
+import { useQuery } from "react-apollo";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import AlertComponent from "../../components/alert/alert.component";
+import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";
 export default function OwnersDetailContainer({ match }) {
   const { ownerId } = match.params;
-  console.log("ownerId", ownerId);
-  return <OwnersDetailComponent />;
+  const { t } = useTranslation();
+
+  const { loading, data, error, refetch } = useQuery(QUERY_OWNER_BY_ID, {
+    variables: { id: ownerId },
+    fetchPolicy: "network-only"
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  if (data.owners_by_pk)
+    return (
+      <OwnersDetailComponent owner={data.owners_by_pk} refetch={refetch} />
+    );
+  else
+    return (
+      <AlertComponent message={t("owners.errors.noaccess")} type="error" />
+    );
 }