85 lines
3.0 KiB
JavaScript
85 lines
3.0 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, iconSize }) => {
|
|
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
|
|
icon={following ? 'person-remove' : 'person-add'}
|
|
onPress={toggleFollowThisProfile}
|
|
size={iconSize || 25}
|
|
iconColor={following ? "#c44d56" : "#93faa5"}
|
|
/> :
|
|
<></>
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default FollowButton;
|