From 1801d7008cf31b0cdcad8b5818cc6bb2d6b59f36 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Mon, 8 Feb 2021 21:33:22 -0300
Subject: [PATCH] added snackbar to provide feedback
---
src/Components/ReportModal.js | 85 +++++++++++++++++------------------
1 file changed, 41 insertions(+), 44 deletions(-)
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 736d00b2..079ca75f 100644
--- a/src/Components/ReportModal.js
+++ b/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>
)
}
--
GitLab