MVP last read position

src/Screens.tsx

@@ -25,7 +25,7 @@ import { addScreenshotListener } from 'expo-screen-capture'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
-import { onlineManager, useQueryClient } from 'react-query'
+import { useQueryClient } from 'react-query'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
 
@@ -51,11 +51,9 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   useEffect(() => {
     switch (isConnected) {
       case true:
-        onlineManager.setOnline(isConnected)
         removeMessage()
         break
       case false:
-        onlineManager.setOnline(isConnected)
         displayMessage({
           mode,
           type: 'error',

src/components/Timeline.tsx

@@ -1,7 +1,10 @@
 import ComponentSeparator from '@components/Separator'
 import { useScrollToTop } from '@react-navigation/native'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
-import { getInstanceActive } from '@utils/slices/instancesSlice'
+import {
+  getInstanceActive,
+  updateInstanceTimelineLookback
+} from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useCallback, useRef } from 'react'
@@ -10,13 +13,14 @@ import {
   FlatListProps,
   Platform,
   RefreshControl,
-  StyleSheet
+  StyleSheet,
+  ViewabilityConfigCallbackPairs
 } from 'react-native'
 import Animated, {
   useAnimatedScrollHandler,
   useSharedValue
 } from 'react-native-reanimated'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import TimelineEmpty from './Timeline/Empty'
 import TimelineFooter from './Timeline/Footer'
 import TimelineRefresh, {
@@ -31,6 +35,7 @@ export interface Props {
   queryKey: QueryKeyTimeline
   disableRefresh?: boolean
   disableInfinity?: boolean
+  lookback?: Extract<App.Pages, 'Following' | 'Local' | 'LocalPublic'>
   customProps: Partial<FlatListProps<any>> &
     Pick<FlatListProps<any>, 'renderItem'>
 }
@@ -40,6 +45,7 @@ const Timeline: React.FC<Props> = ({
   queryKey,
   disableRefresh = false,
   disableInfinity = false,
+  lookback,
   customProps
 }) => {
   // Switching account update timeline
@@ -124,6 +130,27 @@ const Timeline: React.FC<Props> = ({
     }
   })
 
+  const dispatch = useDispatch()
+  const viewabilityPairs = useRef<ViewabilityConfigCallbackPairs>([
+    {
+      viewabilityConfig: {
+        minimumViewTime: 10,
+        viewAreaCoveragePercentThreshold: 10
+      },
+      onViewableItemsChanged: ({ viewableItems }) => {
+        lookback &&
+          dispatch(
+            updateInstanceTimelineLookback({
+              [lookback]: {
+                queryKey,
+                ids: viewableItems.map(item => item.key).slice(0, 3)
+              }
+            })
+          )
+      }
+    }
+  ])
+
   useScrollToTop(flRef)
   return (
     <>
@@ -157,6 +184,9 @@ const Timeline: React.FC<Props> = ({
         maintainVisibleContentPosition={{
           minIndexForVisible: 0
         }}
+        {...(lookback && {
+          viewabilityConfigCallbackPairs: viewabilityPairs.current
+        })}
         {...androidRefreshControl}
         {...customProps}
       />

src/components/Timeline/Lookback.tsx

@@ -0,0 +1,37 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+
+const TimelineLookback = React.memo(
+  () => {
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
+
+    return (
+      <View style={[styles.base, { backgroundColor: theme.backgroundDefault }]}>
+        <Text
+          style={[StyleConstants.FontStyle.S, { color: theme.primaryDefault }]}
+        >
+          {t('lookback.message')}
+        </Text>
+      </View>
+    )
+  },
+  () => true
+)
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: StyleConstants.Spacing.S
+  },
+  text: {
+    ...StyleConstants.FontStyle.S
+  }
+})
+
+export default TimelineLookback

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -60,11 +60,9 @@ const AttachmentVideo: React.FC<Props> = ({
 
   const appState = useRef(AppState.currentState)
   useEffect(() => {
-    AppState.addEventListener('change', _handleAppStateChange)
+    const appState = AppState.addEventListener('change', _handleAppStateChange)
 
-    return () => {
-      AppState.removeEventListener('change', _handleAppStateChange)
-    }
+    return () => appState.remove()
   }, [])
   const _handleAppStateChange = async (nextAppState: AppStateStatus) => {
     if (appState.current.match(/active/) && nextAppState.match(/inactive/)) {

src/i18n/en/components/timeline.json

@@ -11,6 +11,9 @@
   "end": {
     "message": "The end, what about a cup of <0 />"
   },
+  "lookback": {
+    "message": "Last read at"
+  },
   "refresh": {
     "fetchPreviousPage": "Newer from here",
     "refetch": "To latest"

src/i18n/zh-Hans/components/timeline.json

@@ -11,6 +11,9 @@
   "end": {
     "message": "居然刷到底了，喝杯 <0 /> 吧"
   },
+  "lookback": {
+    "message": "上次阅读至"
+  },
   "refresh": {
     "fetchPreviousPage": "较新于此的嘟嘟",
     "refetch": "最新的嘟嘟"

src/screens/Tabs/Local.tsx

@@ -1,16 +1,21 @@
 import analytics from '@components/analytics'
 import { HeaderCenter, HeaderRight } from '@components/Header'
+import ComponentSeparator from '@components/Separator'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
+import TimelineLookback from '@components/Timeline/Lookback'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import {
   ScreenTabsScreenProps,
   TabLocalStackParamList
 } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { getInstanceTimelinesLookback } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
+import { useSelector } from 'react-redux'
 import TabSharedRoot from './Shared/Root'
 
 const Stack = createNativeStackNavigator<TabLocalStackParamList>()
@@ -43,13 +48,35 @@ const TabLocal = React.memo(
       [i18n.language]
     )
 
-    const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]
-    const renderItem = useCallback(
-      ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />,
-      []
+    const timelinesLookback = useSelector(
+      getInstanceTimelinesLookback,
+      () => true
     )
+    const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]
+    const renderItem = useCallback(({ item }) => {
+      if (timelinesLookback?.['Following']?.ids?.[0] === item.id) {
+        return (
+          <>
+            <TimelineLookback />
+            <ComponentSeparator
+              extraMarginLeft={
+                StyleConstants.Avatar.M + StyleConstants.Spacing.S
+              }
+            />
+            <TimelineDefault item={item} queryKey={queryKey} />
+          </>
+        )
+      }
+      return <TimelineDefault item={item} queryKey={queryKey} />
+    }, [])
     const children = useCallback(
-      () => <Timeline queryKey={queryKey} customProps={{ renderItem }} />,
+      () => (
+        <Timeline
+          queryKey={queryKey}
+          lookback='Following'
+          customProps={{ renderItem }}
+        />
+      ),
       []
     )
 

src/screens/Tabs/Me/Root/Collections.tsx

@@ -2,7 +2,10 @@ import { MenuContainer, MenuRow } from '@components/Menu'
 import { useNavigation } from '@react-navigation/native'
 import { useAnnouncementQuery } from '@utils/queryHooks/announcement'
 import { useListsQuery } from '@utils/queryHooks/lists'
-import { getMePage, updateContextMePage } from '@utils/slices/contextsSlice'
+import {
+  getInstanceMePage,
+  updateInstanceMePage
+} from '@utils/slices/instancesSlice'
 import { getInstancePush } from '@utils/slices/instancesSlice'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,10 +16,7 @@ const Collections: React.FC = () => {
   const navigation = useNavigation<any>()
 
   const dispatch = useDispatch()
-  const mePage = useSelector(
-    getMePage,
-    (a, b) => a.announcements.unread === b.announcements.unread
-  )
+  const mePage = useSelector(getInstanceMePage)
 
   const listsQuery = useListsQuery({
     options: {
@@ -26,7 +26,7 @@ const Collections: React.FC = () => {
   useEffect(() => {
     if (listsQuery.isSuccess) {
       dispatch(
-        updateContextMePage({
+        updateInstanceMePage({
           lists: { shown: listsQuery.data?.length ? true : false }
         })
       )
@@ -42,7 +42,7 @@ const Collections: React.FC = () => {
   useEffect(() => {
     if (announcementsQuery.isSuccess) {
       dispatch(
-        updateContextMePage({
+        updateInstanceMePage({
           announcements: {
             shown: announcementsQuery.data?.length ? true : false,
             unread: announcementsQuery.data.filter(

src/screens/Tabs/Me/Settings/Dev.tsx

@@ -7,7 +7,7 @@ import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { Text } from 'react-native'
+import { DevSettings, Text } from 'react-native'
 import { useSelector } from 'react-redux'
 
 const SettingsDev: React.FC = () => {
@@ -68,7 +68,9 @@ const SettingsDev: React.FC = () => {
           marginBottom: StyleConstants.Spacing.Global.PagePadding
         }}
         destructive
-        onPress={() => persistor.purge()}
+        onPress={() => {
+          persistor.purge().then(() => DevSettings.reload())
+        }}
       />
       <Button
         type='text'

src/screens/Tabs/Public.tsx

@@ -1,7 +1,9 @@
 import analytics from '@components/analytics'
 import { HeaderRight } from '@components/Header'
+import ComponentSeparator from '@components/Separator'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
+import TimelineLookback from '@components/Timeline/Lookback'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import {
@@ -9,11 +11,14 @@ import {
   TabPublicStackParamList
 } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { getInstanceTimelinesLookback } from '@utils/slices/instancesSlice'
+import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, StyleSheet } from 'react-native'
 import { TabView } from 'react-native-tab-view'
+import { useSelector } from 'react-redux'
 import TabSharedRoot from './Shared/Root'
 
 const Stack = createNativeStackNavigator<TabPublicStackParamList>()
@@ -26,7 +31,7 @@ const TabPublic = React.memo(
     const [segment, setSegment] = useState(0)
     const pages: {
       title: string
-      key: App.Pages
+      key: Extract<App.Pages, 'Local' | 'LocalPublic'>
     }[] = [
       {
         title: t('tabs.public.segments.left'),
@@ -70,19 +75,42 @@ const TabPublic = React.memo(
 
     const routes = pages.map(p => ({ key: p.key }))
 
+    const timelinesLookback = useSelector(
+      getInstanceTimelinesLookback,
+      () => true
+    )
     const renderScene = useCallback(
       ({
         route: { key: page }
       }: {
         route: {
-          key: App.Pages
+          key: Extract<App.Pages, 'Local' | 'LocalPublic'>
         }
       }) => {
         const queryKey: QueryKeyTimeline = ['Timeline', { page }]
-        const renderItem = ({ item }: any) => (
-          <TimelineDefault item={item} queryKey={queryKey} />
+        const renderItem = ({ item }: any) => {
+          if (timelinesLookback?.[page]?.ids?.[0] === item.id) {
+            return (
+              <>
+                <TimelineLookback />
+                <ComponentSeparator
+                  extraMarginLeft={
+                    StyleConstants.Avatar.M + StyleConstants.Spacing.S
+                  }
+                />
+                <TimelineDefault item={item} queryKey={queryKey} />
+              </>
+            )
+          }
+          return <TimelineDefault item={item} queryKey={queryKey} />
+        }
+        return (
+          <Timeline
+            queryKey={queryKey}
+            lookback={page}
+            customProps={{ renderItem }}
+          />
         )
-        return <Timeline queryKey={queryKey} customProps={{ renderItem }} />
       },
       []
     )

src/startup/netInfo.ts

@@ -1,63 +1,115 @@
 import apiInstance from '@api/instance'
 import NetInfo from '@react-native-community/netinfo'
 import { store } from '@root/store'
+import { prefetchTimelineQuery } from '@utils/queryHooks/timeline'
+import { getPreviousTab } from '@utils/slices/contextsSlice'
 import removeInstance from '@utils/slices/instances/remove'
 import {
   getInstance,
   updateInstanceAccount
 } from '@utils/slices/instancesSlice'
+import { onlineManager } from 'react-query'
 import log from './log'
 
 const netInfo = async (): Promise<{
-  connected: boolean
+  connected?: boolean
   corrupted?: string
-}> => {
+} | void> => {
   log('log', 'netInfo', 'initializing')
 
   const netInfo = await NetInfo.fetch()
   const instance = getInstance(store.getState())
 
+  onlineManager.setEventListener(setOnline => {
+    return NetInfo.addEventListener(state => {
+      setOnline(
+        typeof state.isConnected === 'boolean' ? state.isConnected : undefined
+      )
+    })
+  })
+
   if (netInfo.isConnected) {
     log('log', 'netInfo', 'network connected')
     if (instance) {
       log('log', 'netInfo', 'checking locally stored credentials')
-      return apiInstance<Mastodon.Account>({
-        method: 'get',
-        url: `accounts/verify_credentials`
-      })
-        .then(res => {
-          log('log', 'netInfo', 'local credential check passed')
-          if (res.body.id !== instance.account.id) {
-            log('error', 'netInfo', 'local id does not match remote id')
-            store.dispatch(removeInstance(instance))
-            return Promise.resolve({ connected: true, corruputed: '' })
-          } else {
-            store.dispatch(
-              updateInstanceAccount({
-                acct: res.body.acct,
-                avatarStatic: res.body.avatar_static
-              })
-            )
-            return Promise.resolve({ connected: true })
-          }
-        })
-        .catch(error => {
-          log('error', 'netInfo', 'local credential check failed')
-          if (error.status && error.status == 401) {
-            store.dispatch(removeInstance(instance))
-          }
-          return Promise.resolve({
-            connected: true,
-            corrupted: error.data.error
+
+      let resVerify: Mastodon.Account
+      try {
+        resVerify = await apiInstance<Mastodon.Account>({
+          method: 'get',
+          url: `accounts/verify_credentials`
+        }).then(res => res.body)
+      } catch (error: any) {
+        log('error', 'netInfo', 'local credential check failed')
+        if (error.status && error.status == 401) {
+          store.dispatch(removeInstance(instance))
+        }
+        return Promise.resolve({ corrupted: error.data.error })
+      }
+
+      log('log', 'netInfo', 'local credential check passed')
+      if (resVerify.id !== instance.account.id) {
+        log('error', 'netInfo', 'local id does not match remote id')
+        store.dispatch(removeInstance(instance))
+        return Promise.resolve({ connected: true, corruputed: '' })
+      } else {
+        store.dispatch(
+          updateInstanceAccount({
+            acct: resVerify.acct,
+            avatarStatic: resVerify.avatar_static
           })
-        })
+        )
+
+        if (instance.timelinesLookback) {
+          const previousTab = getPreviousTab(store.getState())
+          let loadPage: Extract<
+            App.Pages,
+            'Following' | 'Local' | 'LocalPublic'
+          > | void = undefined
+          if (previousTab === 'Tab-Local') {
+            loadPage = 'Following'
+          } else if (previousTab === 'Tab-Public') {
+            loadPage = 'LocalPublic'
+          }
+
+          if (loadPage) {
+            if (instance.timelinesLookback?.[loadPage]?.ids.length > 0) {
+              log(
+                'log',
+                'netInfo',
+                `prefetching landing page ${instance.timelinesLookback[loadPage].queryKey[1].page} ids: ${instance.timelinesLookback[loadPage].ids}`
+              )
+              const prefetch = await prefetchTimelineQuery(
+                instance.timelinesLookback[loadPage]
+              )
+              if (prefetch) {
+                log('log', 'netInfo', `prefetched from status id ${prefetch}`)
+              } else {
+                log('error', 'netInfo', 'failed to prefetch')
+              }
+            }
+          }
+          for (const page of Object.keys(instance.timelinesLookback)) {
+            if (page !== loadPage) {
+              log(
+                'log',
+                'netInfo',
+                `prefetching other page ${instance.timelinesLookback[page].queryKey[1].page} ids: ${instance.timelinesLookback[page].ids}`
+              )
+              prefetchTimelineQuery(instance.timelinesLookback[page])
+            }
+          }
+        }
+
+        return Promise.resolve({ connected: true })
+      }
     } else {
       log('log', 'netInfo', 'no local credential found')
-      return Promise.resolve({ connected: true })
+      return Promise.resolve()
     }
   } else {
     log('warn', 'netInfo', 'network not connected')
-    return Promise.resolve({ connected: true })
+    return Promise.resolve()
   }
 }
 

src/store.ts

@@ -26,7 +26,7 @@ const instancesPersistConfig = {
   key: 'instances',
   prefix,
   storage: secureStorage,
-  version: 6,
+  version: 7,
   // @ts-ignore
   migrate: createMigrate(instancesMigration)
 }

src/utils/migrations/contexts/migration.ts

@@ -1,4 +1,5 @@
 import { ContextsV0 } from './v0'
+import { ContextsV1 } from './v1'
 
 const contextsMigration = {
   1: (state: ContextsV0) => {
@@ -10,6 +11,11 @@ const contextsMigration = {
         announcements: { shown: false, unread: 0 }
       }
     })
+  },
+  2: (state: ContextsV1) => {
+    // @ts-ignore
+    delete state.mePage
+    return state
   }
 }
 

src/utils/migrations/contexts/v1.ts

@@ -0,0 +1,17 @@
+export type ContextsV1 = {
+  storeReview: {
+    context: Readonly<number>
+    current: number
+    shown: boolean
+  }
+  publicRemoteNotice: {
+    context: Readonly<number>
+    current: number
+    hidden: boolean
+  }
+  previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
+  mePage: {
+    lists: { shown: boolean }
+    announcements: { shown: boolean; unread: number }
+  }
+}

src/utils/migrations/instances/migration.ts

@@ -1,6 +1,7 @@
 import { InstanceV3 } from './v3'
 import { InstanceV4 } from './v4'
 import { InstanceV5 } from './v5'
+import { InstanceV6 } from './v6'
 
 const instancesMigration = {
   4: (state: InstanceV3) => {
@@ -54,6 +55,20 @@ const instancesMigration = {
         return { ...instance, configuration: undefined }
       })
     }
+  },
+  7: (state: InstanceV6) => {
+    return {
+      instances: state.instances.map(instance => {
+        return {
+          ...instance,
+          timelinesLookback: {},
+          mePage: {
+            lists: { shown: false },
+            announcements: { shown: false, unread: 0 }
+          }
+        }
+      })
+    }
   }
 }
 

src/utils/migrations/instances/v6.ts

@@ -0,0 +1,66 @@
+import { ComposeStateDraft } from '@screens/Compose/utils/types'
+
+type Instance = {
+  active: boolean
+  appData: {
+    clientId: string
+    clientSecret: string
+  }
+  url: string
+  token: string
+  uri: Mastodon.Instance['uri']
+  urls: Mastodon.Instance['urls']
+  account: {
+    id: Mastodon.Account['id']
+    acct: Mastodon.Account['acct']
+    avatarStatic: Mastodon.Account['avatar_static']
+    preferences: Mastodon.Preferences
+  }
+  max_toot_chars?: number // To be deprecated in v4
+  configuration?: Mastodon.Instance['configuration']
+  filters: Mastodon.Filter[]
+  notifications_filter: {
+    follow: boolean
+    favourite: boolean
+    reblog: boolean
+    mention: boolean
+    poll: boolean
+    follow_request: boolean
+  }
+  push: {
+    global: { loading: boolean; value: boolean }
+    decode: { loading: boolean; value: boolean }
+    alerts: {
+      follow: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['follow']
+      }
+      favourite: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['favourite']
+      }
+      reblog: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['reblog']
+      }
+      mention: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['mention']
+      }
+      poll: {
+        loading: boolean
+        value: Mastodon.PushSubscription['alerts']['poll']
+      }
+    }
+    keys: {
+      auth?: string
+      public?: string // legacy
+      private?: string // legacy
+    }
+  }
+  drafts: ComposeStateDraft[]
+}
+
+export type InstanceV6 = {
+  instances: Instance[]
+}

src/utils/queryHooks/timeline.ts

@@ -2,7 +2,10 @@ import apiInstance, { InstanceResponse } from '@api/instance'
 import haptics from '@components/haptics'
 import queryClient from '@helpers/queryClient'
 import { store } from '@root/store'
-import { getInstanceNotificationsFilter } from '@utils/slices/instancesSlice'
+import {
+  getInstanceNotificationsFilter,
+  updateInstanceTimelineLookback
+} from '@utils/slices/instancesSlice'
 import { AxiosError } from 'axios'
 import { uniqBy } from 'lodash'
 import {
@@ -194,9 +197,7 @@ const useTimelineQuery = ({
   ...queryKeyParams
 }: QueryKeyTimeline[1] & {
   options?: UseInfiniteQueryOptions<
-    InstanceResponse<
-      Mastodon.Status[] | Mastodon.Notification[] | Mastodon.Conversation[]
-    >,
+    InstanceResponse<Mastodon.Status[]>,
     AxiosError
   >
 }) => {
@@ -209,6 +210,53 @@ const useTimelineQuery = ({
   })
 }
 
+const prefetchTimelineQuery = async ({
+  ids,
+  queryKey
+}: {
+  ids: Mastodon.Status['id'][]
+  queryKey: QueryKeyTimeline
+}): Promise<Mastodon.Status['id'] | undefined> => {
+  let page: string = ''
+  let local: boolean = false
+  switch (queryKey[1].page) {
+    case 'Following':
+      page = 'home'
+      break
+    case 'Local':
+      page = 'public'
+      local = true
+      break
+    case 'LocalPublic':
+      page = 'public'
+      break
+  }
+
+  for (const id of ids) {
+    const statuses = await apiInstance<Mastodon.Status[]>({
+      method: 'get',
+      url: `timelines/${page}`,
+      params: {
+        min_id: id,
+        limit: 1,
+        ...(local && { local: 'true' })
+      }
+    })
+    if (statuses.body.length) {
+      await queryClient.prefetchInfiniteQuery(queryKey, props =>
+        queryFunction({
+          ...props,
+          queryKey,
+          pageParam: {
+            max_id: statuses.body[0].id
+          }
+        })
+      )
+      return id
+    }
+  }
+}
+
 // --- Separator ---
 
 enum MapPropertyToUrl {
@@ -388,4 +436,4 @@ const useTimelineMutation = ({
   })
 }
 
-export { useTimelineQuery, useTimelineMutation }
+export { prefetchTimelineQuery, useTimelineQuery, useTimelineMutation }

src/utils/slices/contextsSlice.ts

@@ -17,10 +17,6 @@ export type ContextsState = {
     hidden: boolean
   }
   previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
-  mePage: {
-    lists: { shown: boolean }
-    announcements: { shown: boolean; unread: number }
-  }
 }
 
 export const contextsInitialState = {
@@ -36,11 +32,7 @@ export const contextsInitialState = {
     current: 0,
     hidden: false
   },
-  previousTab: 'Tab-Me',
-  mePage: {
-    lists: { shown: false },
-    announcements: { shown: false, unread: 0 }
-  }
+  previousTab: 'Tab-Me'
 }
 
 const contextsSlice = createSlice({
@@ -69,12 +61,6 @@ const contextsSlice = createSlice({
       action: PayloadAction<ContextsState['previousTab']>
     ) => {
       state.previousTab = action.payload
-    },
-    updateContextMePage: (
-      state,
-      action: PayloadAction<Partial<ContextsState['mePage']>>
-    ) => {
-      state.mePage = { ...state.mePage, ...action.payload }
     }
   }
 })
@@ -82,13 +68,11 @@ const contextsSlice = createSlice({
 export const getPublicRemoteNotice = (state: RootState) =>
   state.contexts.publicRemoteNotice
 export const getPreviousTab = (state: RootState) => state.contexts.previousTab
-export const getMePage = (state: RootState) => state.contexts.mePage
 export const getContexts = (state: RootState) => state.contexts
 
 export const {
   updateStoreReview,
   updatePublicRemoteNotice,
-  updatePreviousTab,
-  updateContextMePage
+  updatePreviousTab
 } = contextsSlice.actions
 export default contextsSlice.reducer

src/utils/slices/instances/add.ts

@@ -101,6 +101,11 @@ const addInstance = createAsyncThunk(
           },
           keys: { auth: undefined, public: undefined, private: undefined }
         },
+        timelinesLookback: {},
+        mePage: {
+          lists: { shown: false },
+          announcements: { shown: false, unread: 0 }
+        },
         drafts: []
       }
     })

src/utils/slices/instancesSlice.ts

@@ -2,6 +2,7 @@ import analytics from '@components/analytics'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { RootState } from '@root/store'
 import { ComposeStateDraft } from '@screens/Compose/utils/types'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { findIndex } from 'lodash'
 import addInstance from './instances/add'
 import removeInstance from './instances/remove'
@@ -70,6 +71,16 @@ export type Instance = {
       private?: string // legacy
     }
   }
+  timelinesLookback?: {
+    [key: string]: {
+      queryKey: QueryKeyTimeline
+      ids: Mastodon.Status['id'][]
+    }
+  }
+  mePage: {
+    lists: { shown: boolean }
+    announcements: { shown: boolean; unread: number }
+  }
   drafts: ComposeStateDraft[]
 }
 
@@ -154,6 +165,26 @@ const instancesSlice = createSlice({
         newInstance.push.global.value = false
         return newInstance
       })
+    },
+    updateInstanceTimelineLookback: (
+      { instances },
+      action: PayloadAction<Instance['timelinesLookback']>
+    ) => {
+      const activeIndex = findInstanceActive(instances)
+      instances[activeIndex].timelinesLookback = {
+        ...instances[activeIndex].timelinesLookback,
+        ...action.payload
+      }
+    },
+    updateInstanceMePage: (
+      { instances },
+      action: PayloadAction<Partial<Instance['mePage']>>
+    ) => {
+      const activeIndex = findInstanceActive(instances)
+      instances[activeIndex].mePage = {
+        ...instances[activeIndex].mePage,
+        ...action.payload
+      }
     }
   },
   extraReducers: builder => {
@@ -354,6 +385,13 @@ export const getInstanceNotificationsFilter = ({
 export const getInstancePush = ({ instances: { instances } }: RootState) =>
   instances[findInstanceActive(instances)]?.push
 
+export const getInstanceTimelinesLookback = ({
+  instances: { instances }
+}: RootState) => instances[findInstanceActive(instances)]?.timelinesLookback
+
+export const getInstanceMePage = ({ instances: { instances } }: RootState) =>
+  instances[findInstanceActive(instances)]?.mePage
+
 export const getInstanceDrafts = ({ instances: { instances } }: RootState) =>
   instances[findInstanceActive(instances)]?.drafts
 
@@ -364,7 +402,9 @@ export const {
   updateInstanceDraft,
   removeInstanceDraft,
   clearPushLoading,
-  disableAllPushes
+  disableAllPushes,
+  updateInstanceTimelineLookback,
+  updateInstanceMePage
 } = instancesSlice.actions
 
 export default instancesSlice.reducer