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 Comentarios from '../../img/comentarios.png'
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';

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

export default function CommentsArea (props) {
    const {state} = useContext(Store)
    const [comentarios, setComentarios] = useState([])
    const [gambiarra, setState] = useState(0)
    const forceUpdate = () => {setState(gambiarra + 1)}
    const [loginOpen, setLogin] = useState(false)
    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
    const [signUpOpen, setSignUp] = useState(false)

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

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

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

    function handleSuccess (data) {
        setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
    }

    useEffect( () => {
        const url = `/learning_objects/${props.recursoId}/reviews`

        getRequest(url, handleSuccess, (error) => {console.log(error)})
    }, [gambiarra])

    return (
        <React.Fragment>
            <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 open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
                openSnackbar={() => { handleSuccessfulLogin(true) }}
            />
            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
            {/*----------------------------------------------------------------------------*/}  
            <Grid container spacing={2} style={{padding : "10px"}}>
                {
                    (state.currentUser.id !== '') ?
                    (
                            <Grid item xs={12} >
                                <GrayContainer>
                                    <h3>Conte sua experiência com o Recurso</h3>
                                    <Grid container style={{paddingTop : "20px"}}>
                                        <Grid item xs={2} style={{paddingLeft : "15px", paddingRight : "15px"}}>
                                            <img src={apiDomain + state.currentUser.avatar} className="minha-imagem" alt="user avatar"/>
                                        </Grid>
                                        <Grid item xs={10}>
                                            <CommentForm
                                                recursoId={props.recursoId}
                                                handleSnackbar={props.handleSnackbar}
                                                rerenderCallback={forceUpdate}
                                                recurso={props.recurso}
                                                />
                                        </Grid>
                                    </Grid>
                                </GrayContainer>
                            </Grid>
                    )
                    :
                    (
                            <Grid item xs={12}>
                                <LogInToComment>
                                    <span className="span-laranja">Você precisa entrar para comentar</span>
                                    <Button onClick={() => handleLogin(true)} style={{textTransform : "uppercase", color : "#666", fontWeight : "700"}}>
                                        <ExitToAppIcon/>ENTRAR
                                    </Button>
                                </LogInToComment>
                            </Grid>
                    )
                }
                {
                    comentarios.length !== 0 ?
                    (
                                <ComentariosBox>
                                    <h3>{comentarios.length} {comentarios.length !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
                                    {
                                        comentarios.map( comentario =>
                                                <div className="comentario-template" key={comentario.id}>
                                                    <Comment
                                                        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}
                                                        rerenderCallback={forceUpdate}
                                                        handleSnackbar={props.handleSnackbar}
                                                        />
                                                </div>
                                        )
                                    }
                                </ComentariosBox>
                    )
                    :
                    (
                            <Grid item xs={12}>
                                <LogInToComment>
                                    <img alt="" src={Comentarios} />
                                    <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
                                    <AoRelatar>
                                        Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
                                    </AoRelatar>
                                </LogInToComment>
                            </Grid>
                    )
                }
            </Grid>
        </React.Fragment>
    )
}


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:#666;
        font-size: 1.857em;
        margin: 15px 2%;
        text-align : flex-start;
    }

    .comentario-template {
        padding : 20px 0;
        border-bottom : 1px solid #f4f4f4;
    }
`
const AoRelatar = styled.div`
    width : 70%;
    font-size : 20px;
    font-weight : 300;
    text-align : center;
    padding-bottom : 20px;
`

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 : #ff7f00;
    }

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

const GrayContainer = styled.div`
    background-color : #fafafa;
    font-weight : 400;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
<<<<<<< HEAD
    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;
>>>>>>> fead909286087ce07b01b25f6d8f46f74dc494c8

    h3 {
        font-family : 'Roboto Light','Roboto Regular',Roboto;
        font-weight: 300;
        font-style: normal;
        color: #666;
        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;
    }
`