Enable favouriting statuses

src/components/posts/post-action-bar.js

@@ -4,17 +4,17 @@ import {
     Text,
     View,
     Dimensions,
-    TouchableWithoutFeedback
+    TouchableOpacity
 } from "react-native";
 import { activeOrNot } from "src/interface/interactions";
 
 const PostActionJsx = (props) => {
     return (
-        <TouchableWithoutFeedback
+        <TouchableOpacity
-            onPress = { props.callback }>
+            onPress = { props.onPress }>
             <Image
                 source = {
-                    activeOrNot(props.state[props.field], props.pack)
+                    activeOrNot(props.active, props.pack)
                 }
                 style = {
                     [
@@ -22,18 +22,11 @@ const PostActionJsx = (props) => {
                         props.last ? styles.lastIcon : {}
                     ]
                 } />
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
     )
 }
 
 const PostActionBarJsx = (props) => {
-    let [state, setState] = useState({
-        favourited: props.favourited,
-        commenting: false,
-        reblogged: props.reblogged,
-        bookmarked: false
-    });
-
     const icons = {
         heart: {
             active: require("assets/eva-icons/post-actions/heart-active.png"),
@@ -53,33 +46,21 @@ const PostActionBarJsx = (props) => {
             <PostActionJsx
                 field = "favourited"
                 pack = { icons.heart }
-                state = { state }
+                active = { props.favourited }
-                callback = {
+                onPress = { props.onFavourite } />
-                    () => {
-                        setState({ ...state, favourited: !state.favourited });
-                    }
-                } />
 
             <PostActionJsx
                 field = "reblogged"
                 pack = { icons.reblog }
-                state = { state }
+                reblogged = { props.reblogged }
-                callback = {
+                onPress = { props.onReblog }/>
-                    () => {
-                        setState({ ...state, reblogged: !state.reblogged });
-                    }
-                } />
 
             <PostActionJsx
                 field = "bookmarked"
                 pack = { icons.bookmark }
                 last = { true }
-                state = { state }
+                bookmarked = { props.bookmarked }
-                callback = {
+                onPress = { props.onBookmark } />
-                    () => {
-                        setState({ ...state, bookmarked: !state.bookmarked });
-                    }
-                } />
         </View>
     )
 }

src/components/posts/post.js

@@ -8,7 +8,10 @@ import {
     ScrollView,
 } from "react-native";
 
-import { pluralize, timeToAge} from "src/interface/rendering"
+import { pluralize, timeToAge } from "src/interface/rendering"
+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as requests from "src/requests";
 
 import PostActionBarJsx from "src/components/posts/post-action-bar";
 
@@ -46,6 +49,20 @@ function getDimensionsPromises(uris) {
     }));
 }
 
+function handleFavouriteFactory(state, setState) {
+    return async () => {
+        const newStatus = await requests.favouriteStatus(
+            state.instance,
+            state.data.id,
+            state.accessToken
+        );
+
+        setState({...state,
+            data: newStatus,
+        });
+    };
+}
+
 const PostImageJsx = (props) => {
     return <Image
         source = { { uri: props.uri } }
@@ -54,7 +71,6 @@ const PostImageJsx = (props) => {
                 flex: 1,
                 width: SCREEN_WIDTH,
                 height: getAutoHeight(props.width, props.height, SCREEN_WIDTH),
-                // objectFit: "cover"
             }
         } />
 };
@@ -120,7 +136,10 @@ export const RawPostJsx = (props) => {
             }
             <PostActionBarJsx
                 favourited = { props.data.favourited }
-                reblogged = { props.data.reblogged } />
+                reblogged = { props.data.reblogged }
+                bookmarked = { false }
+                onFavourite = { props.onFavourite }
+                onBookmark = { props.onBookmark } />
             <View style = { styles.caption }>
                 <Text>
                     <Text style = { styles.strong }>
@@ -156,25 +175,65 @@ export const PostByDataJsx = (props) => {
 
     let [state, setState] = useState({
         loaded: false,
+        data: props.data,
         dimensions: []
     });
 
     useEffect(() => {
-        Promise.all(getDimensionsPromises(props.data.media_attachments))
+        let instance, accessToken;
+        AsyncStorage
+            .multiGet([
+                "@user_instance",
+                "@user_token",
+            ])
+            .then(([instancePair, tokenPair]) => {
+                instance = instancePair[1];
+                accessToken = JSON.parse(tokenPair[1]).access_token;
+            })
+            .then(() =>
+                Promise.all(
+                    getDimensionsPromises(props.data.media_attachments)
+                )
+            )
             .then(dimensions => {
-            setState({
+                setState({...state,
                     dimensions: dimensions,
+                    instance,
+                    accessToken,
                     loaded: true
                 });
             });
     }, []);
 
+    const _handleFavourite = async () => {
+        let newStatus;
+
+        if (!state.data.favourited) {
+            newStatus = await requests.favouriteStatus(
+                state.instance,
+                state.data.id,
+                state.accessToken
+            );
+        } else {
+            newStatus = await requests.unfavouriteStatus(
+                state.instance,
+                state.data.id,
+                state.accessToken
+            );
+        }
+
+        setState({...state,
+            data: newStatus,
+        });
+    };
+
     return (
         <View>
             { state.loaded ?
                 <RawPostJsx
-                    data = { props.data }
+                    data = { state.data }
                     dimensions = { state.dimensions }
+                    onFavourite = { _handleFavourite }
                     navigation = { props.navigation }/>
                 : <View></View> }
         </View>

src/requests.js

@@ -52,6 +52,17 @@ export async function postForm(url, data, token = false) {
     return resp;
 }
 
+export async function post(url, token = false) {
+    const resp = await fetch(url, {
+        method: "POST",
+        headers: token
+            ? { "Authorization": `Bearer ${token}`, }
+            : {},
+    });
+
+    return resp;
+}
+
 export async function get(url, token = false, data = false) {
     let completeURL;
     if (data) {
@@ -86,6 +97,16 @@ export async function fetchStatusContext(domain, id, token) {
     return resp.json();
 }
 
+export async function favouriteStatus(domain, id, token) {
+    const resp = await post(`https://${domain}/api/v1/statuses/${id}/favourite`, token);
+    return resp.json();
+}
+
+export async function unfavouriteStatus(domain, id, token) {
+    const resp = await post(`https://${domain}/api/v1/statuses/${id}/unfavourite`, token);
+    return resp.json();
+}
+
 export async function fetchFollowing(domain, id, token) {
     const resp = await get(`https://${domain}/api/v1/accounts/${id}/following`, token);
     return resp.json();