/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useState, useContext } from 'react'
import { Store } from '../Store.js'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import { Button } from '@material-ui/core';
import { Link } from 'react-router-dom'
import { apiDomain } from '../env';
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 Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import ModalExcluir from "./ModalExcluirComentario.js";
import { putRequest, deleteRequest } from "./HelperFunctions/getAxiosConfig";
import { makeStyles } from "@material-ui/styles";
//Image Import
import { noAvatar } from "ImportImages.js";
const useStyles = makeStyles((theme) => ({
darkTextField: {
maxWidth: "100%",
fontSize: "15px",
fontWeight: "lighter",
color: "white",
width: "100%",
},
lightTextField: {
maxWidth: "100%",
fontSize: "15px",
fontWeight: "lighter",
color: "black",
width: "100%",
},
}));
export default function Comment(props) {
var moment = require("moment");
const classes = useStyles();
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);
};
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 });
};
function handleOnSuccessfulComment(data) {
setDisplayedComment(comment.value);
setEditando(false);
props.handlePost();
}
const updateComment = () => {
const finalComment = comment;
let url;
if (props.isCollection)
url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
if (!finalComment.error) {
let payload = {
review: {
description: finalComment.value,
review_ratings_attributes: props.reviewRatings,
},
};
putRequest(url, payload, handleOnSuccessfulComment, (error) => {
console.log(error);
});
}
};
function handleSuccessDeleteComment(data) {
props.rerenderCallback();
props.handleSnackbar(3);
}
const deleteComment = () => {
let url;
if (props.isCollection)
url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
deleteRequest(url, handleSuccessDeleteComment, (error) => {
console.log(error);
});
toggleModal(false);
};
if (props.authorID)
return (
<React.Fragment>
<ModalExcluir
contrast={state.contrast}
open={modalOpen}
handleClose={() => {
toggleModal(false);
}}
handleConfirm={deleteComment}
/>
<Grid container style={{ paddingLeft: "20px" }}>
<Grid item xs={1}>
{props.authorID && (
<AvatarDiv>
<Link to={"/usuario-publico/" + props.authorID}>
<img
src={
props.authorAvatar
? apiDomain + props.authorAvatar
: noAvatar
}
alt="author avatar"
/>
</Link>
</AvatarDiv>
)}
</Grid>
<Grid item xs={10}>
<Comentario contrast={state.contrast}>
<div className="star-rating-container">
<Rating
name="read-only"
value={props.rating}
readOnly
size="small"
style={
state.contrast === ""
? { color: "#666" }
: { color: "yellow" }
}
emptyIcon={
<StarBorderIcon
fontSize="inherit"
style={
state.contrast === ""
? { color: "#a5a5a5" }
: { color: "yellow" }
}
/>
}
/>
</div>
{props.name && <strong>{props.name}</strong>}
<div>
{editando ? (
<React.Fragment>
<div style={{ marginTop: "5%", padding: "2px" }}>
<StyledTextField
contrast={props.contrast}
colecao={!props.recurso}
id="input-comentario"
label={"Editar Comentário"}
margin="normal"
value={comment.value}
InputProps={
props.contrast === ""
? { className: classes.lightTextField }
: { className: classes.darkTextField }
}
variant="outlined"
multiline={true}
rows="5"
onChange={(e) => {
handleChange(e);
}}
style={{ width: "100%" }}
/>
</div>
<div style={{ float: "right" }}>
<StyledButton
contrast={state.contrast}
style={
state.contrast === ""
? props.recurso
? { backgroundColor: "#ff7f00" }
: { backgroundColor: "#673ab7" }
: {
backgroundColor: "black",
border: "1px solid white",
textDecoration: "underline",
}
}
onClick={() => {
setEditando(false);
}}
>
Fechar
</StyledButton>
<StyledButton
contrast={state.contrast}
style={
state.contrast === ""
? props.recurso
? { backgroundColor: "#ff7f00" }
: { backgroundColor: "#673ab7" }
: {
backgroundColor: "black",
border: "1px solid white",
textDecoration: "underline",
}
}
onClick={() => updateComment()}
>
Salvar
</StyledButton>
</div>
</React.Fragment>
) : (
<React.Fragment>
<p>
{props.authorID && (
<Link
to={"/usuario-publico/" + props.authorID}
style={{
fontWeight: "bolder",
color:
state.contrast === ""
? props.recurso
? "#ff7f00"
: "#673ab7"
: "white",
}}
>
{props.authorName}
</Link>
)}
: {displayedComment}
</p>
<span className="date">
{moment(props.createdAt).format("DD/MM/YYYY")}
</span>
</React.Fragment>
)}
</div>
</Comentario>
</Grid>
{props.authorID === state.currentUser.id && (
<Grid item xs={1}>
<StyledDiv>
<Button onClick={handleClick}>
<EditIcon
style={state.contrast === "" ? {} : { color: "white" }}
/>
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem
style={
state.contrast === ""
? {}
: {
backgroundColor: "black",
color: "yellow",
textDecoration: "underline",
}
}
onClick={() => {
setEditando(true);
handleClose();
}}
>
Editar
</MenuItem>
<MenuItem
style={
state.contrast === ""
? {}
: {
backgroundColor: "black",
color: "yellow",
textDecoration: "underline",
}
}
onClick={() => {
toggleModal(true);
handleClose();
}}
>
Excluir
</MenuItem>
</Menu>
</StyledDiv>
</Grid>
)}
</Grid>
</React.Fragment>
);
else
return (
<Grid
container
style={{ paddingLeft: "20px" }}
justify="center"
alignItems="center "
>
<Grid item xs={1}>
{
<AvatarDiv>
<img src={noAvatar} alt="author avatar" />
</AvatarDiv>
}
</Grid>
<Grid item xs={10}>
<Comentario contrast={state.contrast}>
<p>O usuário que fez esse comentário deletou a conta.</p>
</Comentario>
</Grid>
</Grid>
);
}
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
margin-bottom: 5px;
}
.MuiOutlinedInput-root {
&.Mui-focused fieldset {
border-color: ${(props) =>
props.contrast === ""
? props.colecao
? "#673ab7"
: "rgb(255,127,0)"
: "yellow"};
}
fieldset {
border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
}
label {
color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
label.Mui-focused {
color: ${(props) =>
props.contrast === ""
? props.colecao
? "#673ab7"
: "rgb(255,127,0)"
: "yellow"};
}
label.Mui-focused.Mui-error {
color: red;
}
width: 95%;
`;
const StyledDiv = styled.div`
text-align: center;
.MuiButton-root {
@media screen and (max-width: 990px) {
padding-right: 35px !important;
}
}
`;
const StyledButton = styled(Button)`
color: ${(props) =>
props.contrast === ""
? "rgba(255,255,255,0.87) !important"
: "yellow !important"};
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
margin: 6px 8px !important;
font-weight: 600 !important;
:hover {
background-color: ${(props) =>
props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
}
`;
const Comentario = styled.div`
padding-left: 55px !important;
font-size: 14px;
color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
.star-rating-container {
width: 100px;
}
p {
margin: 0 0 10px;
padding-left: 2px;
}
a {
text-decoration: none !important;
}
.date {
color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
font-size: 12px;
font-weight: lighter;
padding-left: 3px;
}
`;
const AvatarDiv = styled.div`
text-align : center;
float : left;
position : relative;
width : 65px;
height : 65px;
a {
text-decoration : none !important;
}
img {
width : 100% !important;
height : 100% !important;
border-radius : 100%
vertical-align : middle;
}
`;