Files
EMI-ExpoAPP/components/basics/FollowButton.js
T
2022-03-26 23:13:06 -07:00

79 lines
2.7 KiB
JavaScript

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;