CollectionCommentSection.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, { useRef, useState, useEffect, Fragment } from 'react';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
import EditIcon from '@material-ui/icons/Edit';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
import SnackBarComponent from './SnackbarComponent';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';

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

export default function CollectionCommentSection(props) {
	const [post_snack_open, setPostSnackOpen] = useState(false);
	const [delete_snack_open, setDeleteSnackOpen] = useState(false);
	const [render_state, setRenderState] = useState(0);
	const [sign_up_open, setSignUpOpen] = useState(false);
	const [log_in_open, setLoginOpen] = useState(false);
	const [is_loading, setIsLoading] = useState(false);
	const [snackInfo, setSnackInfo] = useState({
		open: false,
		text: '',
		severity: '',
		color: ''
	});
	const [reviews, setReviews] = useState([]);
	const [totalReviews, setTotalReviews] = useState(0);
	const [currPageReviews, setCurrPageReviews] = useState(0);
	const comment_ref = useRef(null);

	const forceUpdate = () => { setCurrPageReviews(0); setRenderState(render_state + 1); }

	const handlePostSnackbar = () => {
		setPostSnackOpen(!post_snack_open);
	}

	const handleDeleteSnackbar = () => {
		setDeleteSnackOpen(!delete_snack_open);
	}

	const handleScrollToCommentForm = () => {
		window.scrollTo(0, comment_ref.current.offsetTop);
	}

	function handleOpenSnackSignIn() {
		const info = {
			open: true,
			text: 'Você foi logado com sucesso!',
			severity: 'success',
			color: '',
		}

		handleSnackInfo(info)
	}

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

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

	function handleOpenSignUp() {
		setSignUpOpen(true)
	}

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

	function handleLoadMoreReviews() {
		if (reviews.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)
		}
	}

	const NoCommentsMessage = (contrast) => {
		const NoCommentsContainer = styled.div`
			text-align: center;
			margin-left: 9vw;
			margin-right: 9vw;
		`
		const BlueTitle = styled.h2`
			color: ${props => props.contrast === "" ? "#673ab7" : "white"};
		`
		const Secondary = styled.h3`
			font-weight: 100;
			color: ${props => props.contrast === "" ? "black" : "white"};
		`
		const ButtonText = styled.span`
			font-weight: 900;
			color: ${props => props.contrast === "" ? "white" : "yellow"};
			text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
		`
		const Image = styled.img`
		`
		return (
			<NoCommentsContainer>
				<Image src={Comentarios} style={{ width: "100%", maxWidth: 234 }} />
				<BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
				<Secondary contrast={contrast}>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
				<Button
					variant="contained"
					color="primary"
					style={contrast.contrast === "" ? {} : { backgroundColor: "black", border: "1px solid white" }}
					startIcon={<EditIcon />}
					onClick={handleScrollToCommentForm}
				>
					<ButtonText contrast={contrast}>Relatar experiência</ButtonText>
				</Button>
			</NoCommentsContainer>
		);
	}
	const CollectionComments = (contrast) => {
		return (
			<ComentariosBox contrast={contrast}>
				<h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
				{reviews.map(r => {
					return (
						<div className="comentario-template" key={r.created_at}>
							<Comment
								contrast={contrast}
								isCollection={false}
								rerenderCallback={forceUpdate}
								objectID={props.id}
								reviewID={r.id}
								reviewRatings={r.review_ratings}
								authorID={r.user.id}
								rating={r.rating_average}
								authorName={r.user.name}
								authorAvatar={r.user.avatar}
								description={r.description}
								createdAt={r.created_at}
								handleSnackbar={handleDeleteSnackbar}
								handlePost={handlePostSnackbar}
								recurso={false}
							/>
						</div>
					);
				})}
				<div className="load-more">
					<IconButton className="button" onClick={handleLoadMoreReviews}>
						<KeyboardArrowDownIcon />
					</IconButton>
				</div>
			</ComentariosBox>
		);
	}

	function handleSuccessGet(data, headers) {
        if (currPageReviews !== 0)
            setReviews((previousState) => previousState.concat(data));
        else
            setReviews(data);
		if (headers.has('X-Total-Count'))
			setTotalReviews(headers.get('X-Total-Count'))
		setIsLoading(false);
	}

	function handleFailGet(error) {
		setIsLoading(false)
	}

	useEffect(() => {
		setIsLoading(true)
		getRequest(
			`/collections/${props.id}/reviews?page=${currPageReviews}`,
			handleSuccessGet,
			(error) => { handleFailGet(error) }
		)
	}, [render_state, currPageReviews]);

	return (
		<CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
			<SnackBarComponent
				snackbarOpen={snackInfo.open}
				handleClose={handleCloseSnack}
				severity={snackInfo.severity}
				text={snackInfo.text}
				color={snackInfo.color}
			/>
			<SignUpModal
                contrast={props.contrast}
				open={sign_up_open}
				handleClose={() => setSignUpOpen(false)}
				openLogin={() => setLoginOpen(true)}
			/>
			<LoginModal
                contrast={props.contrast}
				openSnackbar={handleOpenSnackSignIn}
				open={log_in_open}
				handleClose={() => setLoginOpen(false)}
				openSignUp={handleOpenSignUp}
			/>
			<Grid item xs={12} ref={comment_ref}>
				<CommentAreaCard contrast={props.contrast}>
					{
						props.currentUserId ?
							<Fragment>
								<Title contrast={props.contrast}>Conte sua experiência com a coleção</Title>
								<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' }}>
											<Avatar src={props.avatar} alt="user avatar" />
										</div>
									</Grid>
									<Grid item xs={12} sm={10}>
										<CommentForm
											contrast={props.contrast}
											colecao
											recursoId={props.id}
											handleSnackbar={handlePostSnackbar}
											rerenderCallback={forceUpdate}
										/>
									</Grid>
								</Grid>
							</Fragment>
							:
							<Grid item xs={12}>
								<LogInToComment contrast={props.contrast}>
									<span className="span-purple">Você precisa entrar para comentar</span>
									<Button onClick={() => setSignUpOpen(true)} style={props.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
										<ExitToAppIcon />ENTRAR
                  </Button>
								</LogInToComment>
							</Grid>
					}
					{
						is_loading ?
							<LoadingDiv>
								<CircularProgress className="loading" />
							</LoadingDiv>
							:
							reviews.length ? CollectionComments(props.contrast) : NoCommentsMessage(props.contrast)
					}
				</CommentAreaCard>
			</Grid>
			<Snackbar
				open={post_snack_open}
				autoHideDuration={6000}
				onClose={handlePostSnackbar}
				anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
			>
				<Alert onClose={handlePostSnackbar} severity="info">
					Seu comentário foi publicado com sucesso!
        </Alert>
			</Snackbar>
			<Snackbar
				open={delete_snack_open}
				autoHideDuration={6000}
				onClose={handleDeleteSnackbar}
				anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
			>
				<Alert onClose={handleDeleteSnackbar} severity="info">
					Comentário deletado com sucesso.
        </Alert>
			</Snackbar>
		</CommentAreaContainer>
	);
}

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{
			width: 100%;
			display: flex; 
			flex-direction: row;
			justify-content: center; 
			align-items: center;
		}
		
		.button{
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
		}
`

const Avatar = styled.img`
	height: 60px;
  width: 60px;
  border-radius: 50%;
  margin-left: 2%;
  margin-top: 5%;
`

const LoadingDiv = styled.div`
	margin: 1em; 
	display: flex; 
	justify-content: center; 
	align-items: center;
	.loading{
		color: #673ab7; 
		size: 24px; 
	}
`

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

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

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

const CommentAreaContainer = styled(Grid)`
	padding: 10px;
	background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const CommentAreaCard = styled(Card)`
	padding: 45px;
	background: ${props => props.contrast === "" ? "#f4f4f4" : "black !important"};
	border: ${props => props.contrast === "" ? "" : "1px solid white!important"};
`
const Title = styled.h1`
	text-align: center;
	font-weight: 100;
	color: ${props => props.contrast === "" ? "#666" : "white"};
`