Class to hook errorboundary

template/src/components/AccountTab/AccountTab.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 
 import PropTypes from "prop-types";
 
@@ -102,14 +102,35 @@ const initialState = {
   errors: null,
 };
 
-class AccountTab extends Component {
-  constructor(props) {
-    super(props);
+function AccountTab() {
 
-    this.state = initialState;
-  }
+  const [initialState, useInitialState] = useState(""); 
 
-  getNameInitialsOrIcon = () => {
+  useEffect(() => {
+    const { user, userData } = this.props;
+
+    this.setState({
+      profileCompletion: authentication.getProfileCompletion({
+        ...user,
+        ...userData,
+      }),
+      securityRating: authentication.getSecurityRating(user, userData),
+    });
+  })
+
+  useEffect(() => {
+    const { avatarUrl } = this.state;
+
+    if (avatarUrl) {
+      URL.revokeObjectURL(avatarUrl);
+
+      this.setState({
+        avatarUrl: "",
+      });
+    }
+  })
+
+  const getNameInitialsOrIcon = () => {
     const { user } = this.props;
 
     if (!user) {
@@ -138,7 +159,7 @@ class AccountTab extends Component {
     return <PersonIcon className={classes.personIcon} />;
   };
 
-  uploadAvatar = () => {
+  const uploadAvatar = () => {
     const { avatar } = this.state;
 
     if (!avatar) {
@@ -185,7 +206,7 @@ class AccountTab extends Component {
     );
   };
 
-  removeAvatar = () => {
+  const removeAvatar = () => {
     const { user } = this.props;
 
     const { avatar, avatarUrl } = this.state;
@@ -244,7 +265,7 @@ class AccountTab extends Component {
     }
   };
 
-  showField = (fieldId) => {
+  const showField = (fieldId) => {
     if (!fieldId) {
       return;
     }
@@ -254,7 +275,7 @@ class AccountTab extends Component {
     });
   };
 
-  hideFields = (callback) => {
+  const hideFields = (callback) => {
     this.setState(
       {
         showingField: "",
@@ -272,7 +293,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeFirstName = () => {
+  const changeFirstName = () => {
     const { firstName } = this.state;
 
     const errors = validate(
@@ -346,7 +367,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeLastName = () => {
+  const changeLastName = () => {
     const { lastName } = this.state;
 
     const errors = validate(
@@ -420,7 +441,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeUsername = () => {
+  const changeUsername = () => {
     const { username } = this.state;
 
     const errors = validate(
@@ -494,7 +515,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeEmailAddress = () => {
+  const changeEmailAddress = () => {
     const { emailAddress } = this.state;
 
     const errors = validate(
@@ -568,7 +589,7 @@ class AccountTab extends Component {
     );
   };
 
-  verifyEmailAddress = () => {
+  const verifyEmailAddress = () => {
     this.setState(
       {
         performingAction: true,
@@ -605,7 +626,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeField = (fieldId) => {
+  const changeField = (fieldId) => {
     switch (fieldId) {
       case "first-name":
         this.changeFirstName();
@@ -628,7 +649,7 @@ class AccountTab extends Component {
     }
   };
 
-  handleKeyDown = (event, fieldId) => {
+  const handleKeyDown = (event, fieldId) => {
     if (!event || !fieldId) {
       return;
     }
@@ -650,7 +671,7 @@ class AccountTab extends Component {
     }
   };
 
-  handleAvatarChange = (event) => {
+  const handleAvatarChange = (event) => {
     if (!event) {
       return;
     }
@@ -683,7 +704,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleFirstNameChange = (event) => {
+  const handleFirstNameChange = (event) => {
     if (!event) {
       return;
     }
@@ -695,7 +716,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleLastNameChange = (event) => {
+  const handleLastNameChange = (event) => {
     if (!event) {
       return;
     }
@@ -707,7 +728,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleUsernameChange = (event) => {
+  const handleUsernameChange = (event) => {
     if (!event) {
       return;
     }
@@ -719,7 +740,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleEmailAddressChange = (event) => {
+  const handleEmailAddressChange = (event) => {
     if (!event) {
       return;
     }
@@ -731,7 +752,6 @@ class AccountTab extends Component {
     });
   };
 
-  render() {
     // Styling
     const { classes } = this.props;
 
@@ -1618,31 +1638,6 @@ class AccountTab extends Component {
         </List>
       </DialogContent>
     );
-  }
-
-  componentDidMount() {
-    const { user, userData } = this.props;
-
-    this.setState({
-      profileCompletion: authentication.getProfileCompletion({
-        ...user,
-        ...userData,
-      }),
-      securityRating: authentication.getSecurityRating(user, userData),
-    });
-  }
-
-  componentWillUnmount() {
-    const { avatarUrl } = this.state;
-
-    if (avatarUrl) {
-      URL.revokeObjectURL(avatarUrl);
-
-      this.setState({
-        avatarUrl: "",
-      });
-    }
-  }
 }
 
 AccountTab.propTypes = {

template/src/components/AdminPage/AdminPage.js

@@ -1,11 +1,11 @@
-import React, { Component } from "react";
+import React from "react"; 
 
-import EmptyState from "../EmptyState";
+import EmptyState from '../EmptyState'; 
 
-class AdminPage extends Component {
-  render() {
-    return <EmptyState title="Admin" />;
-  }
+function AdminPage() {
+  return (
+    <EmptyState title="Admin" /> 
+  )
 }
 
-export default AdminPage;
+export default AdminPage; 

template/src/components/AlertDialog/AlertDialog.js

@@ -1,70 +1,67 @@
-import React, { Component } from "react";
-
-import PropTypes from "prop-types";
-
-import { withStyles } from "@material-ui/core/styles";
-
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-} from "@material-ui/core";
-
-const styles = (theme) => ({
+import React from "react"; 
+import PropTypes from "prop-types"; 
+import { withStyles } from "@material-ui/core/styles"; 
+
+import { 
+  Dialog, 
+  DialogTitle, 
+  DialogContent, 
+  DialogContentText, 
+  DialogActions, 
+} from "@material-ui/core"; 
+
+const styles = theme => ({
   noTitlePadding: {
-    paddingTop: theme.spacing(3),
-  },
-});
-
-class AlertDialog extends Component {
-  render() {
-    // Styling
-    const { classes } = this.props;
-
-    // Dialog Properties
-    const { dialogProps } = this.props;
-
-    // Custom Properties
-    const {
-      title,
-      contentText,
-      dismissiveAction,
-      confirmingAction,
-      acknowledgementAction,
-    } = this.props;
-
-    if ((dismissiveAction || confirmingAction) && acknowledgementAction) {
-      console.error(
-        "Dialogs should contain a maximum of two actions. " +
-          "If a single action is provided, it must be an acknowledgement action. " +
-          "If two actions are provided, one must be a confirming action, and the other a dismissing action. " +
-          "Providing a third action such as “Learn more” is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished. " +
-          "https://material.io/design/components/dialogs.html#actions"
-      );
+    paddingTop: theme.spacing(3), 
+  }, 
+}); 
+
+function AlertDialog() {
+
+  //Styling 
+  const { classes } = this.props; 
+
+  //Dialog Properties 
+  const { dialogProps } = this.props; 
+
+  //Custom Properties 
+  const {
+    title, 
+    contentText, 
+    dismissiveAction, 
+    confirmAction, 
+    acknowledgementAction, 
+  } = this.props; 
+
+  if ((dismissiveAction || confirmAction) && acknowledgementAction) {
+    console.error(
+      "Dialogs should contain a maximum of two actions. " +
+        "If a single action is provided, it must be an acknowledgement action. " +
+        "If two actions are provided, one must be a confirming action, and the other a dismissing action. " +
+        "Providing a third action such as “Learn more” is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished. " +
+        "https://material.io/design/components/dialogs.html#actions"
+    );
 
-      return null;
-    }
+    return null; 
+  }
 
-    return (
-      <Dialog {...dialogProps}>
-        {title && <DialogTitle>{title}</DialogTitle>}
+  return (
+    <Dialog {...dialogProps}>
+      {title && <DialogTitle>{title}</DialogTitle>}
 
-        <DialogContent className={title ? null : classes.noTitlePadding}>
-          <DialogContentText>{contentText}</DialogContentText>
-        </DialogContent>
+      <DialogContent className={title ? null : classes.noTitlePadding}>
+        <DialogContentText>{contentText}</DialogContentText>
+      </DialogContent>
 
-        {(dismissiveAction || confirmingAction || acknowledgementAction) && (
-          <DialogActions>
-            {dismissiveAction}
-            {confirmingAction}
-            {acknowledgementAction}
-          </DialogActions>
+      {(dismissiveAction || confirmAction || acknowledgementAction) && (
+        <DialogActions>
+          {dismissiveAction}
+          {confirmAction}
+          {acknowledgementAction}
+        </DialogActions>
         )}
-      </Dialog>
-    );
-  }
+    </Dialog>
+  )
 }
 
 AlertDialog.propTypes = {