Comment.js

/*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;
    }
`