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

export default function CollectionCommentSection(props) {

	const [post_snack_open, setPostSnackOpen] = useState(false);
	const [delete_snack_open, setDeleteSnackOpen] = useState(false);
	const [render_state, setRenderState] = useState(false);
	const [sign_up_open, setSignUpOpen] = useState(false);
	const [log_in_open, setLoginOpen] = useState(false);
	const [snackInfo, setSnackInfo] = useState({
		open: false,
		text: '',
		severity: '',
		color: ''
	});
	const [reviews, setReviews] = useState([]);
	const comment_ref = useRef(null);

	const forceUpdate = () => { setRenderState(!render_state); }

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

	const NoCommentsMessage = () => {
		const NoCommentsContainer = styled.div`
			text-align: center;
			margin-left: 9vw;
			margin-right: 9vw;
		`
		const BlueTitle = styled.h2`
			color: #673ab7;
		`
		const Secondary = styled.h3`
			font-weight: 100;
		`
		const ButtonText = styled.span`
			font-weight: 900;
		`
		const Image = styled.img`
		`
		return (
			<NoCommentsContainer>
				<Image src={Comentario} style={{ width: "100%", maxWidth: 234 }} />
				<BlueTitle>Compartilhe sua opinião com a rede!</BlueTitle>
				<Secondary>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"
					startIcon={<EditIcon />}
					onClick={handleScrollToCommentForm}
				>
					<ButtonText>Relatar experiência</ButtonText>
				</Button>
			</NoCommentsContainer>
		);
	}
	const CollectionComments = () => {
		return (
			<div>
				<Title>{reviews.length} {reviews.length === 1 ? "Relato" : "Relatos"} sobre a Coleção</Title>
				{reviews.map(r => {
					return (
						<Comment
							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}
							recurso={false}
						/>
					);
				})}
			</div>
		);
	}

	useEffect(() => {
		getRequest(`/collections/${props.id}/reviews`, (data) => { setReviews(data) }, (error) => { console.log(error) })
	}, [render_state]);

	return (
		<CommentAreaContainer 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
				open={sign_up_open}
				handleClose={() => setSignUpOpen(false)}
				openLogin={() => setLoginOpen(true)}
			/>
			<LoginModal
				openSnackbar={handleOpenSnackSignIn}
				open={log_in_open}
				handleClose={() => setLoginOpen(false)}
				openSignUp={handleOpenSignUp}
			/>
			<Grid item xs={12} ref={comment_ref}>
				<CommentAreaCard>
					{
						props.currentUserId ?
							<Fragment>
								<Title>Conte sua experiência com a coleção</Title>
								<CommentForm
									colecao
									recursoId={props.id}
									handleSnackbar={handlePostSnackbar}
									rerenderCallback={forceUpdate}
								/>
							</Fragment>
							:
							<Grid item xs={12}>
								<LogInToComment>
									<span className="span-purple">Você precisa entrar para comentar</span>
									<Button onClick={() => setSignUpOpen(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
										<ExitToAppIcon />ENTRAR
                  </Button>
								</LogInToComment>
							</Grid>
					}
					{reviews.length ? CollectionComments() : NoCommentsMessage()}
				</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 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 : #673ab7;
    }

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

const CommentAreaContainer = styled(Grid)`
	margin-left: 10%;
	margin-right: 10%;
`
const CommentAreaCard = styled(Card)`
	padding: 45px;
`
const Title = styled.h1`
	font-weight: 100;
	color: #666;
`