wip; missing excluir modal and PUT call to backend

src/Components/Comment.js

@@ -26,10 +26,19 @@ import {apiDomain} from '../env';
 import noAvatar from "../img/default_profile.png";
 import Rating from '@material-ui/lab/Rating';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
+import EditIcon from '@material-ui/icons/Edit';
+import TextField from "@material-ui/core/TextField";
+import axios from 'axios'
+import {apiUrl} from '../env';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
 
 export default function Comment (props) {
+
     /*
     Required props:
+        objectID = collection/learning object id
+        reviewID = self-explanatory I hope
         authorID = author id; links to public user page
         authorAvatar = either a string denoting the author's avatar file location or null
         rating = star rating
@@ -45,6 +54,20 @@ export default function Comment (props) {
 
     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 [anchorEl, setAnchorEl] = React.useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
     return (
         <Grid container style={{paddingLeft : "20px"}}>
             <Grid item xs={1}>
@@ -81,13 +104,38 @@ export default function Comment (props) {
                         {
                             editando ?
                             (
-                                [
-                                    <span>edita ai irmao</span>
-                                ]
+                                <React.Fragment>
+                                    <div style={{marginTop : "5%", padding : "2px"}}>
+                                        <TextField
+                                            id = "input-comentario"
+                                            label = {"Editar Comentário"}
+                                            margin = "normal"
+                                            value = {comment}
+                                            multiline={true}
+                                            rows="5"
+                                            onChange = {(e) => {setComment(e.target.value)}}
+                                            style={{width:"100%"}}
+                                        />
+                                    </div>
+                                    <div style={{float : "right"}}>
+                                    <StyledButton
+                                        style={props.recurso ? {backgroundColor : "#ff7f00"} : {backgroundColor : "#673ab7"}}
+                                        onClick={() => {setEditando(false)}}
+                                    >
+                                        Fechar
+                                    </StyledButton>
+                                    <StyledButton
+                                        style={props.recurso ? {backgroundColor : "#ff7f00"} : {backgroundColor : "#673ab7"}}
+                                        onClick={() => updateComment()}
+                                    >
+                                        Salvar
+                                    </StyledButton>
+                                    </div>
+                                </React.Fragment>
                             )
                             :
                             (
-                                [
+                                <React.Fragment>
                                     <p>
                                         {
                                             props.authorID &&
@@ -103,23 +151,54 @@ export default function Comment (props) {
                                         }
                                         : {props.description}
                                     </p>
-                                ]
+                                    {
+                                        props.authorID !== state.currentUser.userId &&
+                                        <span className="date">
+                                            {moment(props.createdAt).format("DD/MM/YYYY")}
+                                        </span>
+                                    }
+                                </React.Fragment>
                             )
                         }
                     </div>
 
-                    {
-                        props.authorID !== state.currentUser.userId &&
-                        <span className="date">
-                            {moment(props.createdAt).format("DD/MM/YYYY")}
-                        </span>
-                    }
                 </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>
         </Grid>
     )
 }
 
+const StyledDiv = styled.div`
+     text-align : center;
+     .MuiButton-root {
+         @media screen and (max-width: 990px) {
+             padding-right : 35px !important;
+         }
+     }
+`
+const StyledButton = styled(Button)`
+    color : rgba(255,255,255,0.87) !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    margin : 6px 8px !important;
+    font-weight : 600 !important;
+`
+
 const Comentario = styled.div`
     @media screen and (max-width: 990px) {
         padding-left : 55px !important;