import React from "react";
import JobNotesComponent from "./jobs.notes.component";
import { useQuery, useMutation } from "react-apollo";
import AlertComponent from "../../components/alert/alert.component";
//import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import {
  QUERY_NOTES_BY_JOB_PK,
  DELETE_NOTE
} from "../../graphql/notes.queries";

export default function JobNotesContainer({ jobId }) {
  const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, {
    variables: { id: jobId },
    fetchPolicy: "network-only"
  });


  const [deleteNote] = useMutation(DELETE_NOTE);

  //if (loading) return <SpinComponent />;
  if (error) return <AlertComponent message={error.message} type='error' />;
  return (
    <JobNotesComponent
      jobId={jobId}
      loading={loading}
      data={data ? data.jobs_by_pk.notes : null}
      refetch={refetch}
      deleteNote={deleteNote}
    />
  );
}
