Fragment 2 - EmployeeDetails

import React from "react";
import propTypes from "prop-types";
import { Switch, Route, Redirect } from "react-router-dom";
import { createFragmentContainer, graphql } from "react-relay";
import RouteBasicInformation from "../pages/BasicInformation";
import RoutePayroll from "../pages/Payroll";
import RouteDocuments from "../pages/Documents";
import RouteNotes from "../pages/Notes";
import RouteReviews from "../pages/Reviews";

// local components
import EmployeeMenu from "../EmployeeMenu";
import EmployeeHeaderContainer from "./EmployeeHeader";

import cls from "../employeeDetails.scss";

class EmployeeDetailsContainer extends React.PureComponent {
  static propTypes = {
    match: propTypes.instanceOf(Object).isRequired,
    location: propTypes.instanceOf(Object).isRequired,
    employeeData: propTypes.instanceOf(Object).isRequired,
  };

  render() {
    const {
      match: { params: { id: urlEmployeeId } },
      location: { pathname },
      employeeData: { getEmployee },
    } = this.props;
    const rootRoute = "/people/employees/:id";
    const rootLinkRoute = `/people/employees/${urlEmployeeId}`;
    return (
      <React.Fragment>
        <div className={cls.pageEmployeeDetail}>
          <EmployeeMenu
            currentLocation={pathname}
            rootLinkRoute={rootLinkRoute}
          />
          <div className={cls.employeeContent}>
            <EmployeeHeaderContainer employeeHeader={getEmployee} />
            <div className={cls.employeeContentScroll}>
              <Switch>
                <Route
                  path={`${rootRoute}/basic_information`}
                  component={RouteBasicInformation}
                />
                <Route path={`${rootRoute}/payroll`} component={RoutePayroll} />
                <Route path={`${rootRoute}/reviews`} component={RouteReviews} />
                <Route path={`${rootRoute}/notes`} component={RouteNotes} />
                <Route
                  path={`${rootRoute}/documents_education`}
                  component={RouteDocuments}
                />
                {/* default to basic information */}
                <Route
                  component={() => (
                    <Redirect to={`${rootLinkRoute}/basic_information`} />
                  )}
                />
              </Switch>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default createFragmentContainer(
  EmployeeDetailsContainer,
  graphql`
    fragment EmployeeDetails_employeeData on Query
      @argumentDefinitions(globalId: { type: "String!" }) {
      getEmployee(globalId: $globalId) {
        ...EmployeeHeader_employeeHeader
      }
    }
  `,
);