diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index 10cc202c3ff6f3908aeb09c7d0d4fb567505fddb..c9dc801016a770dd65acd4378c9db395b6c4d945 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -27,7 +27,7 @@ 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, getRequest } from './HelperFunctions/getAxiosConfig.js'
export default function CollectionReview(props) {
const [likes, setLikes] = useState(0);
@@ -38,31 +38,31 @@ export default function CollectionReview(props) {
const [log_in_open, setLoginOpen] = useState(false);
const { state } = useContext(Store);
- function handleSuccessfulGet (data) {
- setLikes(Number(data.likes_count));
- setLiked(data.liked);
- }
+ function handleSuccessfulGet(data) {
+ setLikes(Number(data.likes_count));
+ setLiked(data.liked);
+ }
useEffect(() => {
- const url = `/collections/${props.id}`
+ const url = `/collections/${props.id}`
- getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
+ getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
- }, [props.id]);
+ }, [props.id, state.currentUser.id]);
const handleClickReport = () => {
setReportOpen(true);
}
- function handleSuccess (data) {
- setLiked(!liked)
- setLikes(data.count)
- }
+ function handleSuccess(data) {
+ setLiked(!liked)
+ setLikes(data.count)
+ }
const handleLikeClick = () => {
if (state.currentUser.id) {
- const url = `/collections/${props.id}/like`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ const url = `/collections/${props.id}/like`
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
} else
setSignUpOpen(true);
}
@@ -91,7 +91,7 @@ export default function CollectionReview(props) {
</Grid>
<Grid item justify="center" alignItems="center">
<IconButton aria-label="like" onClick={handleLikeClick}>
- {likes}<FavoriteIcon style={{fill : liked ? "red" : null}} />
+ {likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} />
</IconButton>
</Grid>
</Grid>
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index be01ad44329cfe45b7ca167a4111d721cd8f7e7a..974a56fd3492cf7440b46679794fb061ea237e7a 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -16,37 +16,77 @@ 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 React, { useState, useEffect, useContext } from 'react';
import Button from '@material-ui/core/Button';
import CheckIcon from '@material-ui/icons/Check';
import AddIcon from '@material-ui/icons/Add';
import styled from 'styled-components';
import SignUpModal from './SignUpModal.js';
-import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig'
+import LoginModal from './LoginModal';
+import SnackBarComponent from './SnackbarComponent';
+import { getRequest, putRequest } from './HelperFunctions/getAxiosConfig'
+import { Store } from '../Store'
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 [variant, setVariant] = useState("outlined");
const [sign_up_open, setSignUpOpen] = useState(false);
+ const [open_login, setOpenLogin] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: '',
+ severity: '',
+ color: ''
+ });
const [following, setFollowing] = useState(false); //user following collection
- function handleSuccessGet (data) {
- if(data)
- data.map((e) => {
- if (e["followable"]["id"] === Number(props.collection_id)){
- setVariant("contained");
- setButtonText("Seguindo");
- setIcon(<CheckIcon fontSize="large" />)
- setFollowing(true);
- }
- return undefined
- })
- }
+ 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(() => {
- const url = `/users/${props.user_id}/following/Collection`
- getRequest(url, handleSuccessGet, (error) => console.log(error))
- }, []);
+ 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)
+ })
+ }
+ else {
+ setIcon(<AddIcon fontSize="large" />)
+ setButtonText("Seguir Coleção")
+ setVariant("outlined")
+ setFollowing(false)
+ }
+ }, [state.currentUser.id]);
//handleMouse{Enter, Leave} only do anything when user follows given collection:
const handleMouseEnter = () => {
@@ -65,33 +105,120 @@ export default function FollowCollectionButton(props) {
}
}
- function handleSuccessfulFollow (data) {
- setVariant("contained");
- setButtonText("Seguindo");
- setIcon(<CheckIcon fontSize="large" />)
- setFollowing(true);
- }
- function handleSuccessfulUnfollow (data) {
- setVariant("outlined");
- setButtonText("Seguir Coleção");
- setIcon(<AddIcon fontSize="large" />);
- setFollowing(false);
- }
+ function handleOpenSnackSignIn() {
+ const info = {
+ open: true,
+ text: 'Você foi logado com sucesso!',
+ severity: 'success',
+ color: '',
+ }
+
+ handleSnackInfo(info)
+ }
+
+ function handleCloseSnack() {
+ setSnackInfo({
+ open: false,
+ text: '',
+ severity: '',
+ color: '',
+ })
+ }
+
+ function handleSnackInfo(info) {
+ setSnackInfo({
+ ...info
+ })
+ }
+
+ function handleOpenLogin() {
+ setOpenLogin(true)
+ }
+
+ function handleOpenSignUp() {
+ setSignUpOpen(true)
+ }
+
+ function handleSuccessfulFollow(data) {
+ if (data.errors) {
+ setVariant("contained");
+ handleFailFollow()
+ }
+ else {
+ const info = {
+ open: true,
+ text: 'Sucesso ao seguir a coleção!',
+ severity: 'success',
+ color: 'green'
+ }
+ handleSnackInfo(info)
+ setVariant("contained");
+ setButtonText("Seguindo");
+ setIcon(<CheckIcon fontSize="large" />)
+ setFollowing(true);
+ }
+ }
+
+ function handleFailFollow(err) {
+ const info = {
+ open: true,
+ text: 'Falha ao seguir coleção',
+ severity: 'fail',
+ color: 'red',
+ }
+ handleSnackInfo(info)
+ }
+
+ function handleSuccessfulUnfollow(data) {
+ if (data.errors)
+ handleFailUnfollow()
+ else {
+ const info = {
+ open: true,
+ text: 'Sucesso ao deixar de seguir a coleção!',
+ severity: 'success',
+ color: 'green'
+ }
+ handleSnackInfo(info)
+ setVariant("outlined");
+ setButtonText("Seguir Coleção");
+ setIcon(<AddIcon fontSize="large" />);
+ setFollowing(false);
+ }
+ }
+
+ function handleFailUnfollow(err) {
+ const info = {
+ open: true,
+ text: 'Falha ao deixar de seguir coleção',
+ severity: 'error',
+ color: 'red',
+ }
+ handleSnackInfo(info)
+ }
+
const handleClick = () => {
- const url = `/collections/${props.collection_id}/follow`
+ const url = `/collections/${props.collection_id}/follow`
if (!props.user_id)
setSignUpOpen(true);
else if (!following) {
- putRequest(url, {}, handleSuccessfulFollow, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccessfulFollow, handleFailFollow)
} else {
- putRequest(url, {}, handleSuccessfulUnfollow, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccessfulUnfollow, handleFailUnfollow)
}
};
if (!props.user_is_owner)
return (
<div>
+ <SnackBarComponent
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ color={snackInfo.color}
+ />
<FollowButton
variant={variant}
color="primary"
@@ -103,7 +230,17 @@ export default function FollowCollectionButton(props) {
>
<ButtonText>{button_text}</ButtonText>
</FollowButton>
- <SignUpModal open={sign_up_open} handleClose={() => setSignUpOpen(false)} />
+ <SignUpModal
+ open={sign_up_open}
+ handleClose={() => setSignUpOpen(false)}
+ openLogin={handleOpenLogin}
+ />
+ <LoginModal
+ openSnackbar={handleOpenSnackSignIn}
+ open={open_login}
+ handleClose={() => setOpenLogin(false)}
+ openSignUp={handleOpenSignUp}
+ />
</div>
);
else return (<div></div>);
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 81d9286c5d0671f8885250daf08f2a4e601b3c87..5d2821f3d9a39cc92af23d5ff1fa7c71de868777 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -40,6 +40,7 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
+import { getRequest } from './HelperFunctions/getAxiosConfig'
export default function ResourceCardOptions(props) {
const { state } = useContext(Store)
@@ -78,6 +79,13 @@ export default function ResourceCardOptions(props) {
const enableDownload = () => {
const url = props.downloadableLink
window.open(url, '_blank');
+ getRequest(
+ `/learning_objects/${props.learningObjectId}/download`,
+ (data, header) => {
+ },
+ (error) => {
+ }
+ )
toggleSnackbar(true)
}
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index b0bfdeb7db587ccfa45f4d11ef030f330978322f..3ccb5ab1929d32cc3be204d59fa939664b85596f 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -29,7 +29,7 @@ import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link } from 'react-router-dom';
import FollowCollectionButton from '../Components/FollowCollectionButton';
import { Store } from '../Store.js'
-import {getRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js'
export default function CollectionPage(props) {
const { state } = useContext(Store);
@@ -42,13 +42,13 @@ export default function CollectionPage(props) {
const comment_ref = useRef(null);
useEffect(() => {
- const url = `/collections/${collection_id}`
+ const url = `/collections/${collection_id}`
- getRequest(url, (data) => {setCollection(Object.assign({}, data))}, (error) => {console.log(error)})
+ getRequest(url, (data) => { setCollection(Object.assign({}, data)) }, (error) => { console.log(error) })
}, []);
const handleScrollToComments = () => {
- window.scrollTo(0, comment_ref.current.offsetTop);
+ comment_ref.current.scrollIntoView({ behavior: 'smooth' })
}
return (
<>
@@ -78,7 +78,7 @@ export default function CollectionPage(props) {
<DowloadButton
id={collection.id ? collection.id : 0}
/>
- <div style={{height : 12}}></div>
+ <div style={{ height: 12 }}></div>
<FollowCollectionButton
user_id={state.currentUser.id}
collection_id={collection_id} />
@@ -87,7 +87,7 @@ export default function CollectionPage(props) {
<VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
- <Grid container justify="center" style={{ backgroundColor: '#f4f4f4'}}>
+ <Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
{/* <Grid item xs={1}/> */}
<Grid item xs={10}>
<ResourceList resources={
@@ -113,7 +113,7 @@ export default function CollectionPage(props) {
} />
</Grid>
- <Grid container item xs={12} style={{ marginTop: 40, paddingBottom:40 }} ref={comment_ref}>
+ <Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
<CollectionCommentSection id={collection_id} />
</Grid>
</Grid>