added snackbar to provide feedback

src/Components/ReportModal.js

@@ -16,7 +16,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 { Button } from '@material-ui/core';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
@@ -28,6 +28,7 @@ import ReportUserForm from './ReportUserForm.js'
 import ReportRecursoForm from './ReportRecursoForm.js'
 import ReportColecaoForm from './ReportColecaoForm.js'
 import {postRequest} from './HelperFunctions/getAxiosConfig'
+import SnackbarComponent from './SnackbarComponent.js'
 
 function CloseModalButton (props) {
     return (
@@ -39,6 +40,7 @@ function CloseModalButton (props) {
 
 export default function ReportModal (props) {
     const {state} = useContext(Store)
+    const [snackbarOpen, handleSnackbar] = useState(false)
 
     const handleSubmit  = (complaint_reason_id, description) => {
         const url = `/complaints/`
@@ -52,7 +54,11 @@ export default function ReportModal (props) {
             }
         }
 
-        postRequest(url, payload, (data) => {console.log(data)}, (error) => {console.log(error)})
+        postRequest(url, payload, (data) => {
+            console.log(data)
+            props.handleClose();
+            handleSnackbar(true);
+        }, (error) => {console.log(error)})
 
     }
 
@@ -73,49 +79,40 @@ export default function ReportModal (props) {
             }
     }
 
-    /* const renderForm = (formType) => {
-        switch (formType) {
-						case 'colecao':
-							return (
-								<ReportCollectionForm
-									handleClose={props.handleClose}
-									handleSubmit={handleSubmit}
-								/>
-							);
-							break;
-            }
-    } */
-
     return (
-        <StyledModal
-            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}>
-                <ReportContainer>
-                    <Header>
-                        <span style={{width:"32px"}}/>
-                        <h2>O que está acontecendo?</h2>
-                        <CloseModalButton handleClose={props.handleClose}/>
-                    </Header>
-
-                    <Content>
-                        {
-                            renderForm(props.form)
-                        }
-                    </Content>
-                </ReportContainer>
-            </Fade>
-        </StyledModal>
+        <React.Fragment>
+            <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}
+                />
+            <StyledModal
+                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}>
+                    <ReportContainer>
+                        <Header>
+                            <span style={{width:"32px"}}/>
+                            <h2>O que está acontecendo?</h2>
+                            <CloseModalButton handleClose={props.handleClose}/>
+                        </Header>
+
+                        <Content>
+                            {
+                                renderForm(props.form)
+                            }
+                        </Content>
+                    </ReportContainer>
+                </Fade>
+            </StyledModal>
+        </React.Fragment>
     )
 }