diff --git a/src/App.tsx b/src/App.tsx index 620cba1a..2503520c 100644 --- a/src/App.tsx +++ b/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() diff --git a/src/components/Timeline/Shared/Actions.tsx b/src/components/Timeline/Shared/Actions.tsx index 402211e2..11323b4c 100644 --- a/src/components/Timeline/Shared/Actions.tsx +++ b/src/components/Timeline/Shared/Actions.tsx @@ -23,280 +23,281 @@ export interface Props { reblog: boolean } -const TimelineActions = React.memo( - ({ queryKey, rootQueryKey, highlighted, status, accts, reblog }: Props) => { - 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 TimelineActions: React.FC = ({ + queryKey, + rootQueryKey, + highlighted, + status, + accts, + reblog +}) => { + const navigation = useNavigation() + const { t } = useTranslation('componentTimeline') + const { mode, theme } = useTheme() + const iconColor = theme.secondary - const queryClient = useQueryClient() - const mutation = useTimelineMutation({ - queryClient, - onMutate: true, - onSuccess: (_, params) => { - const theParams = params as MutationVarsTimelineUpdateStatusProperty - if ( - // Un-bookmark from bookmarks page - (queryKey[1].page === 'Bookmarks' && - theParams.payload.property === 'bookmarked') || - // Un-favourite from favourites page - (queryKey[1].page === 'Favourites' && - theParams.payload.property === 'favourited') || - // Un-reblog from following page - (queryKey[1].page === 'Following' && - theParams.payload.property === 'reblogged' && - theParams.payload.currentValue === true) - ) { - queryClient.invalidateQueries(queryKey) - } else if ( + const queryClient = useQueryClient() + const mutation = useTimelineMutation({ + onMutate: true, + onSuccess: (_, params) => { + const theParams = params as MutationVarsTimelineUpdateStatusProperty + if ( + // Un-bookmark from bookmarks page + (queryKey[1].page === 'Bookmarks' && + theParams.payload.property === 'bookmarked') || + // Un-favourite from favourites page + (queryKey[1].page === 'Favourites' && + theParams.payload.property === 'favourited') || + // Un-reblog from following page + (queryKey[1].page === 'Following' && 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 - }) - }) + theParams.payload.currentValue === true) + ) { 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(() => { - 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( - () => ( - <> - - {status.replies_count > 0 && ( - - {status.replies_count} - - )} - - ), - [status.replies_count] - ) - const childrenReblog = useMemo(() => { - const color = (state: boolean) => (state ? theme.green : theme.secondary) - return ( - <> - - {status.reblogs_count > 0 && ( - - {status.reblogs_count} - - )} - - ) - }, [status.reblogged, status.reblogs_count]) - const childrenFavourite = useMemo(() => { - const color = (state: boolean) => (state ? theme.red : theme.secondary) - return ( - <> - - {status.favourites_count > 0 && ( - - {status.favourites_count} - - )} - - ) - }, [status.favourited, status.favourites_count]) - const childrenBookmark = useMemo(() => { - const color = (state: boolean) => (state ? theme.yellow : theme.secondary) - return ( + const childrenReply = useMemo( + () => ( + <> - ) - }, [status.bookmarked]) - + {status.replies_count > 0 && ( + + {status.replies_count} + + )} + + ), + [status.replies_count] + ) + const childrenReblog = useMemo(() => { + const color = (state: boolean) => (state ? theme.green : theme.secondary) return ( - - - - - - - - - - - + <> + + {status.reblogs_count > 0 && ( + + {status.reblogs_count} + + )} + ) - }, - () => true -) + }, [status.reblogged, status.reblogs_count]) + const childrenFavourite = useMemo(() => { + const color = (state: boolean) => (state ? theme.red : theme.secondary) + return ( + <> + + {status.favourites_count > 0 && ( + + {status.favourites_count} + + )} + + ) + }, [status.favourited, status.favourites_count]) + const childrenBookmark = useMemo(() => { + const color = (state: boolean) => (state ? theme.yellow : theme.secondary) + return ( + + ) + }, [status.bookmarked]) + + return ( + + + + + + + + + + + + ) +} const styles = StyleSheet.create({ actions: { diff --git a/src/components/Timeline/Shared/HeaderConversation.tsx b/src/components/Timeline/Shared/HeaderConversation.tsx index 145122cd..f1227c01 100644 --- a/src/components/Timeline/Shared/HeaderConversation.tsx +++ b/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({ diff --git a/src/components/Timeline/Shared/Poll.tsx b/src/components/Timeline/Shared/Poll.tsx index 7c88395c..52ae1d64 100644 --- a/src/components/Timeline/Shared/Poll.tsx +++ b/src/components/Timeline/Shared/Poll.tsx @@ -45,7 +45,6 @@ const TimelinePoll: React.FC = ({ 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 = ({ switch (theParams.payload.property) { case 'poll': theParams.payload.data = (body as unknown) as Mastodon.Poll - updateStatusProperty({ queryClient, ...theParams }) + updateStatusProperty(theParams) break } }, diff --git a/src/screens/Actions/Account.tsx b/src/screens/Actions/Account.tsx index f5531149..efadbd0d 100644 --- a/src/screens/Actions/Account.tsx +++ b/src/screens/Actions/Account.tsx @@ -29,7 +29,6 @@ const ActionsAccount: React.FC = ({ const queryClient = useQueryClient() const mutateion = useTimelineMutation({ - queryClient, onSuccess: (_, params) => { const theParams = params as MutationVarsTimelineUpdateAccountProperty displayMessage({ diff --git a/src/screens/Actions/Domain.tsx b/src/screens/Actions/Domain.tsx index c8c23ad6..be10477b 100644 --- a/src/screens/Actions/Domain.tsx +++ b/src/screens/Actions/Domain.tsx @@ -30,7 +30,6 @@ const ActionsDomain: React.FC = ({ const { t } = useTranslation('componentTimeline') const queryClient = useQueryClient() const mutation = useTimelineMutation({ - queryClient, onSettled: () => { displayMessage({ mode, diff --git a/src/screens/Actions/Status.tsx b/src/screens/Actions/Status.tsx index 4e42e565..64d189ff 100644 --- a/src/screens/Actions/Status.tsx +++ b/src/screens/Actions/Status.tsx @@ -34,7 +34,6 @@ const ActionsStatus: React.FC = ({ const queryClient = useQueryClient() const mutation = useTimelineMutation({ - queryClient, onMutate: true, onError: (err: any, params, oldData) => { const theFunction = (params as MutationVarsTimelineUpdateStatusProperty) diff --git a/src/utils/queryHooks/timeline.ts b/src/utils/queryHooks/timeline.ts index bb4f441b..6e3b3f4b 100644 --- a/src/utils/queryHooks/timeline.ts +++ b/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 { - getInstanceActive, - getInstanceNotificationsFilter -} from '@utils/slices/instancesSlice' +import { 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 diff --git a/src/utils/queryHooks/timeline/deleteItem.ts b/src/utils/queryHooks/timeline/deleteItem.ts index 5acb85b3..f5583ce1 100644 --- a/src/utils/queryHooks/timeline/deleteItem.ts +++ b/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'] diff --git a/src/utils/queryHooks/timeline/updateStatusProperty.ts b/src/utils/queryHooks/timeline/updateStatusProperty.ts index 0263bdb8..c304691e 100644 --- a/src/utils/queryHooks/timeline/updateStatusProperty.ts +++ b/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']