diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index ccc7f079dae76494734addd6116bdaf6a331ae5d..62c0fd5db0ca4fcbd70a202814a1b50de4a521f0 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 } from 'react';
+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';
@@ -27,12 +27,25 @@ 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 { 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);
@@ -50,30 +63,60 @@ export default function CollectionCommentSection(props) {
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`
+ const NoCommentsContainer = styled.div`
text-align: center;
margin-left: 9vw;
margin-right: 9vw;
`
- const BlueTitle=styled.h2`
+ const BlueTitle = styled.h2`
color: #673ab7;
`
- const Secondary=styled.h3`
+ const Secondary = styled.h3`
font-weight: 100;
`
- const ButtonText=styled.span`
+ const ButtonText = styled.span`
font-weight: 900;
`
- const Image=styled.img`
+ const Image = styled.img`
`
return (
<NoCommentsContainer>
- <Image src={Comentario} style={{width:"100%", maxWidth:234}}/>
+ <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
@@ -107,24 +150,59 @@ export default function CollectionCommentSection(props) {
handleSnackbar={handleDeleteSnackbar}
recurso={false}
/>
- );})}
+ );
+ })}
</div>
);
}
useEffect(() => {
- getRequest(`/collections/${props.id}/reviews`, (data) => {setReviews(data)}, (error) => {console.log(error)})
+ 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>
- <Title>Conte sua experiência com a coleção</Title>
- <CommentForm colecao recursoId={props.id}
- handleSnackbar={handlePostSnackbar}
- rerenderCallback={forceUpdate}
- />
+ {
+ 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>
@@ -132,35 +210,54 @@ export default function CollectionCommentSection(props) {
open={post_snack_open}
autoHideDuration={6000}
onClose={handlePostSnackbar}
- anchorOrigin={{vertical: 'top', horizontal: 'right'}}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert onClose={handlePostSnackbar} severity="info">
+ <Alert onClose={handlePostSnackbar} severity="info">
Seu comentário foi publicado com sucesso!
</Alert>
- </Snackbar>
+ </Snackbar>
<Snackbar
open={delete_snack_open}
autoHideDuration={6000}
onClose={handleDeleteSnackbar}
- anchorOrigin={{vertical: 'top', horizontal: 'right'}}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert onClose={handleDeleteSnackbar} severity="info">
+ <Alert onClose={handleDeleteSnackbar} severity="info">
Comentário deletado com sucesso.
</Alert>
- </Snackbar>
+ </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)`
+const CommentAreaContainer = styled(Grid)`
margin-left: 10%;
margin-right: 10%;
`
-const CommentAreaCard=styled(Card)`
+const CommentAreaCard = styled(Card)`
padding: 45px;
`
-const Title=styled.h1`
+const Title = styled.h1`
font-weight: 100;
color: #666;
`
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index aa35cb0df4909fa3205678aa145bc1e02f2802ad..60de747f5bb7c17d9dff5d1a9acb2f69d8c95808 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -30,35 +30,40 @@ export default function CollectionDescription(props) {
useEffect(() => {
const body = {
"package": {
- "object": [{"type": "Collection", "id": props.collection_id}]
- }};
+ "object": [{ "type": "Collection", "id": props.collection_id }]
+ }
+ };
axios
- .post(apiUrl+'/package', body)
+ .post(apiUrl + '/package', body)
.catch(err => {
if (err.response && err.response.status === 302) {
- setDownloadUrl(apiDomain+'/'+err.response.data.url);
+ setDownloadUrl(apiDomain + '/' + err.response.data.url);
}
- });}, [props.collection_id]);
+ });
+ }, [props.collection_id]);
return (
<Grid container direction="column" justify="center" alignItems="center" spacing={5}>
- <Grid
- item
+ <Grid
+ item
justify="center"
alignItems="center"
>
<Title>{props.title}</Title>
</Grid>
- <Grid
+ <Grid
item
- direction="row"
- justify="center"
+ direction="row"
+ justify="center"
alignItems="center"
>
<Grid item>
- <CollectionReview
+ <CollectionReview
+ stars={props.stars}
+ liked={props.liked}
+ likes={props.likes}
scrollToComment={props.scrollToComments}
- id={props.collection_id}/>
+ id={props.collection_id} />
</Grid>
{/* <Grid item container sm={8}
direction="column" justify="center" alignItems="flex-end"
@@ -85,7 +90,7 @@ export default function CollectionDescription(props) {
);
}
-const Title=styled.h1`
+const Title = styled.h1`
font-size: 2.5em;
color: rgb(102, 102, 102);
text-align: center
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index c9dc801016a770dd65acd4378c9db395b6c4d945..0d94757b2dbd235e2b3b9ef2b8077707b8a9a357 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -27,31 +27,30 @@ import { Store } from '../Store.js'
import ReportModal from './ReportModal.js';
import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
-import { putRequest, getRequest } from './HelperFunctions/getAxiosConfig.js'
+import { putRequest } from './HelperFunctions/getAxiosConfig.js'
+import SnackBarComponent from './SnackbarComponent';
export default function CollectionReview(props) {
- const [likes, setLikes] = useState(0);
- const [liked, setLiked] = useState(false);
- const [stars, setStars] = useState(0);
+ const { state } = useContext(Store);
+
+ const [likes, setLikes] = useState();
+ const [liked, setLiked] = useState();
+ const [stars, setStars] = useState();
const [reportOpen, setReportOpen] = useState(false);
const [sign_up_open, setSignUpOpen] = useState(false);
const [log_in_open, setLoginOpen] = useState(false);
- const { state } = useContext(Store);
-
- function handleSuccessfulGet(data) {
- setLikes(Number(data.likes_count));
- setLiked(data.liked);
- }
-
- useEffect(() => {
- const url = `/collections/${props.id}`
-
- getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
-
- }, [props.id, state.currentUser.id]);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: '',
+ severity: '',
+ color: ''
+ });
const handleClickReport = () => {
- setReportOpen(true);
+ if (state.currentUser.id)
+ setReportOpen(true);
+ else
+ setSignUpOpen(true)
}
function handleSuccess(data) {
@@ -67,24 +66,62 @@ export default function CollectionReview(props) {
setSignUpOpen(true);
}
- const handleSetStars = (value) => {
- setStars(value);
- props.scrollToComment();
- }
-
const handleCloseModal = () => {
setReportOpen(false);
}
+ 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)
+ }
+
+ useEffect(() => {
+ setLiked(props.liked)
+ setLikes(props.likes)
+ setStars(props.stars)
+ }, [props])
+
return (
<Grid container direction="column">
+ <SnackBarComponent
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ color={snackInfo.color}
+ />
<Grid sm={12} container direction="row" alignItems="center">
<Grid item>
<Rating
name="customized-empty"
- value={stars}
- onChange={(e, value) => handleSetStars(value)}
- precision={0.5}
+ value={Number(stars)}
+ readOnly
+ onClick={props.scrollToComment}
style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
@@ -116,8 +153,10 @@ export default function CollectionReview(props) {
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
+ openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
+ openSignUp={handleOpenSignUp}
/>
</Grid>
);
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index 974a56fd3492cf7440b46679794fb061ea237e7a..dd9bf54215b5b23c97e2507680a5473645063526 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -24,13 +24,12 @@ import styled from 'styled-components';
import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal';
import SnackBarComponent from './SnackbarComponent';
-import { getRequest, putRequest } from './HelperFunctions/getAxiosConfig'
-import { Store } from '../Store'
+import { putRequest } from './HelperFunctions/getAxiosConfig'
export default function FollowCollectionButton(props) {
- const { state } = useContext(Store)
+
const [icon, setIcon] = useState(<AddIcon fontSize="large" />);
- const [button_text, setButtonText] = useState("Seguir Coleção");
+ const [button_text, setButtonText] = useState("Seguir coleção");
const [variant, setVariant] = useState("outlined");
const [sign_up_open, setSignUpOpen] = useState(false);
const [open_login, setOpenLogin] = useState(false);
@@ -42,51 +41,20 @@ export default function FollowCollectionButton(props) {
});
const [following, setFollowing] = useState(false); //user following collection
- function handleSuccessGet(data) {
- if (!data.errors)
- data.map((e) => {
- if (e["followable"]["id"] === Number(props.collection_id)) {
- setVariant("contained");
- setButtonText("Seguindo");
- setIcon(<CheckIcon fontSize="large" />)
- setFollowing(true);
- }
- return undefined
- })
- else {
- const info = {
- open: true,
- text: 'Falha ao verificar se o usuário segue a coleção!',
- severity: 'error',
- color: 'red'
- }
-
- handleSnackInfo(info)
- }
- }
useEffect(() => {
- if (state.currentUser.id) {
- const url = `/users/${props.user_id}/following/Collection`
- getRequest(
- url,
- handleSuccessGet,
- (error) => {
- const info = {
- open: true,
- text: 'Falha ao verificar se o usuário segue a coleção!',
- severity: 'error',
- color: 'red'
- }
- handleSnackInfo(info)
- })
+ if (props.followed) {
+ setFollowing(true)
+ setButtonText("Seguindo")
+ setVariant("contained")
+ setIcon(<CheckIcon fontSize="large" />);
}
else {
- setIcon(<AddIcon fontSize="large" />)
- setButtonText("Seguir Coleção")
- setVariant("outlined")
setFollowing(false)
+ setButtonText("Seguir coleção")
+ setVariant("outlined")
+ setIcon(<AddIcon fontSize="large" />);
}
- }, [state.currentUser.id]);
+ }, [props])
//handleMouse{Enter, Leave} only do anything when user follows given collection:
const handleMouseEnter = () => {
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 0777872e95dc28388eb8f44fda972f7f9d21f95a..52a26eb90d29edfd109b41dd6cf90604e130f449 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -34,6 +34,7 @@ import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js';
export default function CollectionPage(props) {
const { state } = useContext(Store);
+
const [error, setError] = useState(false)
const [collection, setCollection] = useState({
@@ -47,7 +48,7 @@ export default function CollectionPage(props) {
const url = `/collections/${collection_id}`
getRequest(url, (data) => { setCollection(Object.assign({}, data)) }, (error) => { setError(true) })
- }, []);
+ }, [state.currentUser.id]);
const handleScrollToComments = () => {
comment_ref.current.scrollIntoView({ behavior: 'smooth' })
@@ -93,6 +94,9 @@ export default function CollectionPage(props) {
<Grid item md={5}>
<CollectionDescription
+ stars={collection.review_average}
+ likes={collection.likes_count}
+ liked={collection.liked}
scrollToComments={handleScrollToComments}
title={collection.name ? collection.name : ""}
collection_id={collection.id ? collection.id : 0} />
@@ -104,6 +108,7 @@ export default function CollectionPage(props) {
/>
<div style={{ height: 12 }}></div>
<FollowCollectionButton
+ followed={collection.followed}
user_id={state.currentUser.id}
collection_id={collection_id} />
</Grid>
@@ -138,7 +143,11 @@ export default function CollectionPage(props) {
</Grid>
<Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
- <CollectionCommentSection id={collection_id} />
+ <CollectionCommentSection
+ id={collection_id}
+ currentUserId={state.currentUser.id}
+
+ />
</Grid>
</Grid>
</>