/*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';
import CircularProgress from '@material-ui/core/CircularProgress';
import noAvatar from '../../img/default_profile.png';
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 [isLoading, setIsLoading] = useState(false)
const handleSignUp = () => {
setSignUp(!signUpOpen)
}
const handleLogin = () => {
setLogin(!loginOpen)
}
const handlePost = () => {
props.handleSnackbar(2)
}
const toggleSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
}
handleSuccessfulLogin(false);
}
function handleSuccess(data) {
setIsLoading(false)
setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
}
useEffect(() => {
setIsLoading(true)
const url = `/learning_objects/${props.recursoId}/reviews`
getRequest(url, handleSuccess, (error) => { console.log(error); setIsLoading(false) })
}, [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" }} 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
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>
)
}
{
isLoading ?
<LoadingDiv>
<CircularProgress className="loading" />
</LoadingDiv>
:
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
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>
)
}
</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 LoadingDiv = styled.div`
width: 100%;
margin: 1em auto;
display: flex;
justify-content: center;
align-items: center;
.loading{
align-self: center;
color: #ff7f00;
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:#666;
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
}
.comentario-template {
margin-top: 5px;
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;
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: #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;
}
`