Webatrice: Registration toasts (#4566)

* wip

* Registration Success Toast

* remove debugging code

* remove unused field

* Show toast on successful password reset

* Toast on account activation success

* lint and PR feedback

* Rework interface names to avoid collision

* Move CssBaseline to sibling of ToastProvider

Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
Brent Clark 2022-02-15 19:40:30 -06:00 committed by GitHub
parent 88b861d632
commit 4c04b4ef5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 164 additions and 13 deletions

View file

@ -1,5 +1,4 @@
// eslint-disable-next-line
import React, { Component } from "react";
import { Component } from 'react';
import { Provider } from 'react-redux';
import { MemoryRouter as Router } from 'react-router-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
@ -10,6 +9,8 @@ import FeatureDetection from './FeatureDetection';
import './AppShell.css';
import { ToastProvider } from 'components/Toast'
class AppShell extends Component {
componentDidMount() {
// @TODO (1)
@ -24,14 +25,16 @@ class AppShell extends Component {
return (
<Provider store={store}>
<CssBaseline />
<div className="AppShell" onContextMenu={this.handleContextMenu}>
<Router>
<Header />
<ToastProvider>
<div className="AppShell" onContextMenu={this.handleContextMenu}>
<Router>
<Header />
<FeatureDetection />
<Routes />
</Router>
</div>
<FeatureDetection />
<Routes />
</Router>
</div>
</ToastProvider>
</Provider>
);
}

View file

@ -17,6 +17,7 @@ import { RouteEnum, WebSocketConnectOptions, getHostPort } from 'types';
import { ServerSelectors, ServerTypes } from 'store';
import './Login.css';
import { useToast } from 'components/Toast';
const useStyles = makeStyles(theme => ({
root: {
@ -68,16 +69,21 @@ const Login = ({ state, description }: LoginProps) => {
});
const [userToResetPassword, setUserToResetPassword] = useState(null);
const passwordResetToast = useToast({ key: 'password-reset-success', children: 'Password Reset Successfully' })
const accountActivatedToast = useToast({ key: 'account-activation-success', children: 'Account Activated Successfully' })
useReduxEffect(() => {
closeRequestPasswordResetDialog();
openResetPasswordDialog();
}, ServerTypes.RESET_PASSWORD_REQUESTED, []);
useReduxEffect(() => {
passwordResetToast.openToast()
closeResetPasswordDialog();
}, ServerTypes.RESET_PASSWORD_SUCCESS, []);
useReduxEffect(() => {
accountActivatedToast.openToast()
closeActivateAccountDialog();
}, ServerTypes.ACCOUNT_ACTIVATION_SUCCESS, []);