WIP Collection Page

src/Components/CollectionDescription.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, { useContext, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import axios from 'axios';
 import { Store } from '../Store.js'
 import { Grid } from '@material-ui/core';
@@ -31,10 +31,19 @@ import { apiUrl } from '../env';
 
 export default function CollectionDescription(props) {
 	const { state } = useContext(Store);
+	const [download_url, setDownloadUrl] = useState('');
 
-	const handleDownloadCollection = () => {
-		axios.get(apiUrl+'/collections/'+props.collection_id+'/download');
-	}
+	useEffect(() => {
+		const body = {
+			"package": {
+				"object": [{"type": "Collection", "id": props.collection_id}]
+		}};
+		axios
+			.post(apiUrl+'/package', body)
+			.catch(err => {
+				if (err.response && err.response.status === 302)
+					setDownloadUrl = apiUrl+'/'+err.response.data.url;
+			});}, []);
 
 	return (
 		<Grid container direction="column" justify="center" alignItems="center">
@@ -53,15 +62,16 @@ export default function CollectionDescription(props) {
 					direction="column" justify="center" alignItems="flex-end"
 				>
 					<Grid item style={{marginBottom: 10}}>
-						<DownloadButton
-							variant="outlined"
-							color="primary"
-							startIcon={<GetAppIcon fontSize="large"/>}
-							size="large"
-							onClick={handleDownloadCollection}
-						>
-							<ButtonText>Baixar Coleção</ButtonText>
-						</DownloadButton>
+						<a href={download_url} >
+							<DownloadButton
+								variant="outlined"
+								color="primary"
+								startIcon={<GetAppIcon fontSize="large"/>}
+								size="large"
+							>
+								<ButtonText>Baixar Coleção</ButtonText>
+							</DownloadButton>
+						</a>
 					</Grid>
 					<Grid item>
 						<FollowCollectionButton user_id={state.currentUser.id} collection_id={props.collection_id}/>

src/Components/CollectionReview.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, { useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { Grid } from '@material-ui/core';
 import styled from 'styled-components';
 import Rating from '@material-ui/lab/Rating';
@@ -26,26 +26,42 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
 import InfoIcon from '@material-ui/icons/Info';
 import axios from 'axios';
 import { apiUrl } from '../env';
+import { Store } from '../Store.js'
 import ReportModal from './ReportModal.js';
+import SignUpModal from './SignUpModal.js';
+import LoginModal from './LoginModal.js';
 
 export default function CollectionReview(props) {
-	//TODO: chamar o modal de report
-	const likes = 2;
+	const [likes, setLikes] = useState(0);
 	const [liked, setLiked] = useState(false);
 	const [stars, setStars] = useState(0);
 	const [reportOpen, setReportOpen] = useState(false);
+	const [sign_up_open, setSignUpOpen] = useState(false);
+	const [log_in_open, setLoginOpen] = useState(false);
+	const { state } = useContext(Store);
+
+	useEffect(() => {
+		axios.get(apiUrl+'/collections/'+props.id)
+			.then(res => {
+				setLikes(Number(res.data.likes_count));
+				setLiked(res.data.liked);
+			});
+	}, [props.id]);
 
 	const handleClickReport = () => {
 		setReportOpen(true);
 	}
 	
 	const handleLikeClick = () => {
-		const url = apiUrl+'/collections/'+props.id+'/like';
-		if (liked)
-			axios.put(url);
-		else
-			axios.delete(url);
-		setLiked(!liked);
+		if (state.currentUser.id) {
+			const url = apiUrl+'/collections/'+props.id+'/like';
+			if (liked)
+				axios.put(url);
+			else
+				axios.delete(url);
+			setLiked(!liked);
+		} else
+			setSignUpOpen(true);
 	}
 
 	const handleSetStars = (value) => {
@@ -89,6 +105,15 @@ export default function CollectionReview(props) {
 					complainableType="Collection"
 				/>
 			</Grid>
+			<SignUpModal
+				open={sign_up_open}
+				handleClose={() => setSignUpOpen(false)}
+				openLogin={() => setLoginOpen(true)}
+			/>
+			<LoginModal
+				open={log_in_open}
+				handleClose={() => setLoginOpen(false)}
+			/>
 
 		</Grid>
 	);