refactor areaSearch into hooks

src/areaSearch/components/AreaSearchApplicantInfoCheck.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { getFieldOptions } from "util/helpers";
 import type { Attributes } from "types";
@@ -12,19 +12,20 @@ type Props = OwnProps & {
  infoCheckAttributes: Attributes;
 };
 
-class AreaSearchApplicantInfoCheck extends PureComponent<Props> {
- render(): React.ReactNode {
- const {
- infoCheckAttributes,
- infoCheckData
- } = this.props;
- const infoCheckStateOptions = getFieldOptions(infoCheckAttributes, 'state');
- const infoChecks = getApplicantInfoCheckItems(infoCheckData);
- return <ApplicantInfoCheck infoChecks={infoChecks} infoCheckStateOptions={infoCheckStateOptions} />;
- }
-
-}
+const AreaSearchApplicantInfoCheck = ({
+ infoCheckAttributes,
+ infoCheckData,
+}: Props) => {
+ const infoCheckStateOptions = getFieldOptions(infoCheckAttributes, "state");
+ const infoChecks = getApplicantInfoCheckItems(infoCheckData);
+ return (
+ <ApplicantInfoCheck
+ infoChecks={infoChecks}
+ infoCheckStateOptions={infoCheckStateOptions}
+ />
+ );
+};
 
-export default (connect(state => ({
- infoCheckAttributes: getApplicantInfoCheckAttributes(state)
-}))(AreaSearchApplicantInfoCheck) as React.ComponentType<OwnProps>);
+export default connect((state) => ({
+ infoCheckAttributes: getApplicantInfoCheckAttributes(state),
+}))(AreaSearchApplicantInfoCheck) as React.ComponentType<OwnProps>;

src/areaSearch/components/AreaSearchApplicantInfoCheckEdit.tsx

