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 } 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 {axiosGetRequest} from '../Components/HelperFunctions/getAxiosConfig'

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 [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 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} />
				<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(() => {
        axiosGetRequest(`/collections/${props.id}/reviews`, (data) => {setReviews(data)}, (error) => {console.log(error)})
	}, [render_state]);

	return (
		<CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
			<Grid item xs={12} ref={comment_ref}>
				<CommentAreaCard>
					<Title>Conte sua experiência com a coleção</Title>
					<CommentForm colecao recursoId={props.id}
						handleSnackbar={handlePostSnackbar}
						rerenderCallback={forceUpdate}
					/>
					{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 CommentAreaContainer=styled(Grid)`
	margin-left: 10%;
	margin-right: 10%;
`
const CommentAreaCard=styled(Card)`
	padding: 45px;
`
const Title=styled.h1`
	font-weight: 100;
	color: #666;
`