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, useEffect} 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 axios from 'axios'
import {apiUrl} from '../env';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function Comment (props) {

    /*
    Required props:
        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
    */

    const [editando, setEditando] = useState(false)
    const {state} = useContext(Store)

    var moment = require('moment')

    const [comment, setComment] = useState(props.description)
    const updateComment = () => {
        {/*axios.put( (`${apiUrl}/learning_objects/` + props.objectID + '/reviews/' + props.reviewID))*/}
        setEditando(false)
    }

    const [anchorEl, setAnchorEl] = React.useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <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}
                                            multiline={true}
                                            rows="5"
                                            onChange = {(e) => {setComment(e.target.value)}}
                                            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>
                                        }
                                        : {props.description}
                                    </p>
                                    {
                                        props.authorID !== state.currentUser.userId &&
                                        <span className="date">
                                            {moment(props.createdAt).format("DD/MM/YYYY")}
                                        </span>
                                    }
                                </React.Fragment>
                            )
                        }
                    </div>

                </Comentario>
            </Grid>

            <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={handleClose}>Excluir</MenuItem>
                        </Menu>
                </StyledDiv>
            </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`
    @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;
    }
`