CommentsArea.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 ExitToAppIcon from '@material-ui/icons/ExitToApp';
import { apiDomain } from '../../env';
import CommentForm from './CommentForm.js'
import Comment from '../Comment.js'
import { getRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
import MuiAlert from '@material-ui/lab/Alert';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import SnackBarComponent from '../../Components/SnackbarComponent';

//Image Import
import { Comentarios } from "ImportImages.js"; 
import { noAvatar } from "ImportImages.js"; 

function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
}

export default function CommentsArea(props) {
    const { state } = useContext(Store)
    const [comentarios, setComentarios] = useState([])
    const [totalReviews, setTotalReviews] = useState(0);
    const [currPageReviews, setCurrPageReviews] = useState(0);
    const [gambiarra, setState] = useState(0)
    const forceUpdate = () => { setCurrPageReviews(0); setState(gambiarra + 1); }
    const [loginOpen, setLogin] = useState(false)
    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
    const [signUpOpen, setSignUp] = useState(false)
    const [isLoading, setIsLoading] = useState(false)
    const [snackInfo, setSnackInfo] = useState({
        open: false,
        text: '',
        severity: '',
        color: ''
    });

    function handleSnackInfo(info) {
        setSnackInfo({
            ...info
        })
    }

    function handleCloseSnack() {
        setSnackInfo({
            open: false,
            text: '',
            severity: '',
            color: '',
        })
    }

    const handleSignUp = () => {
        setSignUp(!signUpOpen)
    }

    const handleLogin = () => {
        setLogin(!loginOpen)
    }

    const handlePost = () => {
        props.handleSnackbar(2)
    }

    const toggleSnackbar = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }

        handleSuccessfulLogin(false);
    }

    function handleLoadMoreReviews() {
        if (comentarios.length !== parseInt(totalReviews))
            setCurrPageReviews((previous) => previous + 1)
        else {
            const info = {
                open: true,
                text: 'Não há mais comentários para carregar.',
                severity: 'warning',
                color: '',
            }
            handleSnackInfo(info)
        }
    }

    function handleSuccess(data, headers) {
        setIsLoading(false)
        if (currPageReviews !== 0)
            setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
        else   
            setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)) 
        if (headers.has('X-Total-Count'))
            setTotalReviews(headers.get('X-Total-Count'))
    }

    useEffect(() => {
        setIsLoading(true)
        const url = `/learning_objects/${props.recursoId}/reviews?page=${currPageReviews}`
        getRequest(url, handleSuccess, (error) => { console.log(error); setIsLoading(false) })
    }, [gambiarra, currPageReviews])

    return (
        <React.Fragment>
            <SnackBarComponent
                snackbarOpen={snackInfo.open}
                handleClose={handleCloseSnack}
                severity={snackInfo.severity}
                text={snackInfo.text}
                color={snackInfo.color}
            />
            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
            </Snackbar>
            {/*-------------------------------MODALS---------------------------------------*/}
            <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
                openSnackbar={() => { handleSuccessfulLogin(true) }}
            />
            <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
            {/*----------------------------------------------------------------------------*/}
            <Grid container spacing={2} style={{ padding: "10px" }}>
                {
                    (state.currentUser.id !== '') ?
                        (
                            <Grid item xs={12} >
                                <GrayContainer contrast={state.contrast}>
                                    <h3>Conte sua experiência com o Recurso</h3>
                                    <Grid container style={{ paddingTop: "20px" }} spacing={1}>
                                        <Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
                                            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                                <img src={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar} className="minha-imagem" alt="user avatar" />
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} sm={10}>
                                            <CommentForm
                                                contrast={state.contrast}
                                                recursoId={props.recursoId}
                                                handleSnackbar={props.handleSnackbar}
                                                rerenderCallback={forceUpdate}
                                                recurso={props.recurso}
                                            />
                                        </Grid>
                                    </Grid>
                                </GrayContainer>
                            </Grid>
                        )
                        :
                        (
                            <Grid item xs={12}>
                                <LogInToComment contrast={state.contrast}>
                                    <span className="span-laranja">Você precisa entrar para comentar</span>
                                    <Button onClick={() => handleLogin(true)} style={state.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
                                        <ExitToAppIcon style={state.contrast === "" ? { color: "inherit" } : { color: "white" }} />ENTRAR
                                    </Button>
                                </LogInToComment>
                            </Grid>
                        )
                }
                {
                    isLoading ?
                        <LoadingDiv contrast={state.contrast}>
                            <CircularProgress className="loading" />
                        </LoadingDiv>
                        :
                        totalReviews !== 0 ?
                            (
                                <ComentariosBox contrast={state.contrast}>
                                    <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
                                    {
                                        comentarios.map(comentario =>
                                            <div className="comentario-template" key={comentario.id}>
                                                <Comment
                                                    contrast={state.contrast}
                                                    isCollection={false}
                                                    authorID={comentario.user ? comentario.user.id : null}
                                                    authorAvatar={comentario.user ? comentario.user.avatar : null}
                                                    authorName={comentario.user ? comentario.user.name : null}
                                                    name={comentario.name}
                                                    rating={comentario.rating_average}
                                                    reviewRatings={comentario.review_ratings}
                                                    description={comentario.description}
                                                    createdAt={comentario.created_at}
                                                    recurso={true}
                                                    reviewID={comentario.id}
                                                    objectID={props.recursoId}
                                                    handlePost={handlePost}
                                                    rerenderCallback={forceUpdate}
                                                    handleSnackbar={props.handleSnackbar}
                                                />
                                            </div>
                                        )
                                    }
                                    <div className="load-more">
                                        <IconButton className="button" onClick={handleLoadMoreReviews}>
                                            <KeyboardArrowDownIcon className="icon" />
                                        </IconButton>
                                    </div>
                                </ComentariosBox>
                            )
                            :
                            (
                                <Grid item xs={12}>
                                    <LogInToComment contrast={state.contrast}>
                                        <img alt="" src={Comentarios} />
                                        <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
                                        <AoRelatar contrast={state.contrast}>
                                            Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
                                        </AoRelatar>
                                    </LogInToComment>
                                </Grid>
                            )
                }
            </Grid>
        </React.Fragment>
    )
}

