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, { useState, useEffect } from 'react';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import styled from 'styled-components';
import axios from 'axios';
import { apiUrl } from '../env';
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';

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 forceUpdate = () => { setRenderState(!render_state); }
	
	const handlePostSnackbar = () => {
		setPostSnackOpen(!post_snack_open);
	}

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

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

	useEffect(() => {
		axios.get(apiUrl+'/collections/'+props.id+'/reviews')
			.then(res => {
				setReviews(res.data);
			});
	}, [render_state]);

	return (
		<CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
			<Grid item xs={12}>
				<CommentAreaCard>
					<Title>Conte sua experiência com a coleção</Title>
					<CommentForm colecao recursoId={props.id}
						handleSnackbar={handlePostSnackbar}
						rerenderCallback={forceUpdate}/>
					<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}
							/>
						);
					})}
				</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;
`