Use ky instead of fetch

src/components/Toot/Actions.jsx

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 
+import action from 'src/components/action'
+
 export default function Actions ({
+  id,
   replies_count,
   reblogs_count,
   reblogged,
@@ -20,7 +23,7 @@ export default function Actions ({
         <Feather name='repeat' />
         <Text>{reblogs_count}</Text>
       </Pressable>
-      <Pressable style={styles.action}>
+      <Pressable style={styles.action} onPress={() => action('favourite', id)}>
         <Feather name='heart' />
         <Text>{favourites_count}</Text>
       </Pressable>
@@ -34,15 +37,23 @@ export default function Actions ({
 const styles = StyleSheet.create({
   actions: {
     flex: 1,
-    flexDirection: 'row'
+    flexDirection: 'row',
+    marginTop: 4
   },
   action: {
     width: '25%',
     flexDirection: 'row',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    paddingTop: 8,
+    paddingBottom: 8
   }
 })
 
-// Actions.propTypes = {
-//   uri: PropTypes.string
-// }
+Actions.propTypes = {
+  id: PropTypes.string.isRequired,
+  replies_count: PropTypes.number.isRequired,
+  reblogs_count: PropTypes.number.isRequired,
+  reblogged: PropTypes.bool.isRequired,
+  favourites_count: PropTypes.number.isRequired,
+  favourited: PropTypes.bool.isRequired
+}

src/components/TootNotification.jsx

@@ -35,7 +35,6 @@ export default function TootNotification ({ toot }) {
               account={actualAccount.acct}
               created_at={toot.created_at}
             />
-            {/* Can pass toot info to next page to speed up performance */}
             <Pressable
               onPress={() => navigation.navigate('Toot', { toot: toot.id })}
             >
@@ -52,7 +51,7 @@ export default function TootNotification ({ toot }) {
                     />
                   )}
                   {toot.status.poll && <Poll poll={toot.status.poll} />}
-                  {toot.status.media_attachments && (
+                  {toot.status.media_attachments.length > 0 && (
                     <Attachment
                       media_attachments={toot.status.media_attachments}
                       sensitive={toot.status.sensitive}
@@ -67,6 +66,7 @@ export default function TootNotification ({ toot }) {
             </Pressable>
             {toot.status && (
               <Actions
+                id={toot.status.id}
                 replies_count={toot.status.replies_count}
                 reblogs_count={toot.status.reblogs_count}
                 reblogged={toot.status.reblogged}
@@ -78,7 +78,7 @@ export default function TootNotification ({ toot }) {
         </View>
       </View>
     )
-  })
+  }, [toot])
 
   return tootView
 }

src/components/TootTimeline.jsx

@@ -50,9 +50,9 @@ export default function TootTimeline ({ toot }) {
             />
             {/* Can pass toot info to next page to speed up performance */}
             <Pressable
-              // onPress={() =>
-              //   navigation.navigate('Toot', { toot: actualContent.id })
-              // }
+              onPress={() =>
+                navigation.navigate('Toot', { toot: actualContent.id })
+              }
             >
               {actualContent.content ? (
                 <Content
@@ -77,6 +77,7 @@ export default function TootTimeline ({ toot }) {
               {actualContent.card && <Card card={actualContent.card} />}
             </Pressable>
             <Actions
+              id={actualContent.id}
               replies_count={actualContent.replies_count}
               reblogs_count={actualContent.reblogs_count}
               reblogged={actualContent.reblogged}

src/components/action.js

@@ -0,0 +1,63 @@
+import { Alert } from 'react-native'
+import { useSelector } from 'react-redux'
+
+import { client } from 'src/api/client'
+
+export default async function action (type, id) {
+  // If header if needed for remote server
+  const header = {
+    headers: {
+      Authorization: `Bearer ${useSelector(
+        state => state.instanceInfo.localToken
+      )}`
+    }
+  }
+  const instance = `https://${useSelector(
+    state => state.instanceInfo.local
+  )}/api/v1/`
+
+  let endpoint
+  switch (type) {
+    case 'favourite':
+      endpoint = `${instance}statuses/${id}/favourite`
+      break
+    case 'unfavourite':
+      endpoint = `${instance}statuses/${id}/unfavourite`
+      break
+    case 'reblog':
+      endpoint = `${instance}statuses/${id}/reblog`
+      break
+    case 'unreblog':
+      endpoint = `${instance}statuses/${id}/unreblog`
+      break
+    case 'bookmark':
+      endpoint = `${instance}statuses/${id}/bookmark`
+      break
+    case 'unbookmark':
+      endpoint = `${instance}statuses/${id}/unbookmark`
+      break
+    case 'mute':
+      endpoint = `${instance}statuses/${id}/mute`
+      break
+    case 'unmute':
+      endpoint = `${instance}statuses/${id}/unmute`
+      break
+    case 'pin':
+      endpoint = `${instance}statuses/${id}/pin`
+      break
+    case 'unpin':
+      endpoint = `${instance}statuses/${id}/unpin`
+      break
+  }
+
+  const res = await client.post(endpoint, [], header)
+  console.log(res)
+
+  const alert = {
+    title: 'This is a title',
+    message: 'This is a message'
+  }
+  Alert.alert(alert.title, alert.message, [
+    { text: 'OK', onPress: () => console.log('OK Pressed') }
+  ])
+}