Convert components to functional (#2108)

BaseSettingsComponent, DataEntryHeader, ExistingDataTable, ImmutableExistingData, MergeDupStepComponent, PronunciationsCell, Request, ReviewEntriesComponent

src/components/App/component.tsx

@@ -8,7 +8,7 @@ import LandingPage from "components/LandingPage";
 import Login from "components/Login/LoginPage";
 import SignUp from "components/Login/SignUpPage";
 import PageNotFound from "components/PageNotFound/component";
-import ResetRequest from "components/PasswordReset/RequestPage";
+import PasswordRequest from "components/PasswordReset/Request";
 import PasswordReset from "components/PasswordReset/ResetPage";
 import PrivateRoute from "components/PrivateRoute";
 import ProjectInvite from "components/ProjectInvite";
@@ -29,7 +29,7 @@ export default function App(): ReactElement {
           <Route path={Path.Login} component={Login} />
           <Route path={Path.SignUp} component={SignUp} />
           <Route path={`${Path.PwReset}/:token`} component={PasswordReset} />
-          <Route path={Path.PwRequest} component={ResetRequest} />
+          <Route path={Path.PwRequest} component={PasswordRequest} />
           <Route
             path={`${Path.ProjInvite}/:project/:token`}
             component={ProjectInvite}

src/components/BaseSettings/BaseSettingsComponent.tsx

@@ -1,56 +1,42 @@
 import { Grid, Typography } from "@mui/material";
-import React, { ReactElement, ReactNode } from "react";
+import { ReactElement, ReactNode, useState } from "react";
 
 import theme from "types/theme";
 
-interface SettingsProps {
+interface BaseSettingsProps {
   title: ReactNode;
   icon: ReactNode;
   body: ReactNode;
 }
 
-interface SettingsState {
-  isVisible: boolean;
-}
-
-export default class BaseSettingsComponent extends React.Component<
-  SettingsProps,
-  SettingsState
-> {
-  constructor(props: SettingsProps) {
-    super(props);
-    this.state = { isVisible: true };
-  }
+export default function BaseSettingsComponent(
+  props: BaseSettingsProps
+): ReactElement {
+  const [isVisible, setIsVisible] = useState(true);
 
-  toggleVisibility(): void {
-    this.setState((prevState) => ({
-      isVisible: !prevState.isVisible,
-    }));
-  }
+  const toggleVisibility = (): void => {
+    setIsVisible((previous) => !previous);
+  };
 
-  render(): ReactElement {
-    return (
-      <Grid item container xs={12} spacing={2} style={{ flexWrap: "nowrap" }}>
-        <Grid
-          item
-          style={{ marginTop: 4, color: "grey" }}
-          onClick={() => this.toggleVisibility()}
+  return (
+    <Grid item container xs={12} spacing={2} style={{ flexWrap: "nowrap" }}>
+      <Grid
+        item
+        style={{ marginTop: 4, color: "grey" }}
+        onClick={toggleVisibility}
+      >
+        {props.icon}
+      </Grid>
+      <Grid item>
+        <Typography
+          variant="h6"
+          style={{ marginBottom: isVisible ? theme.spacing(2) : 0 }}
+          onClick={() => toggleVisibility()}
         >
-          {this.props.icon}
-        </Grid>
-        <Grid item>
-          <Typography
-            variant="h6"
-            style={{
-              marginBottom: this.state.isVisible ? theme.spacing(2) : 0,
-            }}
-            onClick={() => this.toggleVisibility()}
-          >
-            {this.props.title}
-          </Typography>
-          {this.state.isVisible && this.props.body}
-        </Grid>
+          {props.title}
+        </Typography>
+        {isVisible && props.body}
       </Grid>
-    );
-  }
+    </Grid>
+  );
 }

src/components/DataEntry/DataEntryComponent.tsx

@@ -12,7 +12,7 @@ import { getFrontierWords, getSemanticDomainFull } from "backend";
 import AppBar from "components/AppBar/AppBarComponent";
 import DataEntryHeader from "components/DataEntry/DataEntryHeader/DataEntryHeader";
 import DataEntryTable from "components/DataEntry/DataEntryTable/DataEntryTable";
-import { ExistingDataTable } from "components/DataEntry/ExistingDataTable/ExistingDataTable";
+import ExistingDataTable from "components/DataEntry/ExistingDataTable/ExistingDataTable";
 import TreeView from "components/TreeView/TreeViewComponent";
 import { newSemanticDomain } from "types/semanticDomain";
 import theme from "types/theme";