From 09bc6c30afab4e8c8d52526a54dba4f1bf97811d Mon Sep 17 00:00:00 2001
From: xmflsct <me@xmflsct.com>
Date: Thu, 13 Jul 2023 23:30:26 +0200
Subject: [PATCH] Added a button to fetch latest toot on load

---
 fastlane/metadata/en-US/release_notes.txt   |   3 +-
 fastlane/metadata/zh-Hans/release_notes.txt |   3 +-
 src/components/Timeline/index.tsx           | 150 ++++++++++++++------
 3 files changed, 114 insertions(+), 42 deletions(-)

diff --git a/fastlane/metadata/en-US/release_notes.txt b/fastlane/metadata/en-US/release_notes.txt
index a1ef120a..ef42302b 100644
--- a/fastlane/metadata/en-US/release_notes.txt
+++ b/fastlane/metadata/en-US/release_notes.txt
@@ -1,3 +1,4 @@
 Enjoy toooting! This version includes following improvements and fixes:
 - Supports mute duration
-- Long press to copy toot
\ No newline at end of file
+- Long press to copy toot
+- Button to fetch latest on load
\ No newline at end of file
diff --git a/fastlane/metadata/zh-Hans/release_notes.txt b/fastlane/metadata/zh-Hans/release_notes.txt
index b43b440c..9a737c94 100644
--- a/fastlane/metadata/zh-Hans/release_notes.txt
+++ b/fastlane/metadata/zh-Hans/release_notes.txt
@@ -1,4 +1,5 @@
 tooot-ing愉快！此版本包括以下改进和修复：
 - 新增neodb.social演出卡片
 - 支持选择隐藏用户时限
-- 长按复制嘟文
\ No newline at end of file
+- 长按复制嘟文
+- 新增获取最新嘟文按钮
\ No newline at end of file
diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
index 3be80136..0cddb3bb 100644
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -1,3 +1,4 @@
+import Icon from '@components/Icon'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
@@ -10,12 +11,20 @@ import {
   setAccountStorage,
   useGlobalStorageListener
 } from '@utils/storage/actions'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 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 {
+  FlatList,
+  FlatListProps,
+  Platform,
+  Pressable,
+  RefreshControl,
+  StyleProp,
+  ViewStyle
+} from 'react-native'
 import Animated, {
   Easing,
   runOnJS,
@@ -127,6 +136,20 @@ const Timeline: React.FC<Props> = ({
     transform: [{ translateY: fetchedNoticeTop.value }]
   }))
 
+  const refetchedNoticeAnimate = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateY: withSequence(
+          withTiming(0),
+          withDelay(
+            3000,
+            withTiming(fetchedNoticeHeight.value + 32, { easing: Easing.out(Easing.ease) })
+          )
+        )
+      }
+    ]
+  }))
+
   const scrollY = useSharedValue(0)
   const fetchingType = useSharedValue<0 | 1 | 2>(0)
 
@@ -169,10 +192,9 @@ const Timeline: React.FC<Props> = ({
     throttle(() => {
       if (readMarker) {
         const currentMarker = getAccountStorage.string(readMarker) || '0'
+        // setAccountStorage([{ key: readMarker, value: '108425743226508521' }])
         if (latestMarker.current > currentMarker) {
           setAccountStorage([{ key: readMarker, value: latestMarker.current }])
-        } else {
-          // setAccountStorage([{ key: readMarker, value: '105250709762254246' }])
         }
       }
     }, 1000 * 15),
@@ -242,6 +264,18 @@ const Timeline: React.FC<Props> = ({
     flRef.current?.scrollToOffset({ offset: 0, animated: false })
   )
 
+  const noticeDefaults: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>> = {
+    position: 'absolute',
+    alignSelf: 'center',
+    borderRadius: 99,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.backgroundDefault,
+    shadowColor: colors.primaryDefault,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: theme === 'light' ? 0.16 : 0.24
+  }
+
   return (
     <>
       <TimelineRefresh
@@ -286,42 +320,78 @@ const Timeline: React.FC<Props> = ({
         {...customProps}
       />
       {!disableRefresh ? (
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              alignSelf: 'center',
-              top: -fetchedNoticeHeight.value - 16,
-              paddingVertical: StyleConstants.Spacing.S,
-              paddingHorizontal: StyleConstants.Spacing.M,
-              backgroundColor: colors.backgroundDefault,
-              shadowColor: colors.primaryDefault,
-              shadowOffset: { width: 0, height: 0 },
-              shadowOpacity: theme === 'light' ? 0.16 : 0.24,
-              borderRadius: 99,
-              justifyContent: 'center',
-              alignItems: 'center'
-            },
-            fetchedNoticeAnimate
-          ]}
-          onLayout={({
-            nativeEvent: {
-              layout: { height }
-            }
-          }) => (fetchedNoticeHeight.value = height)}
-        >
-          <CustomText
-            fontStyle='S'
-            style={{ color: colors.primaryDefault }}
-            children={
-              fetchedCount !== null
-                ? fetchedCount > 0
-                  ? t('refresh.fetched.found', { count: fetchedCount })
-                  : t('refresh.fetched.none')
-                : t('refresh.fetching')
-            }
-          />
-        </Animated.View>
+        <>
+          <Animated.View
+            style={[
+              {
+                top: -fetchedNoticeHeight.value - 16,
+                paddingVertical: StyleConstants.Spacing.S,
+                paddingHorizontal: StyleConstants.Spacing.M,
+                ...noticeDefaults
+              },
+              fetchedNoticeAnimate
+            ]}
+            onLayout={({
+              nativeEvent: {
+                layout: { height }
+              }
+            }) => (fetchedNoticeHeight.value = height)}
+          >
+            <CustomText
+              fontStyle='S'
+              style={{ color: colors.primaryDefault }}
+              children={
+                fetchedCount !== null
+                  ? fetchedCount > 0
+                    ? t('refresh.fetched.found', { count: fetchedCount })
+                    : t('refresh.fetched.none')
+                  : t('refresh.fetching')
+              }
+            />
+          </Animated.View>
+          {readMarker ? (
+            <Animated.View
+              style={[
+                {
+                  bottom: 16,
+                  borderColor: colors.primaryDefault,
+                  borderWidth: 0.5,
+                  ...noticeDefaults
+                },
+                refetchedNoticeAnimate
+              ]}
+            >
+              <Pressable
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: StyleConstants.Spacing.S,
+                  paddingVertical: StyleConstants.Spacing.S,
+                  paddingHorizontal: StyleConstants.Spacing.M
+                }}
+                onPress={async () => {
+                  if (readMarker) {
+                    setAccountStorage([{ key: readMarker, value: undefined }])
+                  }
+                  await refetch()
+                  setTimeout(() => flRef.current?.scrollToOffset({ offset: 0 }), 50)
+                }}
+              >
+                <CustomText
+                  fontStyle='M'
+                  style={{ color: colors.primaryDefault }}
+                  children={t('refresh.refetch')}
+                />
+                <Icon
+                  name='log-in'
+                  color={colors.primaryDefault}
+                  size={StyleConstants.Font.Size.M}
+                  style={{ transform: [{ rotate: '-90deg' }] }}
+                />
+              </Pressable>
+            </Animated.View>
+          ) : null}
+        </>
       ) : null}
     </>
   )