fixed follow logical

src/Components/FollowCollectionButton.js

@@ -23,23 +23,44 @@ 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';
+import { apiUrl } from '../env';
 
 export default function FollowCollectionButton(props) {
-	const [icon, setIcon] = useState(<AddIcon fontSize="large"/>);
+	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
 
 	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);
-		});
-	}, [])
+		const url = apiUrl + '/users/' + props.user_id + '/following/Collection';
+		console.log("props: ", props);
+		axios({
+			method: 'get',
+			url: url,
+			headers: {
+				'Accept': 'application/json',
+				'Content-Type': 'application/json; charset=utf-8',
+				'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+				'client': sessionStorage.getItem('@portalmec/clientToken'),
+				'uid': sessionStorage.getItem('@portalmec/uid'),
+				'If-None-Match': null
+			},
+		}).then(response => {
+			const data = [...response.data];
+			if(data)
+				data.map((e) => {
+					if (e["followable"]["id"] === Number(props.collection_id)){
+						setVariant("contained");
+						setButtonText("Seguindo");
+						setIcon(<CheckIcon fontSize="large" />)
+						setFollowing(true);
+					}
+						
+				})
+			SaveNewHeaders(response)
+		})
+	}, []);
 
 	//handleMouse{Enter, Leave} only do anything when user follows given collection:
 	const handleMouseEnter = () => {
@@ -49,7 +70,7 @@ export default function FollowCollectionButton(props) {
 			setIcon(null);
 		}
 	}
-	
+
 	const handleMouseLeave = () => {
 		if (following) {
 			setVariant("contained");
@@ -58,35 +79,70 @@ export default function FollowCollectionButton(props) {
 		}
 	}
 
+	const SaveNewHeaders = (response) => {
+		if (
+			(response.headers['access-token'] === undefined || response.headers['access-token'] === null) &&
+			(response.headers.client === undefined || response.headers.client === null)
+		) {
+
+		} else {
+			sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+			sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
+			console.log('saved')
+		}
+	}
+
 	const handleClick = () => {
 		if (!props.user_id)
 			setSignUpOpen(true);
 		else if (!following) {
+			const url = apiUrl + '/collections/' + props.collection_id + '/follow';
 			setVariant("contained");
 			setButtonText("Seguindo");
-			setIcon(<CheckIcon fontSize="large"/>)
+			setIcon(<CheckIcon fontSize="large" />)
 			setFollowing(true);
-			axios.post(apiUrl+'/collections/'+props.collection_id+'/follow')
-				.then(res => {
-					if (Number(res.status) != 201)
-						setFollowing(false);
-						setIcon(<AddIcon fontSize="large"/>);
-						setButtonText("Seguindo");
-						setVariant("contained");
-				});
+			axios({
+				method: 'put',
+				url: url,
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json; charset=utf-8',
+					'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+					'client': sessionStorage.getItem('@portalmec/clientToken'),
+					'uid': sessionStorage.getItem('@portalmec/uid'),
+					'If-None-Match': null
+				},
+			}).then(response => {
+				if (response.status === 201)
+					setFollowing(true);
+				else if (response.status === 200)
+					setFollowing(false);
+				SaveNewHeaders(response)
+			})
 		} else {
+			const url = apiUrl + '/collections/' + props.collection_id + '/follow';
 			setVariant("outlined");
-			setButtonText("Deixar de seguir");
-			setIcon(<AddIcon fontSize="large"/>);
+			setButtonText("Seguir Coleção");
+			setIcon(<AddIcon fontSize="large" />);
 			setFollowing(false);
-			axios.delete(apiUrl+'/collections/'+props.collection_id+'/follow')
-				.then(res => {
-					if (Number(res.status) == 200)
-						setFollowing(true);
-						setIcon(<CheckIcon fontSize="large"/>);
-						setButtonText("Deixar de seguir");
-						setVariant("outlined");
-				});
+			axios({
+				method: 'put',
+				url: url,
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json; charset=utf-8',
+					'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+					'client': sessionStorage.getItem('@portalmec/clientToken'),
+					'uid': sessionStorage.getItem('@portalmec/uid'),
+					'If-None-Match': null
+				},
+			}).then(response => {
+				if (response.status === 201)
+					setFollowing(true);
+				else if (response.status === 200)
+					setFollowing(false);
+				SaveNewHeaders(response)
+			})
 		}
 	};
 
@@ -97,7 +153,7 @@ export default function FollowCollectionButton(props) {
 					variant={variant}
 					color="primary"
 					startIcon={icon}
-					size="large"
+					size="small"
 					onMouseEnter={handleMouseEnter}
 					onMouseLeave={handleMouseLeave}
 					onClick={handleClick}
@@ -107,19 +163,19 @@ export default function FollowCollectionButton(props) {
 				<SignUpModal open={sign_up_open} handleClose={() => setSignUpOpen(false)} />
 			</div>
 		);
-		else return (<div></div>);
+	else return (<div></div>);
 }
 
-const Title=styled.h1`
+const Title = styled.h1`
 	font-size: 3em;
 	color: rgb(102, 102, 102);
 	float: left;
 `
-const ButtonText=styled.span`
+const ButtonText = styled.span`
 	font-weight: bolder;
 	font-size: 1.2em;
 `
-const FollowButton=styled(Button)`
+const FollowButton = styled(Button)`
 	padding-left: 10;
 	padding-right: 10;
 	width: 250px;