From 242ecf76c0297c2067d7339af73fe237cf6c6ab6 Mon Sep 17 00:00:00 2001 From: xmflsct Date: Fri, 3 Feb 2023 13:11:15 +0100 Subject: [PATCH] Improve marker loading Actually the id can be invalid (not found), and the timeline can be loaded to the right position, therefore no need to check the id anymore. --- src/components/Timeline/index.tsx | 41 +++++++++++++++++++++---------- src/utils/queryHooks/timeline.ts | 15 ++--------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx index 904a1207..b896e57f 100644 --- a/src/components/Timeline/index.tsx +++ b/src/components/Timeline/index.tsx @@ -1,7 +1,7 @@ import ComponentSeparator from '@components/Separator' import CustomText from '@components/Text' import TimelineDefault from '@components/Timeline/Default' -import { useScrollToTop } from '@react-navigation/native' +import { useNavigation, useScrollToTop } from '@react-navigation/native' import { UseInfiniteQueryOptions } from '@tanstack/react-query' import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline' import { flattenPages } from '@utils/queryHooks/utils' @@ -12,7 +12,8 @@ import { } from '@utils/storage/actions' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' -import React, { RefObject, useRef, useState } from 'react' +import { throttle } from 'lodash' +import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { FlatList, FlatListProps, Platform, RefreshControl } from 'react-native' import Animated, { @@ -55,6 +56,7 @@ const Timeline: React.FC = ({ readMarker = undefined, customProps }) => { + const navigation = useNavigation() const { colors, theme } = useTheme() const { t } = useTranslation('componentTimeline') @@ -134,6 +136,21 @@ const Timeline: React.FC = ({ [isFetching] ) + const latestMarker = useRef() + const updateMarkers = useCallback( + throttle( + () => readMarker && setAccountStorage([{ key: readMarker, value: latestMarker.current }]), + 1000 * 15 + ), + [] + ) + readMarker && + useEffect(() => { + const unsubscribe = navigation.addListener('blur', () => + setAccountStorage([{ key: readMarker, value: latestMarker.current }]) + ) + return unsubscribe + }, []) const viewabilityConfigCallbackPairs = useRef< Pick, 'viewabilityConfigCallbackPairs'>['viewabilityConfigCallbackPairs'] >( @@ -155,9 +172,11 @@ const Timeline: React.FC = ({ firstItemId && firstItemId > (marker || '0') ) { - setAccountStorage([{ key: readMarker, value: firstItemId }]) + latestMarker.current = firstItemId + updateMarkers() } else { - // setAccountStorage([{ key: readMarker, value: '105250709762254246' }]) + // latestMarker.current = '105250709762254246' + // updateMarkers() } } } @@ -218,15 +237,11 @@ const Timeline: React.FC = ({ } ListEmptyComponent={} - ItemSeparatorComponent={({ leadingItem }) => - queryKey[1].page === 'Toot' && queryKey[1].toot === leadingItem.id ? ( - - ) : ( - - ) - } + ItemSeparatorComponent={() => ( + + )} viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current} {...(!isLoading && !isFetching && { diff --git a/src/utils/queryHooks/timeline.ts b/src/utils/queryHooks/timeline.ts index 43227377..e36f3e91 100644 --- a/src/utils/queryHooks/timeline.ts +++ b/src/utils/queryHooks/timeline.ts @@ -61,20 +61,9 @@ export const queryFunctionTimeline = async ({ let marker: string | undefined if (page.page === 'Following' && !pageParam?.offset && !pageParam?.min_id && !pageParam?.max_id) { - const storedMarker = getAccountStorage.string('read_marker_following') - if (storedMarker) { - await apiInstance({ - method: 'get', - url: 'timelines/home', - params: { limit: 1, min_id: storedMarker } - }).then(res => { - if (res.body.length) { - marker = storedMarker - } - }) - } + marker = getAccountStorage.string('read_marker_following') } - let params: { [key: string]: string } = marker + const params: { [key: string]: string } = marker ? { limit: 40, max_id: marker } : { limit: 40, ...pageParam }