Files
EMI-ExpoAPP/components/basics/FollowButton.js
T
2022-12-22 14:48:34 -05:00

83 lines
2.9 KiB
JavaScript

import React, { useState, useEffect } from 'react';
import { IconButton } from 'react-native-paper';
import API from './../../API.js';
import { useSnapshot } from 'valtio';
import GlobalState from '../../contexts/GlobalState.js';
import i18n from "../../i18nMessages.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 ? i18n.t("message.unfollow") : i18n.t("message.follow")) :
(following ? i18n.t("message.unsubscribe") : (pending ? i18n.t("message.pending") : i18n.t("message.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 ?
<IconButton
mode='outlined'
icon={following ? 'person-remove' : 'person-add'}
onPress={toggleFollowThisProfile} /> :
<></>
}
</>
);
}
export default FollowButton;