import React, { useEffect } from "react";
import { useMutation, useLazyQuery } from "react-apollo";
import {
  DELETE_AVAILABLE_JOB,
  QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK
} from "../../graphql/available-jobs.queries";
import JobsAvailablePageComponent from "./jobs-available.page.component";
import { useTranslation } from "react-i18next";

export default function JobsAvailablePageContainer() {
  const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
  const { t } = useTranslation();

  const estDataLazyLoad = useLazyQuery(
    QUERY_AVAILABLE_NEW_JOBS_EST_DATA_BY_PK,
    {
      fetchPolicy: "network-only"
    }
  );

  useEffect(() => {
    document.title = t("titles.jobsavailable");
  }, [t]);

  return (
    <div>
      <JobsAvailablePageComponent
        deleteJob={deleteJob}
        estDataLazyLoad={estDataLazyLoad}
      />
    </div>
  );
}
