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