/*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 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 Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ModalExcluir from './ModalExcluirComentario.js'
import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
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
authorAvatar = either a string denoting the author's avatar file location or null
rating = star rating
name = title (?)
authorName = author username
description = the user comment itself
createdAt
recurso : boolean; determines whether to display orange or purple font
*/
var moment = require('moment')
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
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
colecao={!props.recurso}
id="input-comentario"
label={"Editar Comentário"}
margin="normal"
value={comment.value}
multiline={true}
rows="5"
onChange={(e) => { handleChange(e) }}
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 &&
<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 /></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>
)
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)`
label.Mui-focused {
color : ${props => props.colecao ? "rgb(103,58,183)" : "rgb(255,127,0)"};
}
.MuiInput-underline::after {
border-bottom: ${props => props.colecao ? "2px solid rgb(103,58,183)" : "2px solid rgb(255,127,0)"};
}
`
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`
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;
}
`