diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 24d4da5ca2c1450154c8a1ea2ae8f30aafd95933..0db277fe8a16bcb5c108bbb50ef4f2c39406b150 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -16,7 +16,7 @@ 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 React, { useRef, useState, useEffect, Fragment, useContext } from 'react';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
@@ -33,9 +33,11 @@ import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
import SnackBarComponent from './SnackbarComponent';
import CircularProgress from '@material-ui/core/CircularProgress';
+import { apiDomain } from '../env';
+import { Store } from '../Store'
export default function CollectionCommentSection(props) {
-
+ const { state } = useContext(Store)
const [post_snack_open, setPostSnackOpen] = useState(false);
const [delete_snack_open, setDeleteSnackOpen] = useState(false);
const [render_state, setRenderState] = useState(false);
@@ -134,29 +136,31 @@ export default function CollectionCommentSection(props) {
}
const CollectionComments = () => {
return (
- <div>
- <Title>{reviews.length} {reviews.length === 1 ? "Relato" : "Relatos"} sobre a Coleção</Title>
+ <ComentariosBox>
+ <h3>{reviews.length} {reviews.length !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{reviews.map(r => {
return (
- <Comment
- 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 className="comentario-template" key={r.created_at}>
+ <Comment
+ 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>
+ </ComentariosBox>
);
}
@@ -191,12 +195,21 @@ export default function CollectionCommentSection(props) {
props.currentUserId ?
<Fragment>
<Title>Conte sua experiência com a coleção</Title>
- <CommentForm
- colecao
- recursoId={props.id}
- handleSnackbar={handlePostSnackbar}
- rerenderCallback={forceUpdate}
- />
+ <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={apiDomain + state.currentUser.avatar} alt="user avatar" />
+ </div>
+ </Grid>
+ <Grid item xs={12} sm={10}>
+ <CommentForm
+ colecao
+ recursoId={props.id}
+ handleSnackbar={handlePostSnackbar}
+ rerenderCallback={forceUpdate}
+ />
+ </Grid>
+ </Grid>
</Fragment>
:
<Grid item xs={12}>
@@ -242,6 +255,37 @@ export default function CollectionCommentSection(props) {
);
}
+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 Avatar = styled.img`
+ height: 60px;
+ width: 60px;
+ border-radius: 50%;
+ margin-left: 2%;
+ margin-top: 5%;
+`
+
const LoadingDiv = styled.div`
margin: 1em;
display: flex;
@@ -274,13 +318,13 @@ const LogInToComment = styled.div`
`
const CommentAreaContainer = styled(Grid)`
- margin-left: 10%;
- margin-right: 10%;
+ padding: 10px;
`
const CommentAreaCard = styled(Card)`
padding: 45px;
`
const Title = styled.h1`
+ text-align: center;
font-weight: 100;
color: #666;
`
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 2a77cb0cee1f6e44c0d4d5ba92e7c382ae1cb37c..4388ec758a2cdc81a97f8b61f7fb3765b3ef5805 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -34,7 +34,7 @@ import ModalExcluir from './ModalExcluirComentario.js'
import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
export default function Comment(props) {
-
+ console.log(props)
/*
Required props:
rerenderCallback = callback function to trigger re-render on parent component
@@ -104,7 +104,7 @@ export default function Comment(props) {
function handleSuccessDeleteComment(data) {
props.rerenderCallback()
- props.handleSnackbar()
+ props.handleSnackbar(3)
}
const deleteComment = () => {
@@ -120,131 +120,149 @@ export default function Comment(props) {
toggleModal(false)
}
+ if (props.authorID)
+ return (
+ <React.Fragment>
+ <ModalExcluir
+ open={modalOpen} handleClose={() => { toggleModal(false) }}
+ handleConfirm={deleteComment}
+ />
+ <Grid container style={{ paddingLeft: "20px" }}>
- return (
- <React.Fragment>
- <ModalExcluir
- open={modalOpen} handleClose={() => { toggleModal(false) }}
- handleConfirm={deleteComment}
- />
- <Grid container style={{ paddingLeft: "20px" }}>
-
- <Grid item xs={1}>
- {
- props.authorID &&
- <AvatarDiv>
- <Link to={'/usuario-publico/' + props.authorID}>
- <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar" />
- </Link>
- </AvatarDiv>
- }
- </Grid>
-
- <Grid item xs={10}>
- <Comentario>
- <div className="star-rating-container">
- <Rating
- name="read-only"
- value={props.rating}
- readOnly
- size="small"
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />}
- />
- </div>
-
+ <Grid item xs={1}>
{
- props.name &&
- <strong>{props.name}</strong>
+ props.authorID &&
+ <AvatarDiv>
+ <Link to={'/usuario-publico/' + props.authorID}>
+ <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar" />
+ </Link>
+ </AvatarDiv>
}
+ </Grid>
+
+ <Grid item xs={10}>
+ <Comentario>
+ <div className="star-rating-container">
+ <Rating
+ name="read-only"
+ value={props.rating}
+ readOnly
+ size="small"
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />}
+ />
+ </div>
- <div>
{
- editando ?
- (
- <React.Fragment>
- <div style={{ marginTop: "5%", padding: "2px" }}>
- <StyledTextField
- colecao={!props.recurso}
- id="input-comentario"
- label={"Editar Comentário"}
- margin="normal"
- value={comment.value}
- multiline={true}
- rows="5"
- onChange={(e) => { handleChange(e) }}
- style={{ width: "100%" }}
- />
- </div>
- <div style={{ float: "right" }}>
- <StyledButton
- style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
- onClick={() => { setEditando(false) }}
- >
- Fechar
- </StyledButton>
- <StyledButton
- style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
- onClick={() => updateComment()}
- >
- Salvar
+ props.name &&
+ <strong>{props.name}</strong>
+ }
+
+ <div>
+ {
+ editando ?
+ (
+ <React.Fragment>
+ <div style={{ marginTop: "5%", padding: "2px" }}>
+ <StyledTextField
+ colecao={!props.recurso}
+ id="input-comentario"
+ label={"Editar Comentário"}
+ margin="normal"
+ value={comment.value}
+ multiline={true}
+ rows="5"
+ onChange={(e) => { handleChange(e) }}
+ style={{ width: "100%" }}
+ />
+ </div>
+ <div style={{ float: "right" }}>
+ <StyledButton
+ style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
+ onClick={() => { setEditando(false) }}
+ >
+ Fechar
</StyledButton>
- </div>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <p>
- {
- props.authorID &&
- <Link
- to={'/usuario-publico/' + props.authorID}
- style={{
- fontWeight: "bolder",
- color: props.recurso ? "#ff7f00" : "#673ab7"
- }}
+ <StyledButton
+ style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
+ onClick={() => updateComment()}
>
- {props.authorName}
- </Link>
- }
+ Salvar
+ </StyledButton>
+ </div>
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <p>
+ {
+ props.authorID &&
+ <Link
+ to={'/usuario-publico/' + props.authorID}
+ style={{
+ fontWeight: "bolder",
+ color: props.recurso ? "#ff7f00" : "#673ab7"
+ }}
+ >
+ {props.authorName}
+ </Link>
+ }
: {displayedComment}
- </p>
- {
- props.authorID !== state.currentUser.id &&
+ </p>
<span className="date">
{moment(props.createdAt).format("DD/MM/YYYY")}
</span>
- }
- </React.Fragment>
- )
- }
- </div>
+ </React.Fragment>
+ )
+ }
+ </div>
- </Comentario>
+ </Comentario>
+ </Grid>
+
+ {
+ props.authorID === state.currentUser.id &&
+ <Grid item xs={1}>
+ <StyledDiv>
+ <Button onClick={handleClick}><EditIcon /></Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <MenuItem onClick={() => { setEditando(true); handleClose() }}>Editar</MenuItem>
+ <MenuItem onClick={() => { toggleModal(true); handleClose() }}>Excluir</MenuItem>
+ </Menu>
+ </StyledDiv>
+ </Grid>
+ }
</Grid>
+ </React.Fragment>
+ )
+ else
+ return (
+ <Grid container style={{ paddingLeft: "20px" }} justify='center' alignItems='center '>
- {
- props.authorID === state.currentUser.id &&
- <Grid item xs={1}>
- <StyledDiv>
- <Button onClick={handleClick}><EditIcon /></Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <MenuItem onClick={() => { setEditando(true); handleClose() }}>Editar</MenuItem>
- <MenuItem onClick={() => { toggleModal(true); handleClose() }}>Excluir</MenuItem>
- </Menu>
- </StyledDiv>
- </Grid>
- }
+ <Grid item xs={1}>
+ {
+ <AvatarDiv>
+ <img src={noAvatar} alt="author avatar" />
+ </AvatarDiv>
+ }
+ </Grid>
+
+ <Grid item xs={10}>
+ <Comentario>
+ <p>
+ O usuário que fez esse comentário deletou a conta.
+ </p>
+ </Comentario>
+ </Grid>
</Grid>
- </React.Fragment>
- )
+ )
}
const StyledTextField = styled(TextField)`
@@ -274,9 +292,7 @@ const StyledButton = styled(Button)`
`
const Comentario = styled.div`
- @media screen and (max-width: 990px) {
- padding-left : 55px !important;
- }
+ padding-left : 55px !important;
font-size : 14px;
.star-rating-container {
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 0b1c38ba693b98b03c689f18035a6f81478d9cd9..0272d76fc6f63b264b9197d390818729caa46cc1 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarIcon from '@material-ui/icons/Star';
@@ -6,27 +6,27 @@ import TextField from "@material-ui/core/TextField";
import { Button } from '@material-ui/core';
import EditIcon from '@material-ui/icons/Edit';
import Grid from '@material-ui/core/Grid';
-import {postRequest} from '../HelperFunctions/getAxiosConfig'
+import { postRequest } from '../HelperFunctions/getAxiosConfig'
-export default function CommentForm (props) {
+export default function CommentForm(props) {
const [rating, setRating] = useState({
- error : true,
- value : 0
+ error: true,
+ value: 0
})
const [comment, setComment] = useState({
- error : false,
- value : ''
+ error: false,
+ value: ''
})
const handleChange = (e) => {
const userInput = e.target.value
const flag = (userInput.length === 0 ? true : false);
- setComment({...comment, error : flag, value : userInput})
+ setComment({ ...comment, error: flag, value: userInput })
}
const [attemptedSubmit, setAttempt] = useState(false)
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.handleSnackbar(1)
props.rerenderCallback()
}
@@ -40,18 +40,18 @@ export default function CommentForm (props) {
const url = `/${type}/${props.recursoId}/reviews`
let payload = {
- "review" : {
- "description" : finalComment.value,
- "review_ratings_attributes" : [
+ "review": {
+ "description": finalComment.value,
+ "review_ratings_attributes": [
{
- "rating_id" : 1,
- "value" : finalRating.value
+ "rating_id": 1,
+ "value": finalRating.value
}
]
}
}
- postRequest(url, payload, handleSuccess, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccess, (error) => { console.log(error) })
}
else {
setAttempt(true)
@@ -65,42 +65,42 @@ export default function CommentForm (props) {
</label>
<div className="stars-container">
<Rating
- name="avaliacao-estrelas"
- value={rating.value}
- precision={0.5}
- style={{color:"#ff9226"}}
- onChange = {(e, newValue) => {setRating({...rating, error : newValue === null ? true : false, value : newValue})}}
- emptyIcon={<StarIcon fontSize="inherit" style={{color : "#666"}} />}
- getLabelText={(value) => {return(value + ' Estrela' + (value !== 1 ? 's' : ''))}}
+ name="avaliacao-estrelas"
+ value={rating.value}
+ precision={0.5}
+ style={{ color: "#ff9226" }}
+ onChange={(e, newValue) => { setRating({ ...rating, error: newValue === null ? true : false, value: newValue }) }}
+ emptyIcon={<StarIcon fontSize="inherit" style={{ color: "#666" }} />}
+ getLabelText={(value) => { return (value + ' Estrela' + (value !== 1 ? 's' : '')) }}
/>
</div>
- <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
+ <div className="star-alert" style={attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
<Grid container>
<Grid item xs={12} md={9}>
- <StyledTextField
- colecao={!props.recurso}
- value={comment.value}
- multiline
- rows="5"
- error={comment.error}
- label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
- onChange={e => handleChange(e)}
- required={true}
- help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
- />
+ <StyledTextField
+ colecao={!props.recurso}
+ value={comment.value}
+ multiline
+ rows="5"
+ error={comment.error}
+ label="Relate sua experiência"
+ onChange={e => handleChange(e)}
+ required={true}
+ help={comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+ />
</Grid>
<Grid item xs={12} md={3}>
- <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
+ <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
{
props.recurso ?
- (
- <OrangeButton type="submit">Publicar</OrangeButton>
- )
- :
- (
- <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
- )
+ (
+ <OrangeButton type="submit">Publicar</OrangeButton>
+ )
+ :
+ (
+ <PurpleButton type="submit"><EditIcon />Enviar</PurpleButton>
+ )
}
</div>
</Grid>
@@ -149,7 +149,7 @@ const StyledTextField = styled(TextField)`
}
.MuiInput-underline::after {
- border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)" };
+ border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)"};
}
label.Mui-focused.Mui-error {
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 37db3024dfaf7c41c6d0f54976d9e74bef267cca..0ba2d12a188d45a5516b20611d2aee1679846fbd 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -55,6 +55,10 @@ export default function CommentsArea(props) {
setLogin(!loginOpen)
}
+ const handlePost = () => {
+ props.handleSnackbar(2)
+ }
+
const toggleSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
@@ -94,11 +98,13 @@ export default function CommentsArea(props) {
<Grid item xs={12} >
<GrayContainer>
<h3>Conte sua experiência com o Recurso</h3>
- <Grid container style={{ paddingTop: "20px" }}>
- <Grid item xs={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <img src={apiDomain + state.currentUser.avatar} className="minha-imagem" alt="user avatar" />
+ <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={apiDomain + state.currentUser.avatar} className="minha-imagem" alt="user avatar" />
+ </div>
</Grid>
- <Grid item xs={10}>
+ <Grid item xs={12} sm={10}>
<CommentForm
recursoId={props.recursoId}
handleSnackbar={props.handleSnackbar}
@@ -148,6 +154,7 @@ export default function CommentsArea(props) {
recurso={true}
reviewID={comentario.id}
objectID={props.recursoId}
+ handlePost={handlePost}
rerenderCallback={forceUpdate}
handleSnackbar={props.handleSnackbar}
/>
@@ -175,11 +182,13 @@ export default function CommentsArea(props) {
}
const LoadingDiv = styled.div`
- margin: 1em;
+ width: 100%;
+ margin: 1em auto;
display: flex;
justify-content: center;
align-items: center;
.loading{
+ align-self: center;
color: #ff7f00;
size: 24px;
}
@@ -202,6 +211,7 @@ const ComentariosBox = styled.div`
}
.comentario-template {
+ margin-top: 5px;
padding : 20px 0;
border-bottom : 1px solid #f4f4f4;
}
@@ -237,9 +247,6 @@ const LogInToComment = styled.div`
const GrayContainer = styled.div`
background-color : #fafafa;
font-weight : 400;
- display : flex;
- flex-direction : column;
- justify-content : space-between;
font-size : 14px;
padding-bottom : 20px;
@media screen and (min-width : 990px) {
@@ -252,6 +259,7 @@ const GrayContainer = styled.div`
h3 {
font-family : 'Roboto Light','Roboto Regular',Roboto;
+ text-align: center;
font-weight: 300;
font-style: normal;
color: #666;