From b3445bea1d084efde028e95153cdc6f1de7ee331 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Guzm=C3=A1n-Finn?= Date: Mon, 26 Apr 2021 16:02:26 -0400 Subject: [PATCH 1/3] initial report functionality --- front-end/src/components/Kudo.js | 48 ++++++++++++------- front-end/src/components/ReportModal.js | 63 +++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 16 deletions(-) create mode 100644 front-end/src/components/ReportModal.js diff --git a/front-end/src/components/Kudo.js b/front-end/src/components/Kudo.js index 56f07b80..0985629d 100644 --- a/front-end/src/components/Kudo.js +++ b/front-end/src/components/Kudo.js @@ -1,31 +1,32 @@ import React from 'react' -import {Grid, Card, CardContent, Typography, CardActions, Chip, Avatar} from '@material-ui/core' +import {Grid, Card, CardContent, Typography, CardActions, Chip, Avatar, Modal, Icon} from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles'; import MuiAccordion from '@material-ui/core/Accordion'; import MuiAccordionSummary from '@material-ui/core/AccordionSummary'; import MuiAccordionDetails from '@material-ui/core/AccordionDetails'; import Reactions from './Reactions'; +import ReportModal from './ReportModal'; +import { useState } from 'react' +import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; const useStyles = makeStyles({ root: { display: 'flex', }, recv: { -// <<<<<<< reactions -// display:'inline', -// color:'#a1a1a1', -// marginRight:'5px', -// paddingLeft: '2px', -// paddingRight: '2px', -// ======= - display:'inline', - backgroundColor:'#F2F2F2', - color:'#616161', - marginRight:'5px', - paddingLeft: '2px', - paddingRight: '2px', -// >>>>>>> main + display:'inline', + color:'#a1a1a1', + marginRight:'5px', + paddingLeft: '2px', + paddingRight: '2px', + }, + modalCenter: { + position: 'absolute', + top: '30%', + left: '50%', + transform: 'translate(-50%, -50%)', + outline: '0', }, }); @@ -73,14 +74,28 @@ const Accordion = withStyles({ //to, from, message, tags, kudoID, kudoReactions, compReactions export default function Kudo(props) { const classes = useStyles(); - const [expanded, setExpanded] = React.useState(false); + const [expanded, setExpanded] = useState(false); + const [showReport, toggleShowReport] = useState(false); + const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); }; return( +
+ toggleShowReport(false)} + aria-labelledby="report-modal" + aria-describedby="report-kudo" + > +
+ +
+ + toggleShowReport(true)}/> +
) } diff --git a/front-end/src/components/ReportModal.js b/front-end/src/components/ReportModal.js new file mode 100644 index 00000000..a034e099 --- /dev/null +++ b/front-end/src/components/ReportModal.js @@ -0,0 +1,63 @@ +import { Button, Card, CardContent, TextField, Grid } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import React, { useState, useEffect } from 'react'; + +// props: uir, uid, kudo_id +export default function ReportModal(props) { + // need uri, to, from, message + const [reason, updateReason] = useState('') + + + function handleSumbit() { + const uri = localStorage.getItem('uri'); + const uid = JSON.parse(localStorage.getItem('data')).uid + const kid = props.kid + fetch('http://localhost:5000/api/data/report_kudo', + { + method: 'POST', + headers: { + "Accept": "application/json", + "Content-Type": "application/json" + }, + body: JSON.stringify({uri, uid, kid, reason}) + }) + .then(response => { + if (props.toggleShowReport) { + props.toggleShowReport(false); + } + }); + updateReason(''); + } + + return ( + + +
{e.preventDefault(); handleSumbit();}}> + + + updateReason(e.target.value)} + /> + + + + + +
+ + + ); +} \ No newline at end of file From 1a565df7b8d618c5156d0b5b1a4310969a5e9fd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Guzm=C3=A1n-Finn?= Date: Mon, 26 Apr 2021 16:11:47 -0400 Subject: [PATCH 2/3] what is going on --- front-end/src/components/ReportModal.js | 1 - 1 file changed, 1 deletion(-) diff --git a/front-end/src/components/ReportModal.js b/front-end/src/components/ReportModal.js index a034e099..97e86594 100644 --- a/front-end/src/components/ReportModal.js +++ b/front-end/src/components/ReportModal.js @@ -1,5 +1,4 @@ import { Button, Card, CardContent, TextField, Grid } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; import React, { useState, useEffect } from 'react'; // props: uir, uid, kudo_id From 3e1a214b168ee77b8b7b498c60807478f03066ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Guzm=C3=A1n-Finn?= Date: Mon, 3 May 2021 02:25:00 -0400 Subject: [PATCH 3/3] popup on succesfull delete --- front-end/src/components/Kudo.js | 49 +++++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/front-end/src/components/Kudo.js b/front-end/src/components/Kudo.js index 6901e266..56773d28 100644 --- a/front-end/src/components/Kudo.js +++ b/front-end/src/components/Kudo.js @@ -76,14 +76,26 @@ export default function Kudo(props) { const [expanded, setExpanded] = useState(false); const [showReport, toggleShowReport] = useState(false); const [anchorEl, setAnchorEl] = useState(null); - const [showSuccess, toggleShowSuccess] = useState(false); + const [showSuccessReport, toggleShowSuccessReport] = useState(false); + const [showSuccessDelete, toggleShowSuccessDelete] = useState(false); useEffect(() => { - if(showSuccess) { - console.log('showSuccess', showSuccess) - setTimeout(() => toggleShowSuccess(false), 1500) + if(showSuccessReport) { + setTimeout(() => toggleShowSuccessReport(false), 1500) } - }, [showSuccess]) + }, [showSuccessReport]) + + useEffect(() => { + if(showSuccessDelete) { + setTimeout(() => { + props.getKudos(); + toggleShowSuccessDelete(false); + if(props.getReportedKudos) { + props.getReportedKudos() + } + }, 1500) + } + }, [showSuccessDelete]) const handleClick = event => { setAnchorEl(event.currentTarget); @@ -111,11 +123,8 @@ export default function Kudo(props) { }) .then(response => response.json()).then(data => { if(data) { - props.getKudos(); handleClose(); - if(props.getReportedKudos) { - props.getReportedKudos() - } + toggleShowSuccessDelete(true) } }); } @@ -130,17 +139,17 @@ export default function Kudo(props) { >
- +
toggleShowSuccess(false)} + open={showSuccessReport} + onClose={() => toggleShowSuccessReport(false)} aria-labelledby="report-confirmed" aria-describedby="report-kudo" > - +

Kudo Reported Successfully

@@ -148,6 +157,20 @@ export default function Kudo(props) {
+ toggleShowSuccessDelete(false)} + aria-labelledby="delete-confirmed" + aria-describedby="delete-kudo" + > + +
+ +

Kudo Deleted Successfully

+ +
+ +