From fe9a7a7615ad2832ed5e4ca7806ebfdd55fd4057 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Tue, 22 Jun 2021 11:49:26 -0300
Subject: [PATCH] Added snackbar alert in case of errors on signUp
---
src/Components/SignUpModal.js | 74 ++++++++++++++++++++++++-----------
1 file changed, 51 insertions(+), 23 deletions(-)
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index e0167807..61c4fb28 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -15,7 +15,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
@@ -23,11 +23,27 @@ import styled from 'styled-components'
import SignUpContainer from './SignUpContainerFunction.js'
import {Store} from '../Store.js'
import {authentication} from './HelperFunctions/getAxiosConfig'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
//import {postRequest} from './HelperFunctions/getAxiosConfig'
+export function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
export default function SignUpModal (props) {
const { state, dispatch } = useContext(Store)
+ const [snackbarOpened, handleSnackbar] = useState(false)
+
+ const handleCloseSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+
+ handleSnackbar(false);
+ }
+
function handleSuccess (data) {
dispatch ({
type: 'USER_SIGNED_UP',
@@ -36,6 +52,11 @@ export default function SignUpModal (props) {
})
props.handleClose()
}
+
+ function handleError (error) {
+ handleSnackbar(true)
+ }
+
const handleLoginInfo = (newLogin) => {
const url = `/auth`
const payload = {
@@ -46,32 +67,39 @@ export default function SignUpModal (props) {
// terms_of_service : true,
// avatar: ""
}
- authentication(url, payload, handleSuccess, (error) => {console.log(error)})
+ authentication(url, payload, handleSuccess, handleError)
//postRequest(url, payload, handleSuccess, (error) => {console.log(error)})
}
return (
- <StyledModalSignUp
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
-
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={props.open}>
- <SignUpContainer
- handleClose={props.handleClose}
- openLogin={props.openLogin}
- handleLoginInfo = {handleLoginInfo}
- />
- </Fade>
- </StyledModalSignUp>
+ <>
+ <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
+ anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+ >
+ <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
+ </Snackbar>
+ <StyledModalSignUp
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={props.open}>
+ <SignUpContainer
+ handleClose={props.handleClose}
+ openLogin={props.openLogin}
+ handleLoginInfo = {handleLoginInfo}
+ />
+ </Fade>
+ </StyledModalSignUp>
+ </>
)
}
--
GitLab