import React, { useEffect } from "react";
import { useSubscription } from "@apollo/react-hooks";
import AlertComponent from "../../components/alert/alert.component";
import { Col } from "antd";
import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
import { useTranslation } from "react-i18next";
import JobsList from "../../components/jobs-list/jobs-list.component";

export default function JobsPage() {
  const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
    fetchPolicy: "network-only"
  });
  const { t } = useTranslation();

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

  if (error) return <AlertComponent message={error.message} />;

  return (
    <Col span={22} offset={1}>
      <JobsList loading={loading} jobs={data ? data.jobs : null} />
    </Col>
  );
}