Follow button

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;