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 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";
import { makeStyles } from "@material-ui/styles";
//Image Import
import { noAvatar } from "ImportImages.js";

const useStyles = makeStyles((theme) => ({
    darkTextField: {
        maxWidth: "100%",
        fontSize: "15px",
        fontWeight: "lighter",
        color: "white",
        width: "100%",
    },
    lightTextField: {
        maxWidth: "100%",
        fontSize: "15px",
        fontWeight: "lighter",
        color: "black",
        width: "100%",
    },
}));


export default function Comment(props) {
    var moment = require("moment");
    const classes = useStyles();
    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
                    contrast={state.contrast}
                    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
                                                contrast={props.contrast}
                                                colecao={!props.recurso}
                                                id="input-comentario"
                                                label={"Editar Comentário"}
                                                margin="normal"
                                                value={comment.value}
                                                InputProps={
                                                    props.contrast === ""
                                                        ? { className: classes.lightTextField }
                                                        : { className: classes.darkTextField }
                                                }
                                                variant="outlined"
                                                multiline={true}
                                                rows="5"
                                                onChange={(e) => {
                                                    handleChange(e);
                                                }}
                                                style={{ width: "100%" }}
                                            />
                                        </div>
                                        <div style={{ float: "right" }}>
                                            <StyledButton
                                                contrast={state.contrast}
                                                style={
                                                    state.contrast === ""
                                                        ? props.recurso
                                                        ? { backgroundColor: "#ff7f00" }
                                                        : { backgroundColor: "#673ab7" }
                                                        : {
                                                            backgroundColor: "black",
                                                            border: "1px solid white",
                                                            textDecoration: "underline",
                                                        }
                                                }
                                                onClick={() => {
                                                    setEditando(false);
                                                }}
                                            >
                                                Fechar
                                            </StyledButton>
                                            <StyledButton
                                                contrast={state.contrast}
                                                style={
                                                state.contrast === ""
                                                    ? props.recurso
                                                    ? { backgroundColor: "#ff7f00" }
                                                    : { backgroundColor: "#673ab7" }
                                                    : {
                                                        backgroundColor: "black",
                                                        border: "1px solid white",
                                                        textDecoration: "underline",
                                                    }
                                                }
                                                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
                                        style={state.contrast === "" ? {} : { color: "white" }}
                                    />
                                </Button>
                                <Menu
                                    id="simple-menu"
                                    anchorEl={anchorEl}
                                    keepMounted
                                    open={Boolean(anchorEl)}
                                    onClose={handleClose}
                                >
                                    <MenuItem
                                        style={
                                        state.contrast === ""
                                            ? {}
                                            : {
                                                backgroundColor: "black",
                                                color: "yellow",
                                                textDecoration: "underline",
                                            }
                                        }
                                        onClick={() => {
                                        setEditando(true);
                                        handleClose();
                                        }}
                                    >
                                        Editar
                                    </MenuItem>
                                    <MenuItem
                                        style={
                                        state.contrast === ""
                                            ? {}
                                            : {
                                                backgroundColor: "black",
                                                color: "yellow",
                                                textDecoration: "underline",
                                            }
                                        }
                                        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)`
    .MuiInputBase-root {
        margin-bottom: 5px;
    }

    .MuiOutlinedInput-root {
        &.Mui-focused fieldset {
        border-color: ${(props) =>
        props.contrast === ""
        ? props.colecao
            ? "#673ab7"
            : "rgb(255,127,0)"
        : "yellow"};
        }
        fieldset {
        border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
        }
    }

    label {
        color: ${(props) => (props.contrast === "" ? "#666" : "white")};
    }

    label.Mui-focused {
        color: ${(props) =>
        props.contrast === ""
        ? props.colecao
            ? "#673ab7"
            : "rgb(255,127,0)"
        : "yellow"};
    }

    label.Mui-focused.Mui-error {
        color: red;
    }

    width: 95%;
`;

const StyledDiv = styled.div`
    text-align: center;
    .MuiButton-root {
        @media screen and (max-width: 990px) {
            padding-right: 35px !important;
        }
    }
`;
const StyledButton = styled(Button)`
    color: ${(props) =>
        props.contrast === ""
        ? "rgba(255,255,255,0.87) !important"
        : "yellow !important"};
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
    margin: 6px 8px !important;
    font-weight: 600 !important;
    :hover {
        background-color: ${(props) =>
        props.contrast === "" ? "" : "rgba(255,255,0,0.24) !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;
    }
`;