import React from "react";
import { useSubscription } from "@apollo/react-hooks";
import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { Breadcrumb } from "antd";

function JobsDetailPage({ match }) {
  const { jobId } = match.params;
  const { loading, error, data } = useSubscription(GET_JOB_BY_PK, {
    variables: { id: jobId },
    fetchPolicy: "network-only"
  });
  if (loading) return <SpinComponent />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <div>
      <JobTombstone job={data.jobs_by_pk} />
    </div>
  );
}
export default JobsDetailPage;