Payroll Route(Entry point)

import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import { translate, Trans } from "react-i18next";

import { withRouter } from "react-router-dom";
import { graphql, environment } from "@graphql";
import { QueryRenderer } from "react-relay";
import {
  ContentBlock,
  Header,
  Icon,
  Content,
} from "@ematix/tesseract-component-library";

import cls from "./styles.scss";
import { ContractForm, SalaryForm, TaxForm, BankForm } from "./Forms";

const query = graphql`
  query PayrollQuery($globalId: String!) {
    getEmployee(globalId: $globalId) {
      person {
        ...Tax_taxInfo
      }
    }
  }
`;

class Payroll extends React.PureComponent {
  static propTypes = {
    className: PropTypes.string,
    match: PropTypes.instanceOf(Object).isRequired,
  };

  static defaultProps = {
    className: null,
  };

  state = {
    contractForm: true,
    salaryForm: true,
    bankForm: true,
    taxForm: true,
  };

  formReadOnlyChange = formName => () => {
    this.setState({
      [formName]: !this.state[formName],
    });
  };

  render() {
    const { className } = this.props;
    const employeeId = this.props.match.params.id;
    return (
      <QueryRenderer
        environment={environment}
        variables={{ globalId: employeeId }}
        query={query}
        render={({ error, props: gqlProps }) => {
          if (error) {
            return null;
          }
          if (!gqlProps) {
            return <div>Loading</div>;
          }
          return (
            <div className={classnames(className)}>
              <ContentBlock>
                <Header className={cls.header}>
                  <h2 className={cls.title}>
                    <Trans>Contract</Trans>
                  </h2>
                  <Icon
                    className={classnames(cls.edit, {
                      [cls.active]: this.state.contractForm,
                    })}
                    onClick={this.formReadOnlyChange("contractForm")}
                  >
                    edit
                  </Icon>
                </Header>
                <Content>
                  <ContractForm
                    isReadOnly={this.state.contractForm}
                    variables={{ id: employeeId }}
                  />
                </Content>
              </ContentBlock>
              <ContentBlock>
                <Header className={cls.header}>
                  <h2 className={cls.title}>
                    <Trans>Salary</Trans>
                  </h2>
                  <Icon
                    className={classnames(cls.edit, {
                      [cls.active]: this.state.salaryForm,
                    })}
                    onClick={this.formReadOnlyChange("salaryForm")}
                  >
                    edit
                  </Icon>
                </Header>
                <Content>
                  <SalaryForm
                    isReadOnly={this.state.salaryForm}
                    variables={{ id: employeeId }}
                  />
                </Content>
              </ContentBlock>
              <ContentBlock>
                <Header className={cls.header}>
                  <h2 className={cls.title}>
                    <Trans>Bank Information</Trans>
                  </h2>
                  <Icon
                    className={classnames(cls.edit, {
                      [cls.active]: this.state.bankForm,
                    })}
                    onClick={this.formReadOnlyChange("bankForm")}
                  >
                    edit
                  </Icon>
                </Header>
                <Content>
                  <BankForm
                    isReadOnly={this.state.bankForm}
                    variables={{ id: employeeId }}
                  />
                </Content>
              </ContentBlock>
              <TaxForm taxInfo={gqlProps.getEmployee.person} />
            </div>
          );
        }}
      />
    );
  }
}
export default withRouter(translate("Payroll")(Payroll));