const LoadingDiv = styled.div`
    width: 100%;
	margin: 1em auto;
	display: flex; 
	justify-content: center; 
	align-items: center;
	.loading{
        align-self: center;
        color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
		size: 24px; 
	}
`

const ComentariosBox = styled.div`
    display : flex;
    flex-direction : column;
    padding : 20px;
    width : 100%;

    h3 {
        font-family: 'Roboto Light','Roboto Regular',Roboto;
        font-weight: 300;
        font-style: normal;
        color: ${props => props.contrast === "" ? "#666" : "white"};
        font-size: 1.857em;
        margin: 15px 2%;
        text-align : flex-start;
    }

    .comentario-template {
        margin-top: 5px;
        padding : 20px 0;
        border-bottom : 1px solid #f4f4f4;
    }

	.load-more{
        margin-top : 10px;
		width: 100%;
		display: flex; 
		flex-direction: row;
		justify-content: center; 
		align-items: center;
	}
		
	.button{
        border: ${props => props.contrast === "" ? "0" : "1px solid white"};
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        :hover{
            background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
        }
	}

    .icon{
        color: ${props => props.contrast === "" ? "#666" : "yellow"};
    }
`
const AoRelatar = styled.div`
    width : 70%;
    font-size : 20px;
    font-weight : 300;
    text-align : center;
    padding-bottom : 20px;
    color: ${props => props.contrast === "" ? "#666" : "white"};
`

const LogInToComment = styled.div`
    display : flex;
    flex-direction : column;
    text-align : center;
    padding : 20px;
    align-items : center;

    .span-laranja {
        font-size : 24px;
        font-weight : 700;
        padding-bottom : 5px;
        color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
    }

    img {
        object-fit : contain !important;
        background-color : transparent !important;
    }
`

const GrayContainer = styled.div`
    background-color: ${props => props.contrast === "" ? "white" : "black"};
    font-weight : 400;
    font-size : 14px;
    padding-bottom : 20px;
    @media screen and (min-width : 990px) {
        padding-right : 15px;
        padding-left : 15px;
    }
    padding-right : 15px;
    padding-left : 15px;
    padding-bottom : 20px;

    h3 {
        font-family : 'Roboto Light','Roboto Regular',Roboto;
        text-align: center;
        font-weight: 300;
        font-style: normal;
        color: ${props => props.contrast === "" ? "#666" : "white"};
        font-size: 1.857em;
        margin-bottom : 10px;
        margin-left : 2%;
        margin-top : 2%;
    }

    .minha-imagem {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        margin-left: 2%;
        margin-top: 5%;
    }
    img {
        vertical-align :middle;
    }
`