diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index ad12516196b48b8e51503738229b1feeddb41b86..e7134dc7d6736abd081fc800ec81db845e413e2c 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -32,11 +32,14 @@ import axios from 'axios'
import {apiUrl} from '../env';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
+import ModalExcluir from './ModalExcluirComentario.js'
export default function Comment (props) {
/*
Required props:
+ rerenderCallback = callback function to trigger re-render on parent component
+ reviewRatings = required to update comment even though the user cannot update their rating score...
objectID = collection/learning object id
reviewID = self-explanatory I hope
authorID = author id; links to public user page
@@ -48,18 +51,11 @@ export default function Comment (props) {
createdAt
recurso : boolean; determines whether to display orange or purple font
*/
-
- const [editando, setEditando] = useState(false)
- const {state} = useContext(Store)
-
var moment = require('moment')
- const [comment, setComment] = useState(props.description)
- const updateComment = () => {
- {/*axios.put( (`${apiUrl}/learning_objects/` + props.objectID + '/reviews/' + props.reviewID))*/}
- setEditando(false)
- }
-
+ const {state} = useContext(Store)
+ const [displayedComment, setDisplayedComment] = useState(props.description)
+ const [editando, setEditando] = useState(false)
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
@@ -67,9 +63,71 @@ export default function Comment (props) {
const handleClose = () => {
setAnchorEl(null);
};
+ const [modalOpen, toggleModal] = useState(false)
+
+ const [comment, setComment] = useState({
+ error : false,
+ value : props.description
+ })
+ const handleChange = (e) => {
+ const userInput = e.target.value
+ const flag = (userInput.length === 0 ? true : false);
+ setComment({...comment, error : flag, value : userInput})
+ }
+
+ const updateComment = () => {
+ const finalComment = comment
+ if (!finalComment.error) {
+ let config = {
+ headers : {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'Client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'Uid': sessionStorage.getItem('@portalmec/uid'),
+ }
+ }
+ let payload = {
+ "review" : {
+ "name":null,
+ "description":finalComment.value,
+ "pros":null,
+ "cons":null,
+ "review_ratings_attributes" : props.reviewRatings
+ }
+ }
+
+ axios.put( (`${apiUrl}/learning_objects/` + props.objectID + '/reviews/' + props.reviewID),payload, config
+ ).then((response) => {console.log(response)}, (error) => {console.log(error)})
+ setDisplayedComment(finalComment.value)
+ setEditando(false)
+ }
+ }
+
+ const deleteComment = () => {
+ let config = {
+ headers : {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'Client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'Uid': sessionStorage.getItem('@portalmec/uid'),
+ }
+ }
+ axios.delete( (`${apiUrl}/learning_objects/` + props.objectID + '/reviews/' + props.reviewID), config).then((response) => {props.rerenderCallback()}, (error) => {console.log(error)})
+
+ toggleModal(false)
+
+ }
return (
+ <React.Fragment>
+ <ModalExcluir
+ open={modalOpen} handleClose={() => {toggleModal(false)}}
+ handleConfirm={deleteComment}
+ />
<Grid container style={{paddingLeft : "20px"}}>
+
<Grid item xs={1}>
{
props.authorID &&
@@ -111,10 +169,10 @@ export default function Comment (props) {
id = "input-comentario"
label = {"Editar Comentário"}
margin = "normal"
- value = {comment}
+ value = {comment.value}
multiline={true}
rows="5"
- onChange = {(e) => {setComment(e.target.value)}}
+ onChange = {(e) => {handleChange(e)}}
style={{width:"100%"}}
/>
</div>
@@ -150,10 +208,10 @@ export default function Comment (props) {
{props.authorName}
</Link>
}
- : {props.description}
+ : {displayedComment}
</p>
{
- props.authorID !== state.currentUser.userId &&
+ props.authorID !== state.currentUser.id &&
<span className="date">
{moment(props.createdAt).format("DD/MM/YYYY")}
</span>
@@ -166,22 +224,26 @@ export default function Comment (props) {
</Comentario>
</Grid>
- <Grid item xs={1}>
- <StyledDiv>
- <Button onClick={handleClick}><EditIcon/></Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <MenuItem onClick={() => {setEditando(true); handleClose()}}>Editar</MenuItem>
- <MenuItem onClick={handleClose}>Excluir</MenuItem>
- </Menu>
- </StyledDiv>
- </Grid>
+ {
+ props.authorID === state.currentUser.id &&
+ <Grid item xs={1}>
+ <StyledDiv>
+ <Button onClick={handleClick}><EditIcon/></Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <MenuItem onClick={() => {setEditando(true); handleClose()}}>Editar</MenuItem>
+ <MenuItem onClick={() => {toggleModal(true);handleClose()}}>Excluir</MenuItem>
+ </Menu>
+ </StyledDiv>
+ </Grid>
+ }
</Grid>
+ </React.Fragment>
)
}