WIP Collection Page

src/Components/CollectionDescription.js

@@ -54,7 +54,7 @@ export default function CollectionDescription(props) {
 						</DownloadButton>
 					</Grid>
 					<Grid item>
-						<FollowCollectionButton user_id={state.currentUser.id}/>
+						<FollowCollectionButton user_id={state.currentUser.id} collection_id={props.collection_id}/>
 					</Grid>
 				</Grid>
 			</Grid>
@@ -73,7 +73,7 @@ const ButtonText=styled.span`
 	font-size: 1.2em;
 `
 const DownloadButton=styled(Button)`
-	padding-left: 10,
-	padding-right: 10,
-	width: 210,
+	padding-left: 10;
+	padding-right: 10;
+	width: 250px;
 `

src/Components/FollowCollectionButton.js

@@ -16,33 +16,70 @@ 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 } from 'react';
+import React, { useState, useEffect } 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 axios from 'axios';
+import {apiUrl} from '../env';
 
 export default function FollowCollectionButton(props) {
 	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 [following, setFollowing] = useState(false); //user following collection
 
-	const handleClick = () => {
-		//aqui tem que ter:
-		//se o usuário não está logado, abre a tela de criar conta
-
-		//setSignUpOpen(true);
+	useEffect(() => {
+		axios.get(apiUrl+'/users/'+props.user_id+'/following/Collection')
+		.then(res => {
+			for (const element in res.body)
+				if (element.id == props.collection_id)
+					setFollowing(true);
+		});
+	}, [])
 
-		//se o usuário já segue a coleção,deixa de seguir
+	//handleMouse{Enter, Leave} only do anything when user follows given collection:
+	const handleMouseEnter = () => {
+		if (following) {
+			setVariant("outlined");
+			setButtonText("Deixar de seguir");
+			setIcon(null);
+		}
+	}
+	
+	const handleMouseLeave = () => {
+		if (following) {
+			setVariant("contained");
+			setButtonText("Seguindo");
+			setIcon(<CheckIcon fontSize="large" />);
+		}
+	}
 
-		//setButtonText("Seguir Coleção");
-
-		//se o usuário não segue a coleção, muda o visual por alguns instantes e depois mostra o "deixa de seguir"
-		setVariant("contained");
-		setButtonText("Seguindo");
-		setIcon(<CheckIcon fontSize="large"/>)
+	const handleClick = () => {
+		if (!props.user_id)
+			setSignUpOpen(true);
+		else if (!following) {
+			setVariant("contained");
+			setButtonText("Seguindo");
+			setIcon(<CheckIcon fontSize="large"/>)
+			axios.post(apiUrl+'/Collection/'+props.collection_id+'/follow')
+				.then(res => {
+					if (Number(res.status) == 201)
+						setFollowing(true);
+				});
+		} else {
+			setVariant("outlined");
+			setButtonText("Deixar de seguir");
+			setIcon(<AddIcon fontSize="large"/>);
+			axios.delete(apiUrl+'/Collection/'+props.collection_id+'/follow')
+				.then(res => {
+					if (Number(res.status) == 200)
+						setFollowing(false);
+				});
+		}
 	};
 
 	return (
@@ -52,7 +89,9 @@ export default function FollowCollectionButton(props) {
 				color="primary"
 				startIcon={icon}
 				size="large"
-				onClick={() => handleClick()}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				onClick={handleClick}
 			>
 				<ButtonText>{button_text}</ButtonText>
 			</FollowButton>
@@ -71,7 +110,7 @@ const ButtonText=styled.span`
 	font-size: 1.2em;
 `
 const FollowButton=styled(Button)`
-	padding-left: 10,
-	padding-right: 10,
-	width: 210,
+	padding-left: 10;
+	padding-right: 10;
+	width: 250px;
 `

src/Pages/CollectionPage.js

@@ -39,7 +39,7 @@ export default function CollectionPage() {
 			<VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
 
 			<Grid item xs={10} md={6}>
-				<CollectionDescription title="Linguagem de Programacao"/>
+				<CollectionDescription title="Linguagem de Programacao" collection_id="9868"/>
 			</Grid> 
 
 			<Grid container item direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>