areaSearch: refactor 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,17 +12,13 @@ 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 => ({

src/areaSearch/components/AreaSearchApplicantInfoCheckEdit.tsx

@@ -1,4 +1,4 @@
-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";
@@ -20,26 +20,22 @@ type Props = OwnProps & {
   }>;
 };
 
-class PlotApplicationApplicantInfoCheck extends PureComponent<Props> {
-  render(): React.ReactNode {
-    const {
-      infoCheckIds,
-      answer,
-      submissionErrors
-    } = this.props;
-    return <ApplicantInfoCheckEdit answer={answer} infoCheckIds={infoCheckIds} submissionErrors={submissionErrors} showMarkAll={false} />;
-  }
-
-}
+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 formName = getApplicantInfoCheckFormName(props.identifier);
   const infoCheckIds = getApplicationApplicantInfoCheckData(state).filter(item => item.entry === props.identifier).map(item => item.id);
-  return {
-    infoCheckIds,
-    formName,
+    return {
+      infoCheckIds,
+      formName,
     submissionErrors: getApplicantInfoCheckSubmissionErrors(state, infoCheckIds)
-  };
+    };
 }, {
   change
 })(PlotApplicationApplicantInfoCheck) as React.ComponentType<OwnProps>);

src/areaSearch/components/AreaSearchApplication.tsx

@@ -1,5 +1,5 @@
 import { $Shape } from "utility-types";
-import React, { Component, Fragment } from "react";
+import React, { useState, Fragment } from "react";
 import { connect } from "react-redux";
 import flowRight from "lodash/flowRight";
 import orderBy from "lodash/orderBy";
@@ -37,30 +37,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 +112,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 +223,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, 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";
@@ -23,101 +22,73 @@ type Props = {
   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
-    });
-  }
-
-  static getDerivedStateFromProps(props: Props, state: State) {
-    const newState: any = {};
+      limit: LIST_TABLE_PAGE_SIZE,
+    };
 
-    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>
+      <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),
+    return {
+      auditLogList: getAuditLogByAreaSearch(state, props.areaSearchId),
+      isEditMode: getIsEditMode(state),
     isFetching: getIsFetchingByAreaSearch(state, props.areaSearchId)
-  };
+    };
 }, {
   fetchAuditLogByAreaSearch
 })(AreaSearchApplicationAuditLog);

src/areaSearch/components/AreaSearchApplicationCreateForm.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { flowRight } from "lodash/util";
 import { getFormValues, reduxForm } from "redux-form";
@@ -19,16 +19,15 @@ type Props = OwnProps & {
   valid: boolean;
 };
 
-class AreaSearchApplicationCreateForm extends Component<Props> {
-  componentDidMount() {
-    const {
-      initialize,
-      formData,
-      formValues,
-      fieldTypeMapping,
-      receiveFormValidFlags,
-      valid
-    } = this.props;
+const AreaSearchApplicationCreateForm = ({
+  initialize,
+  formData,
+  formValues,
+  fieldTypeMapping,
+  receiveFormValidFlags,
+  valid,
+}: Props) => {
+  useEffect(() => {
     receiveFormValidFlags({
       [FormNames.AREA_SEARCH_CREATE_FORM]: valid
     });
@@ -38,30 +37,18 @@ class AreaSearchApplicationCreateForm extends Component<Props> {
         form: getInitialApplicationForm(fieldTypeMapping, formData)
       });
     }
-  }
+  }, []);
 
-  componentDidUpdate(prevProps) {
-    const {
-      receiveFormValidFlags
-    } = this.props;
+  useEffect(() => {
+    receiveFormValidFlags({
+      [FormNames.AREA_SEARCH_CREATE_FORM]: valid,
+    });
+  }, [valid]);
 
-    if (prevProps.valid !== this.props.valid) {
-      receiveFormValidFlags({
-        [FormNames.AREA_SEARCH_CREATE_FORM]: this.props.valid
-      });
-    }
+  if (!formValues?.form) {
+    return null;
   }
 
-  render(): React.ReactNode {
-    const {
-      formData,
-      formValues
-    } = this.props;
-
-    if (!formValues?.form) {
-      return null;
-    }
-
     return <div>
         {formData.sections.map(section => <ApplicationSubsection path={['form.sections']} section={section} headerTag="h2" key={section.id} formName={FormNames.AREA_SEARCH_CREATE_FORM} formPath='form' sectionTitleTransformers={[]} answerId={null} />)}
       </div>;
@@ -70,12 +57,12 @@ class AreaSearchApplicationCreateForm extends Component<Props> {
 }
 
 export default (flowRight(connect(state => ({
-  fieldTypeMapping: getFieldTypeMapping(state),
+      fieldTypeMapping: getFieldTypeMapping(state),
   formValues: getFormValues(FormNames.AREA_SEARCH_CREATE_FORM)(state)
 }), {
   receiveFormValidFlags
 }), reduxForm({
-  form: FormNames.AREA_SEARCH_CREATE_FORM,
-  destroyOnUnmount: false,
+    form: FormNames.AREA_SEARCH_CREATE_FORM,
+    destroyOnUnmount: false,
   validate: validateApplicationForm('form')
 }))(AreaSearchApplicationCreateForm) as React.ComponentType<OwnProps>);