Follow button

components/GroupCard.js

@@ -5,6 +5,7 @@ import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import FollowButton from './basics/FollowButton.js';
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
@@ -62,7 +63,7 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
                 </Title>
                 <Paragraph numberOfLines={4}>{profileObj.profile.description}</Paragraph>
                 <Text>
-                    <Button mode='outlined'>Follow</Button>
+                    <FollowButton profile={profile} />
                     <Text><Icon name={"hail"} size={18} />
                     {Object.keys(profile.subscribed).length}</Text>
                 </Text>

components/ProfileCard.js

@@ -5,6 +5,7 @@ import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import FollowButton from './basics/FollowButton.js';
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
@@ -59,7 +60,7 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
                     </Text>
                 </Title>
                 <Paragraph numberOfLines={2}>{profileObj.profile.description}</Paragraph>
-                <Button mode='outlined'>Follow</Button>
+                <FollowButton profile={profile} />
             </Card.Content>
         </Card>
 

components/ProfileHeader.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Text } from 'react-native';
 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import UserName from './UserName';
+import FollowButton from './basics/FollowButton';
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
@@ -16,7 +17,7 @@ const ProfileHeader = ({ profileObj }) => {
                         <UserName profileid={profileObj._id} />
                     </Title>
                     <Paragraph>{profileObj.profile.description}</Paragraph>
-                    <Button mode='outlined'>Follow</Button>
+                    <FollowButton profile={profileObj} />
                 </Card.Content>
             </Card>
             {/*

components/basics/FollowButton.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from 'react-native-paper';
+import API from './../../API.js';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../../contexts/GlobalState.js';
+
+const followProfile = async (profileid, me, setFollowing, setPending) => {
+    // Simulates the changes on the DB to speed up the UI
+    if (!profileid || profileid == me._id) return false;
+    const profile = await API.getUserProfile(profileid);
+    if (!me.following) GlobalState.me.following = [];
+    GlobalState.me.following.push(profileid);
+    setFollowing(true);
+    if (!profile.isGroup) { // Follow user profile
+        return await API.followProfile(profileid);
+    }
+    if (!profile.isPrivate) {
+        if (!profile.subscribed) profile.subscribed = {};
+        profile.subscribed[me._id] = new Date();
+    } else {
+        setPending(true);
+        if (!profile.pending) profile.pending = {};
+        profile.pending[me._id] = new Date();
+    }
+    return await API.subscribeToGroup(profileid)
+}
+
+const unfollowProfile = async (profileid, me, setFollowing, setPending) => {
+    // Simulates the changes on the DB to speed up the UI
+    if (!profileid) return false;
+    const profile = await API.getUserProfile(profileid);
+    GlobalState.me.following = me.following.filter((pId) => {
+        return pId != profileid;
+    });
+    setFollowing(false);
+    setPending(false);
+    if (!profile.isGroup) { // For user profiles
+        return await API.unfollowProfile(profileid);
+    }
+    // For groups or courses
+    profile.subscribed[profileid] = undefined;
+    return await API.unsubscribeToGroup(profileid)
+}
+
+
+let FollowButton = ({ profile }) => {
+    const viewer = useSnapshot(GlobalState).me;
+    const [following, setFollowing] = useState(false);
+    const [pending, setPending] = useState(false);
+
+    useEffect(() => {
+        setFollowing(viewer.following.includes(profile._id));
+        setPending(profile.pending && profile.pending[viewer._id]);
+    }, [profile])
+
+
+    const type = profile._id ? (!profile.isGroup ? "User" : (profile.isCourse ? "Course" : "Group")) : "User";
+    const action = type === 'User' ? (following ? "Unfollow" : "Follow") :
+        (following ? "Unsubscribe" : (pending ? "Pending" : "Subscribe"));
+
+
+    const toggleFollowThisProfile = () => {
+        if (!following) return followProfile(profile._id, viewer, setFollowing, setPending);
+        unfollowProfile(profile._id, viewer, setFollowing, setPending);
+    }
+
+    return (
+        <>
+            {
+                profile._id && profile._id !== viewer._id ? 
+                <Button mode='outlined' icon='person-add' onPress={toggleFollowThisProfile} >{action}</Button> : 
+                <></>
+            }
+        </>
+    );
+}
+
+export default FollowButton;