Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Class to hook notfound page #938

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from
Open

Class to hook notfound page #938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0e741c6
deploy
Sep 10, 2022
caf9349
class-to-hook-adminpage
Oct 4, 2022
3c51e04
class-to-hook-alertdialog
Oct 4, 2022
be872b5
class-to-hook-auth-provider
Oct 7, 2022
77a9819
class-to-hook-confirm-dialog
Oct 7, 2022
5e03872
class-to-hook-delete-accountdialog
Oct 17, 2022
763e6cd
deploy
Oct 22, 2022
43a8a45
class-to-hook-errorboundary
Nov 3, 2022
f431860
class-to-hook-homepage
Nov 8, 2022
afc8dfe
class-to-hook-launch-screen
Nov 12, 2022
ab854bd
class-to-hook-links-tab
Nov 12, 2022
80e7ed8
class-to-hook-notfound-page
Nov 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 44 additions & 49 deletions template/src/components/AccountTab/AccountTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { useState, useEffect } from "react";

import PropTypes from "prop-types";

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -138,7 +159,7 @@ class AccountTab extends Component {
return <PersonIcon className={classes.personIcon} />;
};

uploadAvatar = () => {
const uploadAvatar = () => {
const { avatar } = this.state;

if (!avatar) {
Expand Down Expand Up @@ -185,7 +206,7 @@ class AccountTab extends Component {
);
};

removeAvatar = () => {
const removeAvatar = () => {
const { user } = this.props;

const { avatar, avatarUrl } = this.state;
Expand Down Expand Up @@ -244,7 +265,7 @@ class AccountTab extends Component {
}
};

showField = (fieldId) => {
const showField = (fieldId) => {
if (!fieldId) {
return;
}
Expand All @@ -254,7 +275,7 @@ class AccountTab extends Component {
});
};

hideFields = (callback) => {
const hideFields = (callback) => {
this.setState(
{
showingField: "",
Expand All @@ -272,7 +293,7 @@ class AccountTab extends Component {
);
};

changeFirstName = () => {
const changeFirstName = () => {
const { firstName } = this.state;

const errors = validate(
Expand Down Expand Up @@ -346,7 +367,7 @@ class AccountTab extends Component {
);
};

changeLastName = () => {
const changeLastName = () => {
const { lastName } = this.state;

const errors = validate(
Expand Down Expand Up @@ -420,7 +441,7 @@ class AccountTab extends Component {
);
};

changeUsername = () => {
const changeUsername = () => {
const { username } = this.state;

const errors = validate(
Expand Down Expand Up @@ -494,7 +515,7 @@ class AccountTab extends Component {
);
};

changeEmailAddress = () => {
const changeEmailAddress = () => {
const { emailAddress } = this.state;

const errors = validate(
Expand Down Expand Up @@ -568,7 +589,7 @@ class AccountTab extends Component {
);
};

verifyEmailAddress = () => {
const verifyEmailAddress = () => {
this.setState(
{
performingAction: true,
Expand Down Expand Up @@ -605,7 +626,7 @@ class AccountTab extends Component {
);
};

changeField = (fieldId) => {
const changeField = (fieldId) => {
switch (fieldId) {
case "first-name":
this.changeFirstName();
Expand All @@ -628,7 +649,7 @@ class AccountTab extends Component {
}
};

handleKeyDown = (event, fieldId) => {
const handleKeyDown = (event, fieldId) => {
if (!event || !fieldId) {
return;
}
Expand All @@ -650,7 +671,7 @@ class AccountTab extends Component {
}
};

handleAvatarChange = (event) => {
const handleAvatarChange = (event) => {
if (!event) {
return;
}
Expand Down Expand Up @@ -683,7 +704,7 @@ class AccountTab extends Component {
});
};

handleFirstNameChange = (event) => {
const handleFirstNameChange = (event) => {
if (!event) {
return;
}
Expand All @@ -695,7 +716,7 @@ class AccountTab extends Component {
});
};

handleLastNameChange = (event) => {
const handleLastNameChange = (event) => {
if (!event) {
return;
}
Expand All @@ -707,7 +728,7 @@ class AccountTab extends Component {
});
};

handleUsernameChange = (event) => {
const handleUsernameChange = (event) => {
if (!event) {
return;
}
Expand All @@ -719,7 +740,7 @@ class AccountTab extends Component {
});
};

handleEmailAddressChange = (event) => {
const handleEmailAddressChange = (event) => {
if (!event) {
return;
}
Expand All @@ -731,7 +752,6 @@ class AccountTab extends Component {
});
};

render() {
// Styling
const { classes } = this.props;

Expand Down Expand Up @@ -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 = {
Expand Down
14 changes: 7 additions & 7 deletions template/src/components/AdminPage/AdminPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
119 changes: 58 additions & 61 deletions template/src/components/AlertDialog/AlertDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
Loading