Cacher is the code snippet organizer for pro developers

import React from "react";
import { useQuery, useMutation } from "react-apollo-hooks";
import { fromDb } from "../../markdownUtils";
import { navigate } from "@reach/router";
import {
  ApplyContainer,
  JobContainer,
  BackButton,
  ApplyLink,
  DeleteJob,
  JobDescription,
} from "./styles";
import { GET_JOB, DELETE_JOB, GET_JOBS } from "../../queries";

function Job(params) {
  const { data, error, loading } = useQuery(GET_JOB, {
    variables: { jobId: params.id },
  });
  const deleteJob = useMutation(DELETE_JOB, {
    refetchQueries: [{ query: GET_JOBS }],
  });
  const handleDeleteJob = e => {
    console.log("DELETING A JOB", params.id);
    deleteJob({
      variables: { jobId: params.id },
    }).then(() => navigate("/"));
  };
  if (loading) {
    return <h1>Loading...</h1>;
  } else if (data) {
    const { description, id, company, link_to_apply } = data.job;
    let convertedDescription = fromDb(description);
    return (
      <JobContainer>
        <BackButton to="/"> Back to search </BackButton>
        <h1>Work for {company}</h1>
        <JobDescription source={convertedDescription} />
        <ApplyContainer>
          <DeleteJob onClick={handleDeleteJob}>💥</DeleteJob>
          <ApplyLink href={link_to_apply}>Apply Now</ApplyLink>
        </ApplyContainer>
      </JobContainer>
    );
  }
}

export default Job;