feat: add function for close/hide alerts when have callback errors.

Author: maximilianoalves

README.md

@@ -22,13 +22,13 @@ Caso tenho algum projeto aberto na porta 3000, no terminal o react irá te pergu
   * [x] Login com sucesso.
   * [x] Validação de erros.
   * [x] Redirecionamento baseado no perfil do usuário.
-  * [ ] Fechar alertas/msg de erros.
+  * [x] Fechar alertas/msg de erros.
 
 * [ ] Cadastrar Usuários
   * [x] Cadastrar usuários com sucesso.
   * [x] Validação de erros.
   * [x] Ao cadastrar ser redirecionado conforme for o perfil.
-  * [ ] Fechar alertas/msg de erros.
+  * [x] Fechar alertas/msg de erros.
 
 * [ ] Administrador
 
@@ -41,13 +41,13 @@ Caso tenho algum projeto aberto na porta 3000, no terminal o react irá te pergu
     * [x] Cadastrar usuários com sucesso.
     * [x] Validação de erros.
     * [x] Ao cadastrar ser redirecionado para lista de usuários.
-    * [ ] Fechar alertas/msg de erros.
+    * [x] Fechar alertas/msg de erros.
 
   * [ ] Cadastrar Produtos
     * [x] Cadastrar produtos com sucesso.
     * [x] Validação de erros.
     * [x] Ao cadastrar ser redirecionado para lista de produtos.
-    * [ ] Fechar alertas/msg de erros.
+    * [x] Fechar alertas/msg de erros.
 
   * [ ] Listar Usuários
     * [x] Listar usuários com sucesso.

src/component/errorAlert.js

@@ -1,22 +1,44 @@
 import React, { Component } from 'react';
 import 'bootswatch/dist/minty/bootstrap.min.css';
+import '../styles/errorAlert.css'
 
 export default class ErrorAlert extends Component {
-  constructor(props) {
-    super(props);
+
+  constructor(props, context) {
+    super(props, context);
     this.state = {
       display: true,
     };
   }
 
+  shouldComponentUpdate() {
+    if (!this.state.display) {
+      this.setState({
+        display: true
+      })
+    }
+    return true
+  }
+
+  handleClose() {
+    if(this.state.display) {
+      this.setState({
+        display: false
+      })
+    }
+  }
+
   render() {
-    return (
-      <div>
-        { this.state.display
-          && <div className="alert alert-dismissible alert-secondary">
-            <b>{ this.props.name }</b>
-          </div>}
-      </div>
-    );
+      if (this.state.display) {
+        return (
+          <div className="alert alert-secondary alert-dismissible" role="alert" key={this.state.key}>
+            <button type="button" className="close btn-close-error-alert" data-dismiss="alert" aria-label="Close" onClick={() => this.handleClose()}>
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <span>{ this.props.name }</span>
+          </div>
+        );
+      }
+      return <div/>
   }
 }

src/styles/errorAlert.css

@@ -0,0 +1,4 @@
+.btn-close-error-alert {
+    opacity: 1;
+    box-shadow: 0px 0px 0px 0px rgb(221 221 221);
+}

src/views/admin/registerProducts.js

@@ -86,7 +86,7 @@ class RegisterProducts extends React.Component {
         <Navbar></Navbar>
         <form className="jumbotron" onSubmit={ this.submitHandler }>
           { this.state.msg_error.map((item , index)=> {
-            return <ErrorAlert name={ item } key={ index } display={ this.state.display }></ErrorAlert>;
+            return <ErrorAlert name={ item } key={ index }></ErrorAlert>;
           })}
           <h1>Cadastro de Produtos</h1>
           <hr className="my-4"></hr>

src/views/admin/registerUser.js

@@ -63,7 +63,7 @@ class RegisterUsers extends React.Component {
         <Navbar></Navbar>
         <form className="jumbotron" onSubmit={ this.submitHandler }>
             { this.state.msg_error.map((item , index)=> {
-              return <ErrorAlert name={ item } key={ index } display={ this.state.display }></ErrorAlert>;
+              return <ErrorAlert name={ item } key={ index }></ErrorAlert>;
             }) }
           <h1>Cadastro de usuários</h1>
           <hr className="my-4"></hr>

src/views/admin/showUsers.js

@@ -71,7 +71,7 @@ class ShowUsers extends React.Component {
       <>
       <div className="col">
       { this.state.msg_error.map((item, index) => {
-          return <ErrorAlert name={ item } key={ index } display={ this.state.display }></ErrorAlert>;
+          return <ErrorAlert name={ item } key={ index }></ErrorAlert>;
         })}
       </div>
         <table className="table table-striped">

src/views/login.js

@@ -145,7 +145,7 @@ class Login extends React.Component {
           <h2 className="font-robot">Login</h2>
           <br />
             { this.state.msg_error.map((item, index) => {
-              return <ErrorAlert name={ item } key={ index } display={ this.state.display }></ErrorAlert>;
+              return <ErrorAlert name={ item } key={ index }></ErrorAlert>;
             })}
             <input
               type="email"

src/views/registerUser.js

@@ -78,8 +78,8 @@ class RegisterUser extends React.Component {
            <img className="imagem" src={ logo1 } width="200" height="200" />
           <h2 className="font-robot">Cadastro </h2>
           { msg_success !== "Cadastro realizado com sucesso" ? null : <SuccessAlert name={ msg_success } display={ this.state.display }></SuccessAlert>}
-          { this.state.msg_error.map((item, index)=> {
-            return <ErrorAlert name={ item } key={index} display={ this.state.display }></ErrorAlert>;
+          { this.state.msg_error.map((item, index) => {
+            return <ErrorAlert name={ item } key={ index }></ErrorAlert>;
           }) }
             <input
               type="text"