import React, { useEffect } from "react";
import { useMutation, useLazyQuery } from "@apollo/react-hooks";
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);

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

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