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 ( - - {title && {title}} + return ( + + {title && {title}} - - {contentText} - + + {contentText} + - {(dismissiveAction || confirmingAction || acknowledgementAction) && ( - - {dismissiveAction} - {confirmingAction} - {acknowledgementAction} - + {(dismissiveAction || confirmAction || acknowledgementAction) && ( + + {dismissiveAction} + {confirmAction} + {acknowledgementAction} + )} - - ); - } + + ) } 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 ( + <>