/*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.handleSnackbar(2)
}
const updateComment = () => {
const finalComment = comment
if (!finalComment.error) {
let payload = {
"review" : {
"name":null,
"description":finalComment.value,
"pros":null,
"cons":null,
"review_ratings_attributes" : props.reviewRatings
}
}
putRequest(`/learning_objects/${props.objectID}/reviews/`, payload, handleOnSuccessfulComment, (error) => {console.log(error)})
}
}
function handleSuccessDeleteComment (data) {
props.rerenderCallback()
props.handleSnackbar(3)
}
const deleteComment = () => {
deleteRequest(`/learning_objects/${props.objectID}/reviews/${props.reviewID}`, handleSuccessDeleteComment, (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 &&
<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>
<div className="star-rating-container">
<Rating
name="read-only"
value={props.rating}
readOnly
size="small"
style={{color:"#666"}}
emptyIcon={<StarBorderIcon fontSize="inherit" style={{color : "#a5a5a5"}} />}
/>
</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 : props.recurso ? "#ff7f00" : "#673ab7"
}}
>
{props.authorName}
</Link>
}
: {displayedComment}
</p>
{
props.authorID !== state.currentUser.id &&
<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>
)
}
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`
@media screen and (max-width: 990px) {
padding-left : 55px !important;
}
font-size : 14px;
.star-rating-container {
width : 100px;
}
p {
margin : 0 0 10px;
padding-left : 2px
}
a {
text-decoration : none !important;
}
.date {
color : #ababab;
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;
}
`