From 7643d2cb6d1c970e95160b5f726a7f1e24116a9c Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Fri, 18 Dec 2020 09:38:40 -0300
Subject: [PATCH] fixed follow logical
---
src/Components/FollowCollectionButton.js | 124 ++++++++++++++++-------
1 file changed, 90 insertions(+), 34 deletions(-)
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index 5e3fd33c..cbabd884 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/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;
--
GitLab