Enable following and unfollowing users

src/components/pages/profile.js

@@ -66,7 +66,7 @@ const ViewProfileJsx = ({navigation}) => {
     });
 
     useEffect(() => {
-        let ownProfile, ownDomain, accessToken, domain;
+        let ownProfile, instance, accessToken, domain;
         AsyncStorage
             .multiGet(["@user_profile", "@user_instance", "@user_token"])
             .then(([ ownProfilePair, ownDomainPair, tokenPair ]) => {
@@ -96,10 +96,35 @@ const ViewProfileJsx = ({navigation}) => {
                 setState({...state,
                     mutuals: getMutuals(ownFollowing, theirFollowers),
                     posts: posts,
+                    instance,
+                    ownProfile,
+                    accessToken,
+                    followed: ownFollowing.some(x => x.id == state.profile.id),
                     loaded: true,
                 });
             });
     }, []);
+
+    const _handleFollow = async () => {
+        if (!state.followed) {
+            await requests.followAccount(
+                state.instance,
+                state.profile.id,
+                state.accessToken
+            );
+        } else {
+            await requests.unfollowAccount(
+                state.instance,
+                state.profile.id,
+                state.accessToken
+            );
+        }
+
+        setState({...state,
+            followed: !state.followed,
+        });
+    };
+
     return (
         <>
             { state.loaded
@@ -107,9 +132,10 @@ const ViewProfileJsx = ({navigation}) => {
                       active = { navigation.getParam("originTab") }
                       navigation = { navigation }>
                     <RawProfileJsx
+                        onFollow = { _handleFollow }
                         profile = { state.profile }
                         mutuals = { state.mutuals }
-                        notifs = { state.notifs }
+                        followed = { state.followed }
                         posts = { state.posts }/>
                 </ScreenWithBackBarJsx>
                 : <></>
@@ -197,16 +223,27 @@ const RawProfileJsx = (props) => {
                         props.navigation.navigate("Settings");
                     }
                   }>
-                <View style = { styles.button }>
+                <View style = { styles.button.container }>
-                    <Text style = { styles.buttonText }>Settings</Text>
+                    <Text style = { styles.button.text }>Settings</Text>
                 </View>
             </TouchableOpacity>
         );
     } else {
         profileButton = (
-            <TouchableOpacity onPress = { _handleFollow }>
+            <TouchableOpacity onPress = { props.onFollow }>
-                <View style = { styles.button }>
+                <View style = { [
-                    <Text style = { styles.buttonText }>Follow</Text>
+                        styles.button.container,
+                        props.followed ? styles.button.dark : {},
+                      ] }>
+                    <Text style = {[
+                            styles.button.text,
+                            props.followed ? styles.button.darkText : {},
+                          ]}>
+                        { props.followed
+                            ? "Unfollow"
+                            : "Follow"
+                        }
+                    </Text>
                 </View>
             </TouchableOpacity>
         )
@@ -373,15 +410,17 @@ const styles = {
         textDecorationLine: "underline"
     },
     button: {
-        borderWidth: 1,
+        container: {
-        borderColor: "#888",
+            borderWidth: 1,
-        borderRadius: 5,
+            borderColor: "#888",
+            borderRadius: 5,
 
-        padding: 10,
+            padding: 10,
-        marginTop: 10
+            marginTop: 10
-    },
+        },
-    buttonText: {
+        dark: { backgroundColor: "black", },
-        textAlign: "center"
+        text: { textAlign: "center" },
+        darkText: { color: "white", },
     },
     strong: {
         fontWeight: "bold",

src/requests.js

@@ -137,6 +137,16 @@ export async function fetchFollowers(domain, id, token) {
     return resp.json();
 }
 
+export async function followAccount(domain, id, token) {
+    const resp = await post(`https://${domain}/api/v1/accounts/${id}/follow`, token);
+    return resp.json();
+}
+
+export async function unfollowAccount(domain, id, token) {
+    const resp = await post(`https://${domain}/api/v1/accounts/${id}/unfollow`, token);
+    return resp.json();
+}
+
 export async function fetchHomeTimeline(domain, token, params = false) {
     const resp = await get(
         `https://${domain}/api/v1/timelines/home`,