From ac5212acfb692c69013fa6185df041a7723f5010 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Thu, 21 May 2020 10:18:47 -0300
Subject: [PATCH] wip; missing excluir modal and PUT call to backend
---
src/Components/Comment.js | 101 +++++++++++++++++++++++++++++++++-----
1 file changed, 90 insertions(+), 11 deletions(-)
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 753d926b..ac49feb7 100644
--- a/src/Components/Comment.js
+++ b/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;
--
GitLab