added follow/unfollow collection functionality

src/Components/CollectionCardFunction.js

@@ -39,11 +39,15 @@ import LockIcon from '@material-ui/icons/Lock';
 import ColCardOwnerOptions from './ColCardOwnerOptions.js'
 import ColCardPublicOptions from './ColCardPublicOptions'
 import {Link} from 'react-router-dom';
+import axios from 'axios'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
 
 export default function CollectionCardFunction (props) {
     const {state} = useContext(Store)
 
     const [userAvatar, setUserAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
+    const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
+    const handleToggleUserFollowingCol = () => {toggleUserFollowingCol(!userFollowingCol)}
 
     const [followingHover, handleFollowingHover] = useState(false)
     const toggleFollowingHover = (value) => {handleFollowingHover(value)}
@@ -51,9 +55,22 @@ export default function CollectionCardFunction (props) {
     const [slideIn, setSlide] = useState(false)
     const controlSlide = () => {setSlide(!slideIn)}
 
+    const handleFollow = () => {
+        let config = getAxiosConfig()
+        let payload = {}
+
+        axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
+            (response) => {
+                console.log(response.data)
+                handleToggleUserFollowingCol()
+            },
+            (error) => {console.log(error)}
+        )
+    }
+
     const RenderFollowButton = () => {
         return (
-            <FollowButton onClick={() => {console.log("fazer")}}>
+            <FollowButton onClick={handleFollow}>
                 <AddIcon/><span>SEGUIR</span>
             </FollowButton>
         )
@@ -62,7 +79,7 @@ export default function CollectionCardFunction (props) {
     const RenderFollowingButton = () => {
         return (
             <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
-                onMouseLeave={() => toggleFollowingHover(false)} onClick={() => {console.log('fazer')}}>
+                onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
                 {
                     followingHover ?
                     (
@@ -204,7 +221,7 @@ export default function CollectionCardFunction (props) {
                     (
                         <CardReaFooter> {/*renders following/unfollow and follow button*/}
                         {
-                            props.followed ?
+                            userFollowingCol ?
                             (
                                 [
                                     RenderFollowingButton()
@@ -233,7 +250,7 @@ const SlideAvatarDiv = styled.div`
     vertical-align : middle;
     border : 0;
 
-    img { 
+    img {
         height : 40px !important;
         width : 40px !important;
         border : 0;