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,18 +23,21 @@ export interface Props {
   reblog: boolean
 }
 
-const TimelineActions = React.memo(
+const TimelineActions: React.FC<Props> = ({
-  ({ queryKey, rootQueryKey, highlighted, status, accts, reblog }: Props) => {
+  queryKey,
+  rootQueryKey,
+  highlighted,
+  status,
+  accts,
+  reblog
+}) => {
   const navigation = useNavigation()
   const { t } = useTranslation('componentTimeline')
   const { mode, theme } = useTheme()
   const iconColor = theme.secondary
-    const iconColorAction = (state: boolean) =>
-      state ? theme.primaryDefault : theme.secondary
 
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
-      queryClient,
     onMutate: true,
     onSuccess: (_, params) => {
       const theParams = params as MutationVarsTimelineUpdateStatusProperty
@@ -294,9 +297,7 @@ const TimelineActions = React.memo(
       </View>
     </View>
   )
-  },
+}
-  () => true
-)
 
 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']