React-Query fully working on existing components

src/components/ParseContent.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text } from 'react-native'
 import HTMLView, { HTMLViewNode } from 'react-native-htmlview'
 import { useNavigation } from '@react-navigation/native'
 
-import Emojis from 'src/components/Toot/Emojis'
+import Emojis from 'src/components/Status/Emojis'
 
 const renderNode = ({
   node,
@@ -14,7 +14,7 @@ const renderNode = ({
 }: {
   node: HTMLViewNode
   index: number
-  navigation: object
+  navigation: any
   mentions?: mastodon.Mention[]
   showFullLink: boolean
 }) => {

src/components/Status/Actions.tsx

@@ -42,7 +42,6 @@ const Actions: React.FC<Props> = ({
   useEffect(() => {
     setTimeout(() => {
       setSuccessMessage(undefined)
-      console.log('ajwieorjawioejri')
     }, 2000)
     return () => {}
   }, [successMessage])

src/components/Status/Emojis.tsx

@@ -20,9 +20,7 @@ const Emojis: React.FC<Props> = ({ content, emojis, dimension }) => {
             return emojiShortcode === `:${emoji.shortcode}:`
           })
           return emojiIndex === -1 ? (
-            <Text key={i} style={{ color: 'red' }}>
-              Something wrong with emoji!
-            </Text>
+            <Text key={i}>{emojiShortcode}</Text>
           ) : (
             <Image
               key={i}

src/components/Status/Responses/Success.tsx

@@ -8,7 +8,7 @@ export interface Props {
 const Success: React.FC<Props> = ({ message }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current
   useEffect(() => {
-    console.log(message)
+    // console.log(message)
     if (message !== undefined) {
       fadeIn()
     } else {

src/components/Status/action.ts

@@ -2,7 +2,7 @@ import { Dispatch } from '@reduxjs/toolkit'
 import { Alert } from 'react-native'
 
 import client from 'src/api/client'
-import { updateStatus } from 'src/stacks/common/timelineSlice'
+// import { updateStatus } from 'src/stacks/common/timelineSlice'
 
 const action = async ({
   dispatch,
@@ -35,7 +35,7 @@ const action = async ({
   })
 
   if (!res.body[stateKey] === statePrev) {
-    dispatch(updateStatus(res.body))
+    // dispatch(updateStatus(res.body))
   } else {
     Alert.alert(alert.title, alert.message, [
       { text: 'OK', onPress: () => console.log('OK Pressed') }

src/components/StatusInNotifications.tsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react'
+import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+
+import Actioned from './Status/Actioned'
+import Avatar from './Status/Avatar'
+import Header from './Status/Header'
+import Content from './Status/Content'
+import Poll from './Status/Poll'
+import Attachment from './Status/Attachment'
+import Card from './Status/Card'
+import Actions from './Status/Actions'
+
+export interface Props {
+  status: mastodon.Notification
+}
+
+const TootNotification: React.FC<Props> = ({ status }) => {
+  const navigation = useNavigation()
+  const actualAccount = status.status ? status.status.account : status.account
+
+  const statusView = useMemo(() => {
+    return (
+      <View style={styles.statusView}>
+        <Actioned
+          action={status.type}
+          name={status.account.display_name || status.account.username}
+          emojis={status.account.emojis}
+          notification
+        />
+
+        <View style={styles.status}>
+          <Avatar uri={actualAccount.avatar} id={actualAccount.id} />
+          <View style={styles.details}>
+            <Header
+              name={actualAccount.display_name || actualAccount.username}
+              emojis={actualAccount.emojis}
+              account={actualAccount.acct}
+              created_at={status.created_at}
+            />
+            <Pressable
+              onPress={() => navigation.navigate('Toot', { toot: status.id })}
+            >
+              {status.status ? (
+                <>
+                  {status.status.content && (
+                    <Content
+                      content={status.status.content}
+                      emojis={status.status.emojis}
+                      mentions={status.status.mentions}
+                      spoiler_text={status.status.spoiler_text}
+                      // tags={status.status.tags}
+                      // style={{ flex: 1 }}
+                    />
+                  )}
+                  {status.status.poll && <Poll poll={status.status.poll} />}
+                  {status.status.media_attachments.length > 0 && (
+                    <Attachment
+                      media_attachments={status.status.media_attachments}
+                      sensitive={status.status.sensitive}
+                      width={Dimensions.get('window').width - 24 - 50 - 8}
+                    />
+                  )}
+                  {status.status.card && <Card card={status.status.card} />}
+                </>
+              ) : (
+                <></>
+              )}
+            </Pressable>
+            {status.status && (
+              <Actions
+                id={status.status.id}
+                url={status.status.url}
+                replies_count={status.status.replies_count}
+                reblogs_count={status.status.reblogs_count}
+                reblogged={status.status.reblogged}
+                favourites_count={status.status.favourites_count}
+                favourited={status.status.favourited}
+                bookmarked={status.status.bookmarked}
+              />
+            )}
+          </View>
+        </View>
+      </View>
+    )
+  }, [status])
+
+  return statusView
+}
+
+const styles = StyleSheet.create({
+  statusView: {
+    flex: 1,
+    flexDirection: 'column',
+    padding: 12
+  },
+  status: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  details: {
+    flex: 1,
+    flexGrow: 1
+  }
+})
+
+export default TootNotification

src/components/StatusInTimeline.tsx

@@ -2,35 +2,35 @@ import React, { useMemo } from 'react'
 import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 
-import Actioned from './Toot/Actioned'
-import Avatar from './Toot/Avatar'
-import Header from './Toot/Header'
-import Content from './Toot/Content'
-import Poll from './Toot/Poll'
-import Attachment from './Toot/Attachment'
-import Card from './Toot/Card'
-import Actions from './Toot/Actions'
+import Actioned from './Status/Actioned'
+import Avatar from './Status/Avatar'
+import Header from './Status/Header'
+import Content from './Status/Content'
+import Poll from './Status/Poll'
+import Attachment from './Status/Attachment'
+import Card from './Status/Card'
+import Actions from './Status/Actions'
 
 export interface Props {
-  toot: mastodon.Status
+  status: mastodon.Status
 }
 
-const TootTimeline: React.FC<Props> = ({ toot }) => {
+const StatusInTimeline: React.FC<Props> = ({ status }) => {
   const navigation = useNavigation()
 
-  let actualContent = toot.reblog ? toot.reblog : toot
+  let actualContent = status.reblog ? status.reblog : status
 
-  const tootView = useMemo(() => {
+  const statusView = useMemo(() => {
     return (
-      <View style={styles.tootTimeline}>
-        {toot.reblog && (
+      <View style={styles.statusView}>
+        {status.reblog && (
           <Actioned
             action='reblog'
-            name={toot.account.display_name || toot.account.username}
-            emojis={toot.account.emojis}
+            name={status.account.display_name || status.account.username}
+            emojis={status.account.emojis}
           />
         )}
-        <View style={styles.toot}>
+        <View style={styles.status}>
           <Avatar
             uri={actualContent.account.avatar}
             id={actualContent.account.id}
@@ -43,8 +43,8 @@ const TootTimeline: React.FC<Props> = ({ toot }) => {
               }
               emojis={actualContent.account.emojis}
               account={actualContent.account.acct}
-              created_at={toot.created_at}
-              application={toot.application}
+              created_at={status.created_at}
+              application={status.application}
             />
             {/* Can pass toot info to next page to speed up performance */}
             <Pressable
@@ -88,18 +88,18 @@ const TootTimeline: React.FC<Props> = ({ toot }) => {
         </View>
       </View>
     )
-  }, [toot])
+  }, [status])
 
-  return tootView
+  return statusView
 }
 
 const styles = StyleSheet.create({
-  tootTimeline: {
+  statusView: {
     flex: 1,
     flexDirection: 'column',
     padding: 12
   },
-  toot: {
+  status: {
     flex: 1,
     flexDirection: 'row'
   },
@@ -109,4 +109,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default TootTimeline
+export default StatusInTimeline

src/components/TootNotification.tsx

@@ -1,106 +0,0 @@
-import React, { useMemo } from 'react'
-import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
-
-import Actioned from './Toot/Actioned'
-import Avatar from './Toot/Avatar'
-import Header from './Toot/Header'
-import Content from './Toot/Content'
-import Poll from './Toot/Poll'
-import Attachment from './Toot/Attachment'
-import Card from './Toot/Card'
-import Actions from './Toot/Actions'
-
-export interface Props {
-  toot: mastodon.Notification
-}
-
-const TootNotification: React.FC<Props> = ({ toot }) => {
-  const navigation = useNavigation()
-  const actualAccount = toot.status ? toot.status.account : toot.account
-
-  const tootView = useMemo(() => {
-    return (
-      <View style={styles.tootNotification}>
-        <Actioned
-          action={toot.type}
-          name={toot.account.display_name || toot.account.username}
-          emojis={toot.account.emojis}
-          notification
-        />
-
-        <View style={styles.toot}>
-          <Avatar uri={actualAccount.avatar} id={actualAccount.id} />
-          <View style={styles.details}>
-            <Header
-              name={actualAccount.display_name || actualAccount.username}
-              emojis={actualAccount.emojis}
-              account={actualAccount.acct}
-              created_at={toot.created_at}
-            />
-            <Pressable
-              onPress={() => navigation.navigate('Toot', { toot: toot.id })}
-            >
-              {toot.status ? (
-                <>
-                  {toot.status.content && (
-                    <Content
-                      content={toot.status.content}
-                      emojis={toot.status.emojis}
-                      mentions={toot.status.mentions}
-                      spoiler_text={toot.status.spoiler_text}
-                      // tags={toot.status.tags}
-                      // style={{ flex: 1 }}
-                    />
-                  )}
-                  {toot.status.poll && <Poll poll={toot.status.poll} />}
-                  {toot.status.media_attachments.length > 0 && (
-                    <Attachment
-                      media_attachments={toot.status.media_attachments}
-                      sensitive={toot.status.sensitive}
-                      width={Dimensions.get('window').width - 24 - 50 - 8}
-                    />
-                  )}
-                  {toot.status.card && <Card card={toot.status.card} />}
-                </>
-              ) : (
-                <></>
-              )}
-            </Pressable>
-            {toot.status && (
-              <Actions
-                id={toot.status.id}
-                replies_count={toot.status.replies_count}
-                reblogs_count={toot.status.reblogs_count}
-                reblogged={toot.status.reblogged}
-                favourites_count={toot.status.favourites_count}
-                favourited={toot.status.favourited}
-                bookmarked={toot.status.bookmarked}
-              />
-            )}
-          </View>
-        </View>
-      </View>
-    )
-  }, [toot])
-
-  return tootView
-}
-
-const styles = StyleSheet.create({
-  tootNotification: {
-    flex: 1,
-    flexDirection: 'column',
-    padding: 12
-  },
-  toot: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  details: {
-    flex: 1,
-    flexGrow: 1
-  }
-})
-
-export default TootNotification