@@ -1,8 +1,10 @@
-import React, { PureComponent } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { change } from "redux-form";
-import PlotApplicationInfoCheckCollapse from "plotApplications/components/infoCheck/PlotApplicationInfoCheckCollapse";
-import { getApplicantInfoCheckSubmissionErrors, getApplicationApplicantInfoCheckData } from "areaSearch/selectors";
+import {
+ getApplicantInfoCheckSubmissionErrors,
+ getApplicationApplicantInfoCheckData,
+} from "areaSearch/selectors";
 import ApplicantInfoCheckEdit from "application/components/infoCheck/ApplicantInfoCheckEdit";
 import { getApplicantInfoCheckFormName } from "application/helpers";
 type OwnProps = {
@@ -16,30 +18,43 @@ type Props = OwnProps & {
  submissionErrors: Array<{
  id: number;
  kind: Record<string, any> | null | undefined;
- error: (Record<string, any> | null | undefined) | (Array<Record<string, any>> | null | undefined);
+ error:
+ | (Record<string, any> | null | undefined)
+ | (Array<Record<string, any>> | null | undefined);
  }>;
 };
 
-class PlotApplicationApplicantInfoCheck extends PureComponent<Props> {
- render(): React.ReactNode {
- const {
+const PlotApplicationApplicantInfoCheck = ({
+ infoCheckIds,
+ answer,
+ submissionErrors,
+}: Props) => {
+ return (
+ <ApplicantInfoCheckEdit
+ answer={answer}
+ infoCheckIds={infoCheckIds}
+ submissionErrors={submissionErrors}
+ showMarkAll={false}
+ />
+ );
+};
+
+export default connect(
+ (state, props) => {
+ const formName = getApplicantInfoCheckFormName(props.identifier);
+ const infoCheckIds = getApplicationApplicantInfoCheckData(state)
+ .filter((item) => item.entry === props.identifier)
+ .map((item) => item.id);
+ return {
  infoCheckIds,
- answer,
- submissionErrors
- } = this.props;
- return <ApplicantInfoCheckEdit answer={answer} infoCheckIds={infoCheckIds} submissionErrors={submissionErrors} showMarkAll={false} />;
+ formName,
+ submissionErrors: getApplicantInfoCheckSubmissionErrors(
+ state,
+ infoCheckIds
+ ),
+ };
+ },
+ {
+ change,
  }
-
-}
-
-export default (connect((state, props) => {
- const formName = getApplicantInfoCheckFormName(props.identifier);
- const infoCheckIds = getApplicationApplicantInfoCheckData(state).filter(item => item.entry === props.identifier).map(item => item.id);
- return {
- infoCheckIds,
- formName,
- submissionErrors: getApplicantInfoCheckSubmissionErrors(state, infoCheckIds)
- };
-}, {
- change
-})(PlotApplicationApplicantInfoCheck) as React.ComponentType<OwnProps>);
+)(PlotApplicationApplicantInfoCheck) as React.ComponentType<OwnProps>;

src/areaSearch/components/AreaSearchApplication.tsx

@@ -1,5 +1,4 @@
-import { $Shape } from "utility-types";
-import React, { Component, Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { connect } from "react-redux";
 import flowRight from "lodash/flowRight";
 import orderBy from "lodash/orderBy";
@@ -37,30 +36,21 @@ type Props = OwnProps & {
  formAttributes: Attributes;
  areaSearchAttributes: Attributes;
 };
-type State = {
+
+const AreaSearchApplication = ({
+ areaSearch,
+ isFetchingFormAttributes,
+ formAttributes,
+ areaSearchAttributes
+}: Props) => {
  // The Leaflet element doesn't initialize correctly if it's invisible in a collapsed section element,
  // only rendering some map tiles and calculating the viewport from given bounds incorrectly, until an
  // action that forces it to update its dimensions (like resizing the window) happens. We can
  // circumvent this by forcing it to rerender with a key whenever that section is opened; during
  // the opening transition, the initialization works properly.
- selectedAreaSectionRefreshKey: number;
-};
+ const [selectedAreaSectionRefreshKey, setSelectedAreaSectionRefreshKey] =
+ useState<number>(0);
 
-class AreaSearchApplication extends Component<Props, State> {
- state: any = {
- selectedAreaSectionRefreshKey: 0
- };
-
- render(): React.ReactNode {
- const {
- areaSearch,
- isFetchingFormAttributes,
- formAttributes,
- areaSearchAttributes
- } = this.props;
- const {
- selectedAreaSectionRefreshKey
- } = this.state;
  const fieldTypes = getFieldAttributes(formAttributes, 'sections.child.children.fields.child.children.type.choices');
  let form: Form | null | undefined;
  let answer: Record<string, any> | null | undefined;
@@ -121,9 +111,7 @@ class AreaSearchApplication extends Component<Props, State> {
  </Collapse>
  <Collapse headerTitle={selectedAreaTitle} onToggle={isOpen => {
  if (isOpen) {
- this.setState(state => ({
- selectedAreaSectionRefreshKey: state.selectedAreaSectionRefreshKey + 1
- }));
+ setSelectedAreaSectionRefreshKey(selectedAreaSectionRefreshKey + 1);
  }
  }} defaultOpen>
  <SingleAreaSearchMap geometry={areaSearch.geometry} key={selectedAreaSectionRefreshKey} minimap />
@@ -234,8 +222,6 @@ class AreaSearchApplication extends Component<Props, State> {
  </Collapse>
  </>}
  </div>;
- }
-
 }
 
 export default (flowRight(connect(state => ({

src/areaSearch/components/AreaSearchApplicationAuditLog.tsx

@@ -1,6 +1,5 @@
-import React, { Fragment, PureComponent } from "react";
+import React, { Fragment, PureComponent, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import isEmpty from "lodash/isEmpty";
 import AuditLogTable from "components/auditLog/AuditLogTable";
 import Divider from "components/content/Divider";
 import Loader from "components/loader/Loader";
@@ -11,113 +10,104 @@ import Title from "components/content/Title";
 import { fetchAuditLogByAreaSearch } from "auditLog/actions";
 import { LIST_TABLE_PAGE_SIZE } from "util/constants";
 import { AreaSearchFieldPaths, AreaSearchFieldTitles } from "areaSearch/enums";
-import { getApiResponseCount, getApiResponseMaxPage, getApiResponseResults } from "util/helpers";
+import {
+ getApiResponseCount,
+ getApiResponseMaxPage,
+ getApiResponseResults,
+} from "util/helpers";
 import { getUiDataLeaseKey } from "uiData/helpers";
-import { getAuditLogByAreaSearch, getIsFetchingByAreaSearch } from "auditLog/selectors";
+import {
+ getAuditLogByAreaSearch,
+ getIsFetchingByAreaSearch,
+} from "auditLog/selectors";
 import { getIsEditMode } from "leases/selectors";
 import type { AuditLogList } from "auditLog/types";
+
 type Props = {
  auditLogList: AuditLogList;
  fetchAuditLogByAreaSearch: (...args: Array<any>) => any;
  isEditMode: boolean;
  isFetching: boolean;
  areaSearchId: string;
 };
-type State = {
- activePage: number;
- auditLogItems: Array<Record<string, any>>;
- auditLogList: AuditLogList;
- count: number;
- maxPage: number;
-};
 
-class AreaSearchApplicationAuditLog extends PureComponent<Props, State> {
- state = {
- activePage: 1,
- auditLogItems: [],
- auditLogList: {},
- count: 0,
- maxPage: 0
+const AreaSearchApplicationAuditLog = ({
+ isEditMode,
+ isFetching,
+ fetchAuditLogByAreaSearch,
+ areaSearchId,
+ auditLogList
+}: Props) => {
+ const [activePage, setActivePage] = useState(1);
+ const [auditLogItems, setAuditLogItems] = useState([]);
+ const [maxPage, setMaxPage] = useState(0);
+
+ const handlePageClick = (page: number) => {
+ setActivePage(page);
  };
 
- componentDidMount() {
- const {
- fetchAuditLogByAreaSearch,
- areaSearchId
- } = this.props;
- fetchAuditLogByAreaSearch({
+ useEffect(() => {
+ const payload: any = {
  id: areaSearchId,
- limit: LIST_TABLE_PAGE_SIZE
- });
- }
+ limit: LIST_TABLE_PAGE_SIZE,
+ };
 
- static getDerivedStateFromProps(props: Props, state: State) {
- const newState: any = {};
-
- if (props.auditLogList !== state.auditLogList) {
- newState.auditLogList = props.auditLogList;
- newState.auditLogItems = getApiResponseResults(props.auditLogList);
- newState.count = getApiResponseCount(props.auditLogList);
- newState.maxPage = getApiResponseMaxPage(props.auditLogList, LIST_TABLE_PAGE_SIZE);
+ // activePage used to be page (parameter of the handlePageClick function)
+ // TODO: Check if it's correct to use activePage here, instead of page
+ if (activePage > 1) {
+ payload.offset = (activePage - 1) * LIST_TABLE_PAGE_SIZE;
  }
 
- return !isEmpty(newState) ? newState : null;
- }
-
- handlePageClick = (page: number) => {
- const {
- fetchAuditLogByAreaSearch,
- areaSearchId
- } = this.props;
- this.setState({
- activePage: page
- }, () => {
- const payload: any = {
- id: areaSearchId,
- limit: LIST_TABLE_PAGE_SIZE
- };
+ fetchAuditLogByAreaSearch(payload);
+ }, [activePage]);
 
-  if (page > 1) {
-  payload.offset = (page - 1) * LIST_TABLE_PAGE_SIZE;
-  }
+ useEffect(() => {
+ setAuditLogItems(getApiResponseResults(auditLogList))
+ setMaxPage(getApiResponseMaxPage(auditLogList, LIST_TABLE_PAGE_SIZE))
 
- fetchAuditLogByAreaSearch(payload);
+ fetchAuditLogByAreaSearch({
+ id: areaSearchId,
+ limit: LIST_TABLE_PAGE_SIZE,
  });
- };
+ }, []);
 
- render() {
- const {
- isEditMode,
- isFetching
- } = this.props;
- const {
- activePage,
- auditLogItems,
- maxPage
- } = this.state;
- return <Fragment>
- <Title enableUiDataEdit={isEditMode} uiDataKey={getUiDataLeaseKey(AreaSearchFieldPaths.AUDIT_LOG)}>
- {AreaSearchFieldTitles.AUDIT_LOG}
- </Title>
- <Divider />
+ return (
+ <Fragment>
+ <Title
+ enableUiDataEdit={isEditMode}
+ uiDataKey={getUiDataLeaseKey(AreaSearchFieldPaths.AUDIT_LOG)}
+ >
+ {AreaSearchFieldTitles.AUDIT_LOG}
+ </Title>
+ <Divider />
 
- <TableWrapper>
- {isFetching && <LoaderWrapper className='relative-overlay-wrapper'><Loader isLoading={isFetching} /></LoaderWrapper>}
+ <TableWrapper>
+ {isFetching && (
+ <LoaderWrapper className="relative-overlay-wrapper">
+ <Loader isLoading={isFetching} />
+ </LoaderWrapper>
+ )}
 
- <AuditLogTable items={auditLogItems} />
- <Pagination activePage={activePage} maxPage={maxPage} onPageClick={this.handlePageClick} />
- </TableWrapper>
- </Fragment>;
- }
-
-}
+ <AuditLogTable items={auditLogItems} />
+ <Pagination
+ activePage={activePage}
+ maxPage={maxPage}
+ onPageClick={handlePageClick}
+ />
+ </TableWrapper>
+ </Fragment>
+ );
+};
 
-export default connect((state, props: Props) => {
- return {
- auditLogList: getAuditLogByAreaSearch(state, props.areaSearchId),
- isEditMode: getIsEditMode(state),
- isFetching: getIsFetchingByAreaSearch(state, props.areaSearchId)
- };
-}, {
- fetchAuditLogByAreaSearch
-})(AreaSearchApplicationAuditLog);
+export default connect(
+ (state, props: Props) => {
+ return {
+ auditLogList: getAuditLogByAreaSearch(state, props.areaSearchId),
+ isEditMode: getIsEditMode(state),
+ isFetching: getIsFetchingByAreaSearch(state, props.areaSearchId),
+ };
+ },
+ {
+ fetchAuditLogByAreaSearch,
+ }
+)(AreaSearchApplicationAuditLog);