chore(components): Converted 24 component files from class-based to functional

src/components/AddressTypePicker.jsx

@@ -17,66 +17,62 @@ import {
 // Actions
 import { setAddressType } from "../actions/settingsActions";
 
-class AddressTypePicker extends React.Component {
-  handleTypeChange = (event) => {
-    const { setType } = this.props;
+const AddressTypePicker = ({ setType, addressType, frozen }) => {
+  const handleTypeChange = (event) => {
     setType(event.target.value);
   };
 
-  render() {
-    const { addressType, frozen } = this.props;
-    return (
-      <Card>
-        <CardHeader title="Address Type" />
-        <CardContent>
-          <FormControl component="fieldset">
-            <RadioGroup>
-              <FormControlLabel
-                id={P2SH}
-                control={<Radio color="primary" />}
-                name="type"
-                value={P2SH}
-                label={P2SH}
-                onChange={this.handleTypeChange}
-                checked={addressType === P2SH}
-                disabled={frozen}
-              />
-              <FormControlLabel
-                id={P2SH_P2WSH}
-                control={<Radio color="primary" />}
-                name="type"
-                value={P2SH_P2WSH}
-                label={P2SH_P2WSH}
-                onChange={this.handleTypeChange}
-                checked={addressType === P2SH_P2WSH}
-                disabled={frozen}
-              />
-              <FormControlLabel
-                id={P2WSH}
-                control={<Radio color="primary" />}
-                name="type"
-                value={P2WSH}
-                label={P2WSH}
-                onChange={this.handleTypeChange}
-                checked={addressType === P2WSH}
-                disabled={frozen}
-              />
-            </RadioGroup>
-            <FormHelperText>
-              <small>
-                Choose &apos;
-                {P2WSH}
-                &apos; for best practices, &apos;
-                {P2SH}
-                &apos; for greatest compatibility.
-              </small>
-            </FormHelperText>
-          </FormControl>
-        </CardContent>
-      </Card>
-    );
-  }
-}
+  return (
+    <Card>
+      <CardHeader title="Address Type" />
+      <CardContent>
+        <FormControl component="fieldset">
+          <RadioGroup>
+            <FormControlLabel
+              id={P2SH}
+              control={<Radio color="primary" />}
+              name="type"
+              value={P2SH}
+              label={P2SH}
+              onChange={handleTypeChange}
+              checked={addressType === P2SH}
+              disabled={frozen}
+            />
+            <FormControlLabel
+              id={P2SH_P2WSH}
+              control={<Radio color="primary" />}
+              name="type"
+              value={P2SH_P2WSH}
+              label={P2SH_P2WSH}
+              onChange={handleTypeChange}
+              checked={addressType === P2SH_P2WSH}
+              disabled={frozen}
+            />
+            <FormControlLabel
+              id={P2WSH}
+              control={<Radio color="primary" />}
+              name="type"
+              value={P2WSH}
+              label={P2WSH}
+              onChange={handleTypeChange}
+              checked={addressType === P2WSH}
+              disabled={frozen}
+            />
+          </RadioGroup>
+          <FormHelperText>
+            <small>
+              Choose &apos;
+              {P2WSH}
+              &apos; for best practices, &apos;
+              {P2SH}
+              &apos; for greatest compatibility.
+            </small>
+          </FormHelperText>
+        </FormControl>
+      </CardContent>
+    </Card>
+  );
+};
 
 AddressTypePicker.propTypes = {
   addressType: PropTypes.string.isRequired,

src/components/AppContainer.jsx

@@ -1,31 +1,28 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { createBrowserHistory } from "history";
 import { connect } from "react-redux";
 
 import App from "./App";
 
-class AppContainer extends Component {
-  history = createBrowserHistory();
+const AppContainer = ({ resetApp }) => {
+  const history = createBrowserHistory();
 
-  componentDidMount() {
-    const { resetApp } = this.props;
+  useEffect(() => {
     // Listen for changes to the current location
     // and reset the redux store which is needed
     // to avoid conflicts in the state between views/pages
-    this.unlisten = this.history.listen(() => {
+    const unlisten = history.listen(() => {
       resetApp();
     });
-  }
 
-  componentWillUnmount() {
-    this.unlisten();
-  }
+    return () => {
+      unlisten();
+    };
+  }, []);
 
-  render() {
-    return <App />;
-  }
-}
+  return <App />;
+};
 
 AppContainer.propTypes = {
   resetApp: PropTypes.func.isRequired,