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.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()
    }

    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)

    }

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