diff --git a/template/src/components/AccountTab/AccountTab.js b/template/src/components/AccountTab/AccountTab.js
index 65dc34a0..4ed3f97c 100644
--- a/template/src/components/AccountTab/AccountTab.js
+++ b/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 ;
};
- 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 {
);
- }
-
- 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 = {
diff --git a/template/src/components/AdminPage/AdminPage.js b/template/src/components/AdminPage/AdminPage.js
index 8f7269b6..b0038fde 100644
--- a/template/src/components/AdminPage/AdminPage.js
+++ b/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 ;
- }
+function AdminPage() {
+ return (
+
+ )
}
-export default AdminPage;
+export default AdminPage;
diff --git a/template/src/components/AlertDialog/AlertDialog.js b/template/src/components/AlertDialog/AlertDialog.js
index d1b2e5df..a500c2c1 100644
--- a/template/src/components/AlertDialog/AlertDialog.js
+++ b/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 (
-
+ )
}
AlertDialog.propTypes = {
diff --git a/template/src/components/AuthProviderList/AuthProviderList.js b/template/src/components/AuthProviderList/AuthProviderList.js
index e7d0cbae..1dc74d42 100644
--- a/template/src/components/AuthProviderList/AuthProviderList.js
+++ b/template/src/components/AuthProviderList/AuthProviderList.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
import PropTypes from "prop-types";
@@ -8,43 +8,42 @@ import { Box, ButtonGroup, Button } from "@material-ui/core";
import authProviders from "../../data/auth-providers";
-class AuthProviderList extends Component {
- render() {
- // Properties
- const { gutterBottom, performingAction } = this.props;
-
- // Events
- const { onAuthProviderClick } = this.props;
-
- return (
-
-
- {authProviders.map((authProvider) => {
- const AuthProviderButton = withStyles({
- root: {
- color: authProvider.color,
- },
- })(Button);
-
- return (
- onAuthProviderClick(authProvider)}
- >
- {authProvider.name}
-
- );
- })}
-
-
- );
- }
+function AuthProviderList() {
+
+ //Properties
+ const {gutterBottom, performingAction } = this.props;
+
+ //Events
+ const { onAuthProviderClick } = this.props;
+
+ return (
+
+
+ {authProviders.map((authProvider) => {
+ const AuthProviderButton = withStyles({
+ root: {
+ color: authProvider.color,
+ },
+ })(Button);
+
+ return (
+ onAuthProviderClick(authProvider)}
+ >
+ {authProvider.name}
+
+ );
+ })}
+
+
+ )
}
AuthProviderList.defaultProps = {
@@ -61,4 +60,4 @@ AuthProviderList.propTypes = {
onAuthProviderClick: PropTypes.func.isRequired,
};
-export default AuthProviderList;
+export default AuthProviderList;
diff --git a/template/src/components/ConfirmationDialog/ConfirmationDialog.js b/template/src/components/ConfirmationDialog/ConfirmationDialog.js
index 31e215b3..4e52db51 100644
--- a/template/src/components/ConfirmationDialog/ConfirmationDialog.js
+++ b/template/src/components/ConfirmationDialog/ConfirmationDialog.js
@@ -1,36 +1,34 @@
-import React, { Component } from "react";
+import React from "react";
import PropTypes from "prop-types";
import { Dialog, DialogTitle, DialogActions } from "@material-ui/core";
-class ConfirmationDialog extends Component {
- render() {
- // Dialog Properties
- const { dialogProps } = this.props;
+function ConfirmationDialog() {
- // Custom Properties
- const { title, content, dismissiveAction, confirmingAction } = this.props;
+ //Dialog Properties
+ const { dialogProps } = this.props;
- if (!dismissiveAction || !confirmingAction) {
- console.error("Provide confirmation and dismissive buttons.");
+ //Custom Properties
+ const { title, content, dismissiveAction, confirmingAction } = this.props;
- return null;
- }
+ if (!dismissiveAction || !confirmingAction) {
+ console.error("Provide confirmation and dismissive buttons.");
+ return null;
+ }
- return (
-
- {title && {title}}
+ return (
+
+ {title && {title}}
- {content}
+ {content}
-
- {dismissiveAction}
- {confirmingAction}
-
-
- );
- }
+
+ {dismissiveAction}
+ {confirmingAction}
+
+
+ )
}
ConfirmationDialog.propTypes = {
diff --git a/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js b/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js
index 1b8cb07a..2a2339d3 100644
--- a/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js
+++ b/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js
@@ -1,84 +1,75 @@
-import React, { Component } from "react";
-
-import PropTypes from "prop-types";
-
-import {
- Dialog,
- DialogTitle,
- DialogContent,
- DialogContentText,
- DialogActions,
- Hidden,
- Box,
- TextField,
- Button,
-} from "@material-ui/core";
+import React, { useState } from "react";
+
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogContentText,
+ DialogActions,
+ Hidden,
+ Box,
+ TextField,
+ Button,
+} from "@material-ui/core";
const initialState = {
- username: "",
-};
+ username: "",
+}
-class DeleteAccountDialog extends Component {
- constructor(props) {
- super(props);
+function DeleteAccountDialog() {
- this.state = initialState;
- }
+ const [initialState, setInitialState] = useState("");
- handleKeyPress = (event) => {
- const { userData } = this.props;
+ const handleKeyPress = event => {
+ const { userData } = this.props;
if (userData && userData.username) {
- const { username } = this.state;
+ const { username } = this.state;
if (!username) {
- return;
+ return;
}
if (username !== userData.username) {
- return;
+ return;
}
}
- const key = event.key;
+ const key = event.key;
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
- return;
- }
+ return;
+ }
if (key === "Enter") {
- this.props.deleteAccount();
+ this.props.deleteAccount();
}
- };
+ }
- handleExited = () => {
- this.setState(initialState);
- };
+ const handleExited = () => {
+ setInitialState(initialState);
+ }
- handleUsernameChange = (event) => {
- const username = event.target.value;
+ const handleUsernameChange = event => {
+ const username = event.target.value;
this.setState({
- username: username,
- });
- };
+ username: username,
+ })
+ }
- render() {
- // Dialog Properties
- const { dialogProps } = this.props;
+ const { dialogProps } = this.props;
- // Custom Properties
- const { performingAction, userData } = this.props;
+ const { performingAction, userData } = this.props;
- // Custom Functions
- const { deleteAccount } = this.props;
+ const { deleteAccount } = this.props;
- const { username } = this.state;
+ const { username } = this.state;
- const hasUsername = userData && userData.username;
+ const hasUsername = userData && userData.username;
- return (
-
- );
- }
+ )
}
-DeleteAccountDialog.propTypes = {
- // Dialog Properties
- dialogProps: PropTypes.object.isRequired,
-
- // Custom Properties
- performingAction: PropTypes.bool.isRequired,
- userData: PropTypes.object,
-
- // Custom Functions
- deleteAccount: PropTypes.func.isRequired,
-};
-
-export default DeleteAccountDialog;
+export default DeleteAccountDialog;
diff --git a/template/src/components/DialogHost/DialogHost.js b/template/src/components/DialogHost/DialogHost.js
index 69d5ccc6..b74e4ffc 100644
--- a/template/src/components/DialogHost/DialogHost.js
+++ b/template/src/components/DialogHost/DialogHost.js
@@ -1,34 +1,30 @@
-import React, { Component } from "react";
+import React from "react";
+import PropTypes from "prop-types";
+import { Hidden } from "@material-ui/core";
+import AboutDialog from "../AboutDialog";
-import PropTypes from "prop-types";
+import SignUpDialog from "../SignUpDialog";
+import SignInDialog from "../SignInDialog";
+import SettingsDialog from "../SettingsDialog";
+import DeleteAccountDialog from "../DeleteAccountDialog";
+import AlertDialog from "../AlertDialog";
-import { Hidden } from "@material-ui/core";
+function DialogHost() {
+ //Properties
+ const { performingAction, theme, user, userData, dialogs } = this.props;
-import AboutDialog from "../AboutDialog";
-
-import SignUpDialog from "../SignUpDialog";
-import SignInDialog from "../SignInDialog";
-import SettingsDialog from "../SettingsDialog";
-import DeleteAccountDialog from "../DeleteAccountDialog";
-import AlertDialog from "../AlertDialog";
-
-class DialogHost extends Component {
- render() {
- // Properties
- const { performingAction, theme, user, userData, dialogs } = this.props;
-
- // Functions
- const { openSnackbar } = this.props;
+ // Functions
+ const { openSnackbar } = this.props;
- const aboutDialog = dialogs.aboutDialog;
- const signUpDialog = dialogs.signUpDialog;
- const signInDialog = dialogs.signInDialog;
- const settingsDialog = dialogs.settingsDialog;
- const deleteAccountDialog = dialogs.deleteAccountDialog;
- const signOutDialog = dialogs.signOutDialog;
+ const aboutDialog = dialogs.aboutDialog;
+ const signUpDialog = dialogs.signUpDialog;
+ const signInDialog = dialogs.signInDialog;
+ const settingsDialog = dialogs.settingsDialog;
+ const deleteAccountDialog = dialogs.deleteAccountDialog;
+ const signOutDialog = dialogs.signOutDialog;
- return (
- <>
+ return (
+ <>
>
- );
- }
+ );
}
DialogHost.propTypes = {
@@ -195,6 +190,6 @@ DialogHost.propTypes = {
// Functions
openSnackbar: PropTypes.func.isRequired,
-};
+};
-export default DialogHost;
+export default DialogHost;
diff --git a/template/src/components/ErrorBoundary/ErrorBoundary.js b/template/src/components/ErrorBoundary/ErrorBoundary.js
index 730abfd6..7c2569e4 100644
--- a/template/src/components/ErrorBoundary/ErrorBoundary.js
+++ b/template/src/components/ErrorBoundary/ErrorBoundary.js
@@ -1,62 +1,44 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import * as Sentry from "@sentry/browser";
+import EmptyState from "../EmptyState";
+import { ReactComponent as ErrorIllustration } from "../../illustrations/error.svg";
-import PropTypes from "prop-types";
+function ErrorBoundary() {
-import * as Sentry from "@sentry/browser";
+ //useState
+ const [hasError, setHasError] = useState(false);
+ const [eventId, setEventId] = useState(null);
-import EmptyState from "../EmptyState";
-
-import { ReactComponent as ErrorIllustration } from "../../illustrations/error.svg";
-
-class ErrorBoundary extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- hasError: false,
- eventId: null,
- };
- }
-
- static getDerivedStateFromError(error) {
- return { hasError: true };
- }
-
- componentDidCatch(error, errorInfo) {
+ useEffect((error, errorInfo) => {
Sentry.withScope((scope) => {
- scope.setExtras(errorInfo);
-
- const eventId = Sentry.captureException(error);
+ scope.setExtras(errorInfo);
- this.setState({
- eventId: eventId,
- });
- });
- }
+ const eventId = Sentry.captureException(error);
- render() {
- // Properties
- const { children } = this.props;
+ setEventId(eventId);
+ })
+ })
- const { hasError } = this.state;
+ //Properties
+ const { children } = this.props;
- if (hasError) {
- return (
- }
- title="Something went wrong"
- description="The app failed to load"
- />
- );
- }
-
- return children;
+ if (hasError) {
+ return (
+ }
+ title="Something went wrong"
+ description="The app failed to load"
+ />
+ );
}
+
+ return children;
}
ErrorBoundary.propTypes = {
- // Properties
- children: PropTypes.array.isRequired,
-};
+ //Properties
+ children: PropTypes.array.isRequired,
+};
-export default ErrorBoundary;
+export default ErrorBoundary;