Added snackbar alert in case of errors on signUp

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>
+        </>
     )
 }