Fixed #45

Cannot use pure component in this case after refresh

src/App.tsx

@@ -29,7 +29,7 @@ audio()
 push()
 
 log('log', 'react-query', 'initializing')
-const queryClient = new QueryClient()
+export const queryClient = new QueryClient()
 
 log('log', 'react-native-screens', 'initializing')
 enableScreens()

src/components/Timeline/Shared/Actions.tsx

@@ -23,280 +23,281 @@ export interface Props {
   reblog: boolean
 }
 
-const TimelineActions = React.memo(
+const TimelineActions: React.FC<Props> = ({
-  ({ queryKey, rootQueryKey, highlighted, status, accts, reblog }: Props) => {
+  queryKey,
-    const navigation = useNavigation()
+  rootQueryKey,
-    const { t } = useTranslation('componentTimeline')
+  highlighted,
-    const { mode, theme } = useTheme()
+  status,
-    const iconColor = theme.secondary
+  accts,
-    const iconColorAction = (state: boolean) =>
+  reblog
-      state ? theme.primaryDefault : theme.secondary
+}) => {
+  const navigation = useNavigation()
+  const { t } = useTranslation('componentTimeline')
+  const { mode, theme } = useTheme()
+  const iconColor = theme.secondary
 
-    const queryClient = useQueryClient()
+  const queryClient = useQueryClient()
-    const mutation = useTimelineMutation({
+  const mutation = useTimelineMutation({
-      queryClient,
+    onMutate: true,
-      onMutate: true,
+    onSuccess: (_, params) => {
-      onSuccess: (_, params) => {
+      const theParams = params as MutationVarsTimelineUpdateStatusProperty
-        const theParams = params as MutationVarsTimelineUpdateStatusProperty
+      if (
-        if (
+        // Un-bookmark from bookmarks page
-          // Un-bookmark from bookmarks page
+        (queryKey[1].page === 'Bookmarks' &&
-          (queryKey[1].page === 'Bookmarks' &&
+          theParams.payload.property === 'bookmarked') ||
-            theParams.payload.property === 'bookmarked') ||
+        // Un-favourite from favourites page
-          // Un-favourite from favourites page
+        (queryKey[1].page === 'Favourites' &&
-          (queryKey[1].page === 'Favourites' &&
+          theParams.payload.property === 'favourited') ||
-            theParams.payload.property === 'favourited') ||
+        // Un-reblog from following page
-          // Un-reblog from following page
+        (queryKey[1].page === 'Following' &&
-          (queryKey[1].page === 'Following' &&
-            theParams.payload.property === 'reblogged' &&
-            theParams.payload.currentValue === true)
-        ) {
-          queryClient.invalidateQueries(queryKey)
-        } else if (
           theParams.payload.property === 'reblogged' &&
-          queryKey[1].page !== 'Following'
+          theParams.payload.currentValue === true)
-        ) {
+      ) {
-          // When reblogged, update cache of following page
-          const tempQueryKey: QueryKeyTimeline = [
-            'Timeline',
-            { page: 'Following' }
-          ]
-          queryClient.invalidateQueries(tempQueryKey)
-        } else if (theParams.payload.property === 'favourited') {
-          // When favourited, update favourited page
-          const tempQueryKey: QueryKeyTimeline = [
-            'Timeline',
-            { page: 'Favourites' }
-          ]
-          queryClient.invalidateQueries(tempQueryKey)
-        } else if (theParams.payload.property === 'bookmarked') {
-          // When bookmarked, update bookmark page
-          const tempQueryKey: QueryKeyTimeline = [
-            'Timeline',
-            { page: 'Bookmarks' }
-          ]
-          queryClient.invalidateQueries(tempQueryKey)
-        }
-      },
-      onError: (err: any, params, oldData) => {
-        const correctParam = params as MutationVarsTimelineUpdateStatusProperty
-        displayMessage({
-          mode,
-          type: 'error',
-          message: t('common:toastMessage.error.message', {
-            function: t(
-              `shared.actions.${correctParam.payload.property}.function`
-            )
-          }),
-          ...(err.status &&
-            typeof err.status === 'number' &&
-            err.data &&
-            err.data.error &&
-            typeof err.data.error === 'string' && {
-              description: err.data.error
-            })
-        })
         queryClient.invalidateQueries(queryKey)
+      } else if (
+        theParams.payload.property === 'reblogged' &&
+        queryKey[1].page !== 'Following'
+      ) {
+        // When reblogged, update cache of following page
+        const tempQueryKey: QueryKeyTimeline = [
+          'Timeline',
+          { page: 'Following' }
+        ]
+        queryClient.invalidateQueries(tempQueryKey)
+      } else if (theParams.payload.property === 'favourited') {
+        // When favourited, update favourited page
+        const tempQueryKey: QueryKeyTimeline = [
+          'Timeline',
+          { page: 'Favourites' }
+        ]
+        queryClient.invalidateQueries(tempQueryKey)
+      } else if (theParams.payload.property === 'bookmarked') {
+        // When bookmarked, update bookmark page
+        const tempQueryKey: QueryKeyTimeline = [
+          'Timeline',
+          { page: 'Bookmarks' }
+        ]
+        queryClient.invalidateQueries(tempQueryKey)
+      }
+    },
+    onError: (err: any, params, oldData) => {
+      const correctParam = params as MutationVarsTimelineUpdateStatusProperty
+      displayMessage({
+        mode,
+        type: 'error',
+        message: t('common:toastMessage.error.message', {
+          function: t(
+            `shared.actions.${correctParam.payload.property}.function`
+          )
+        }),
+        ...(err.status &&
+          typeof err.status === 'number' &&
+          err.data &&
+          err.data.error &&
+          typeof err.data.error === 'string' && {
+            description: err.data.error
+          })
+      })
+      queryClient.invalidateQueries(queryKey)
+    }
+  })
+
+  const onPressReply = useCallback(() => {
+    analytics('timeline_shared_actions_reply_press', {
+      page: queryKey[1].page,
+      count: status.replies_count
+    })
+    navigation.navigate('Screen-Compose', {
+      type: 'reply',
+      incomingStatus: status,
+      accts,
+      queryKey
+    })
+  }, [status.replies_count])
+  const onPressReblog = useCallback(() => {
+    analytics('timeline_shared_actions_reblog_press', {
+      page: queryKey[1].page,
+      count: status.reblogs_count,
+      current: status.reblogged
+    })
+    mutation.mutate({
+      type: 'updateStatusProperty',
+      queryKey,
+      rootQueryKey,
+      id: status.id,
+      reblog,
+      payload: {
+        property: 'reblogged',
+        currentValue: status.reblogged,
+        propertyCount: 'reblogs_count',
+        countValue: status.reblogs_count
       }
     })
+  }, [status.reblogged, status.reblogs_count])
+  const onPressFavourite = useCallback(() => {
+    analytics('timeline_shared_actions_favourite_press', {
+      page: queryKey[1].page,
+      count: status.favourites_count,
+      current: status.favourited
+    })
+    mutation.mutate({
+      type: 'updateStatusProperty',
+      queryKey,
+      rootQueryKey,
+      id: status.id,
+      reblog,
+      payload: {
+        property: 'favourited',
+        currentValue: status.favourited,
+        propertyCount: 'favourites_count',
+        countValue: status.favourites_count
+      }
+    })
+  }, [status.favourited, status.favourites_count])
+  const onPressBookmark = useCallback(() => {
+    analytics('timeline_shared_actions_bookmark_press', {
+      page: queryKey[1].page,
+      current: status.bookmarked
+    })
+    mutation.mutate({
+      type: 'updateStatusProperty',
+      queryKey,
+      rootQueryKey,
+      id: status.id,
+      reblog,
+      payload: {
+        property: 'bookmarked',
+        currentValue: status.bookmarked,
+        propertyCount: undefined,
+        countValue: undefined
+      }
+    })
+  }, [status.bookmarked])
 
-    const onPressReply = useCallback(() => {
+  const childrenReply = useMemo(
-      analytics('timeline_shared_actions_reply_press', {
+    () => (
-        page: queryKey[1].page,
+      <>
-        count: status.replies_count
-      })
-      navigation.navigate('Screen-Compose', {
-        type: 'reply',
-        incomingStatus: status,
-        accts,
-        queryKey
-      })
-    }, [status.replies_count])
-    const onPressReblog = useCallback(() => {
-      analytics('timeline_shared_actions_reblog_press', {
-        page: queryKey[1].page,
-        count: status.reblogs_count,
-        current: status.reblogged
-      })
-      mutation.mutate({
-        type: 'updateStatusProperty',
-        queryKey,
-        rootQueryKey,
-        id: status.id,
-        reblog,
-        payload: {
-          property: 'reblogged',
-          currentValue: status.reblogged,
-          propertyCount: 'reblogs_count',
-          countValue: status.reblogs_count
-        }
-      })
-    }, [status.reblogged, status.reblogs_count])
-    const onPressFavourite = useCallback(() => {
-      analytics('timeline_shared_actions_favourite_press', {
-        page: queryKey[1].page,
-        count: status.favourites_count,
-        current: status.favourited
-      })
-      mutation.mutate({
-        type: 'updateStatusProperty',
-        queryKey,
-        rootQueryKey,
-        id: status.id,
-        reblog,
-        payload: {
-          property: 'favourited',
-          currentValue: status.favourited,
-          propertyCount: 'favourites_count',
-          countValue: status.favourites_count
-        }
-      })
-    }, [status.favourited, status.favourites_count])
-    const onPressBookmark = useCallback(() => {
-      analytics('timeline_shared_actions_bookmark_press', {
-        page: queryKey[1].page,
-        current: status.bookmarked
-      })
-      mutation.mutate({
-        type: 'updateStatusProperty',
-        queryKey,
-        rootQueryKey,
-        id: status.id,
-        reblog,
-        payload: {
-          property: 'bookmarked',
-          currentValue: status.bookmarked,
-          propertyCount: undefined,
-          countValue: undefined
-        }
-      })
-    }, [status.bookmarked])
-
-    const childrenReply = useMemo(
-      () => (
-        <>
-          <Icon
-            name='MessageCircle'
-            color={iconColor}
-            size={StyleConstants.Font.Size.L}
-          />
-          {status.replies_count > 0 && (
-            <Text
-              style={{
-                color: theme.secondary,
-                fontSize: StyleConstants.Font.Size.M,
-                marginLeft: StyleConstants.Spacing.XS
-              }}
-            >
-              {status.replies_count}
-            </Text>
-          )}
-        </>
-      ),
-      [status.replies_count]
-    )
-    const childrenReblog = useMemo(() => {
-      const color = (state: boolean) => (state ? theme.green : theme.secondary)
-      return (
-        <>
-          <Icon
-            name='Repeat'
-            color={
-              status.visibility === 'private' || status.visibility === 'direct'
-                ? theme.disabled
-                : color(status.reblogged)
-            }
-            size={StyleConstants.Font.Size.L}
-          />
-          {status.reblogs_count > 0 && (
-            <Text
-              style={{
-                color: color(status.reblogged),
-                fontSize: StyleConstants.Font.Size.M,
-                marginLeft: StyleConstants.Spacing.XS
-              }}
-            >
-              {status.reblogs_count}
-            </Text>
-          )}
-        </>
-      )
-    }, [status.reblogged, status.reblogs_count])
-    const childrenFavourite = useMemo(() => {
-      const color = (state: boolean) => (state ? theme.red : theme.secondary)
-      return (
-        <>
-          <Icon
-            name='Heart'
-            color={color(status.favourited)}
-            size={StyleConstants.Font.Size.L}
-          />
-          {status.favourites_count > 0 && (
-            <Text
-              style={{
-                color: color(status.favourited),
-                fontSize: StyleConstants.Font.Size.M,
-                marginLeft: StyleConstants.Spacing.XS,
-                marginTop: 0
-              }}
-            >
-              {status.favourites_count}
-            </Text>
-          )}
-        </>
-      )
-    }, [status.favourited, status.favourites_count])
-    const childrenBookmark = useMemo(() => {
-      const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
-      return (
         <Icon
-          name='Bookmark'
+          name='MessageCircle'
-          color={color(status.bookmarked)}
+          color={iconColor}
           size={StyleConstants.Font.Size.L}
         />
-      )
+        {status.replies_count > 0 && (
-    }, [status.bookmarked])
+          <Text
-
+            style={{
+              color: theme.secondary,
+              fontSize: StyleConstants.Font.Size.M,
+              marginLeft: StyleConstants.Spacing.XS
+            }}
+          >
+            {status.replies_count}
+          </Text>
+        )}
+      </>
+    ),
+    [status.replies_count]
+  )
+  const childrenReblog = useMemo(() => {
+    const color = (state: boolean) => (state ? theme.green : theme.secondary)
     return (
-      <View
+      <>
-        style={{
+        <Icon
-          paddingLeft: highlighted
+          name='Repeat'
-            ? 0
+          color={
-            : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+            status.visibility === 'private' || status.visibility === 'direct'
-        }}
+              ? theme.disabled
-      >
+              : color(status.reblogged)
-        <View style={styles.actions}>
+          }
-          <Pressable
+          size={StyleConstants.Font.Size.L}
-            style={styles.action}
+        />
-            onPress={onPressReply}
+        {status.reblogs_count > 0 && (
-            children={childrenReply}
+          <Text
-          />
+            style={{
-
+              color: color(status.reblogged),
-          <Pressable
+              fontSize: StyleConstants.Font.Size.M,
-            style={styles.action}
+              marginLeft: StyleConstants.Spacing.XS
-            onPress={onPressReblog}
+            }}
-            children={childrenReblog}
+          >
-            disabled={
+            {status.reblogs_count}
-              status.visibility === 'private' || status.visibility === 'direct'
+          </Text>
-            }
+        )}
-          />
+      </>
-
-          <Pressable
-            style={styles.action}
-            onPress={onPressFavourite}
-            children={childrenFavourite}
-          />
-
-          <Pressable
-            style={styles.action}
-            onPress={onPressBookmark}
-            children={childrenBookmark}
-          />
-        </View>
-      </View>
     )
-  },
+  }, [status.reblogged, status.reblogs_count])
-  () => true
+  const childrenFavourite = useMemo(() => {
-)
+    const color = (state: boolean) => (state ? theme.red : theme.secondary)
+    return (
+      <>
+        <Icon
+          name='Heart'
+          color={color(status.favourited)}
+          size={StyleConstants.Font.Size.L}
+        />
+        {status.favourites_count > 0 && (
+          <Text
+            style={{
+              color: color(status.favourited),
+              fontSize: StyleConstants.Font.Size.M,
+              marginLeft: StyleConstants.Spacing.XS,
+              marginTop: 0
+            }}
+          >
+            {status.favourites_count}
+          </Text>
+        )}
+      </>
+    )
+  }, [status.favourited, status.favourites_count])
+  const childrenBookmark = useMemo(() => {
+    const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
+    return (
+      <Icon
+        name='Bookmark'
+        color={color(status.bookmarked)}
+        size={StyleConstants.Font.Size.L}
+      />
+    )
+  }, [status.bookmarked])
+
+  return (
+    <View
+      style={{
+        paddingLeft: highlighted
+          ? 0
+          : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+      }}
+    >
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.action}
+          onPress={onPressReply}
+          children={childrenReply}
+        />
+
+        <Pressable
+          style={styles.action}
+          onPress={onPressReblog}
+          children={childrenReblog}
+          disabled={
+            status.visibility === 'private' || status.visibility === 'direct'
+          }
+        />
+
+        <Pressable
+          style={styles.action}
+          onPress={onPressFavourite}
+          children={childrenFavourite}
+        />
+
+        <Pressable
+          style={styles.action}
+          onPress={onPressBookmark}
+          children={childrenBookmark}
+        />
+      </View>
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
   actions: {

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -54,7 +54,6 @@ const HeaderConversation = React.memo(
 
     const queryClient = useQueryClient()
     const mutation = useTimelineMutation({
-      queryClient,
       onMutate: true,
       onError: (err: any, _, oldData) => {
         displayMessage({

src/components/Timeline/Shared/Poll.tsx

@@ -45,7 +45,6 @@ const TimelinePoll: React.FC<Props> = ({
 
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
-    queryClient,
     onSuccess: ({ body }, params) => {
       const theParams = params as MutationVarsTimelineUpdateStatusProperty
       queryClient.cancelQueries(queryKey)
@@ -55,7 +54,7 @@ const TimelinePoll: React.FC<Props> = ({
       switch (theParams.payload.property) {
         case 'poll':
           theParams.payload.data = (body as unknown) as Mastodon.Poll
-          updateStatusProperty({ queryClient, ...theParams })
+          updateStatusProperty(theParams)
           break
       }
     },

src/screens/Actions/Account.tsx

@@ -29,7 +29,6 @@ const ActionsAccount: React.FC<Props> = ({
 
   const queryClient = useQueryClient()
   const mutateion = useTimelineMutation({
-    queryClient,
     onSuccess: (_, params) => {
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({

src/screens/Actions/Domain.tsx

@@ -30,7 +30,6 @@ const ActionsDomain: React.FC<Props> = ({
   const { t } = useTranslation('componentTimeline')
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
-    queryClient,
     onSettled: () => {
       displayMessage({
         mode,

src/screens/Actions/Status.tsx

@@ -34,7 +34,6 @@ const ActionsStatus: React.FC<Props> = ({
 
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
-    queryClient,
     onMutate: true,
     onError: (err: any, params, oldData) => {
       const theFunction = (params as MutationVarsTimelineUpdateStatusProperty)

src/utils/queryHooks/timeline.ts

@@ -1,15 +1,12 @@
 import apiInstance from '@api/instance'
 import haptics from '@components/haptics'
+import { queryClient } from '@root/App'
 import { store } from '@root/store'
-import {
+import { getInstanceNotificationsFilter } from '@utils/slices/instancesSlice'
-  getInstanceActive,
-  getInstanceNotificationsFilter
-} from '@utils/slices/instancesSlice'
 import { AxiosError } from 'axios'
 import { uniqBy } from 'lodash'
 import {
   MutationOptions,
-  QueryClient,
   useInfiniteQuery,
   UseInfiniteQueryOptions,
   useMutation
@@ -356,13 +353,11 @@ type MutationOptionsTimeline = MutationOptions<
 >
 
 const useTimelineMutation = ({
-  queryClient,
   onError,
   onMutate,
   onSettled,
   onSuccess
 }: {
-  queryClient: QueryClient
   onError?: MutationOptionsTimeline['onError']
   onMutate?: boolean
   onSettled?: MutationOptionsTimeline['onSettled']
@@ -385,10 +380,10 @@ const useTimelineMutation = ({
         haptics('Light')
         switch (params.type) {
           case 'updateStatusProperty':
-            updateStatusProperty({ queryClient, ...params })
+            updateStatusProperty(params)
             break
           case 'deleteItem':
-            deleteItem({ queryClient, ...params })
+            deleteItem(params)
             break
         }
         return oldData

src/utils/queryHooks/timeline/deleteItem.ts

@@ -1,13 +1,12 @@
-import { InfiniteData, QueryClient } from 'react-query'
+import { queryClient } from '@root/App'
+import { InfiniteData } from 'react-query'
 import { MutationVarsTimelineDeleteItem } from '../timeline'
 
 const deleteItem = ({
-  queryClient,
   queryKey,
   rootQueryKey,
   id
 }: {
-  queryClient: QueryClient
   queryKey?: MutationVarsTimelineDeleteItem['queryKey']
   rootQueryKey?: MutationVarsTimelineDeleteItem['rootQueryKey']
   id: MutationVarsTimelineDeleteItem['id']

src/utils/queryHooks/timeline/updateStatusProperty.ts

@@ -1,5 +1,6 @@
+import { queryClient } from '@root/App'
 import { findIndex } from 'lodash'
-import { InfiniteData, QueryClient } from 'react-query'
+import { InfiniteData } from 'react-query'
 import {
   MutationVarsTimelineUpdateStatusProperty,
   TimelineData
@@ -9,14 +10,12 @@ import updateNotification from './update/notification'
 import updateStatus from './update/status'
 
 const updateStatusProperty = ({
-  queryClient,
   queryKey,
   rootQueryKey,
   id,
   reblog,
   payload
 }: {
-  queryClient: QueryClient
   queryKey: MutationVarsTimelineUpdateStatusProperty['queryKey']
   rootQueryKey?: MutationVarsTimelineUpdateStatusProperty['rootQueryKey']
   id: MutationVarsTimelineUpdateStatusProperty['id']