Entry point

/* eslint camelcase:0 */
import React from "react";
import PropTypes from "prop-types";
import { QueryRenderer, graphql } from "react-relay";
import { environment } from "@graphql";
import { Loader } from "@ematix/tesseract-component-library";

import EmployeeDetailsContainer from "./fragments/EmployeeDetails";

const query = graphql`
  query EmployeeDetailsQuery($globalId: String!) {
    ...EmployeeDetails_employeeData @arguments(globalId: $globalId)
  }
`;

const EmployeeDetails = (props) => {
  const { match: { params: { id: urlEmployeeId } } } = props;
  return (
    <QueryRenderer
      environment={environment}
      query={query}
      variables={{ globalId: urlEmployeeId }}
      render={({ error, props: gqlProps }) => {
        if (error) {
          return null;
        }
        if (!gqlProps) {
          return <Loader />;
        }
        return <EmployeeDetailsContainer employeeData={gqlProps} {...props} />;
      }}
    />
  );
};

EmployeeDetails.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    }),
  }).isRequired,
};

export default EmployeeDetails;