should be done

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>
     )
 }