From c1076b8e947f8d70e1d44c798cc7e193318fb646 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sun, 13 Dec 2020 23:02:54 +0100
Subject: [PATCH] Now can scroll to top

---
 App.tsx                                       |  6 +-
 src/components/Timelines/Timeline.tsx         |  3 +
 .../Timelines/Timeline/Conversation.tsx       | 54 ++++++++------
 src/components/Timelines/Timeline/Default.tsx | 19 ++---
 .../Timelines/Timeline/Notifications.tsx      | 73 ++++++++++++-------
 src/screens/Me/Root.tsx                       |  8 +-
 6 files changed, 101 insertions(+), 62 deletions(-)

diff --git a/App.tsx b/App.tsx
index 1651ea77..e9453456 100644
--- a/App.tsx
+++ b/App.tsx
@@ -55,10 +55,12 @@ const App: React.FC = () => {
     <AppearanceProvider>
       <ReactQueryCacheProvider queryCache={queryCache}>
         <Provider store={store}>
-          <PersistGate persistor={persistor}>
+          <PersistGate
+            persistor={persistor}
+            onBeforeLift={() => setAppLoaded(true)}
+          >
             {bootstrapped => {
               if (bootstrapped) {
-                setAppLoaded(true)
                 require('@root/i18n/i18n')
                 return (
                   <ThemeManager>
diff --git a/src/components/Timelines/Timeline.tsx b/src/components/Timelines/Timeline.tsx
index e8df36d6..db1d5404 100644
--- a/src/components/Timelines/Timeline.tsx
+++ b/src/components/Timelines/Timeline.tsx
@@ -9,6 +9,7 @@ import { timelineFetch } from '@utils/fetches/timelineFetch'
 import TimelineSeparator from '@components/Timelines/Timeline/Separator'
 import TimelineEmpty from '@components/Timelines/Timeline/Empty'
 import TimelineEnd from '@components/Timelines/Timeline/Shared/End'
+import { useScrollToTop } from '@react-navigation/native'
 
 export interface Props {
   page: App.Pages
@@ -148,6 +149,8 @@ const Timeline: React.FC<Props> = ({
     )
   }, [])
 
+  useScrollToTop(flRef)
+
   return (
     <FlatList
       ref={flRef}
diff --git a/src/components/Timelines/Timeline/Conversation.tsx b/src/components/Timelines/Timeline/Conversation.tsx
index 7be19737..4b18b4ed 100644
--- a/src/components/Timelines/Timeline/Conversation.tsx
+++ b/src/components/Timelines/Timeline/Conversation.tsx
@@ -31,27 +31,42 @@ const TimelineConversation: React.FC<Props> = ({
   )
 
   const conversationChildren = useMemo(() => {
-    return item.last_status && <TimelineContent status={item.last_status} />
+    return (
+      item.last_status && (
+        <View
+          style={{
+            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+            paddingLeft: highlighted
+              ? 0
+              : StyleConstants.Avatar.S + StyleConstants.Spacing.S
+          }}
+        >
+          <TimelineContent
+            status={item.last_status}
+            highlighted={highlighted}
+          />
+        </View>
+      )
+    )
   }, [])
 
   return (
-    <View style={styles.statusView}>
-      <View style={styles.status}>
+    <View style={styles.conversationView}>
+      <View style={styles.header}>
         <TimelineAvatar account={item.accounts[0]} />
-        <View style={styles.details}>
-          <TimelineHeaderConversation
-            queryKey={queryKey}
-            id={item.id}
-            account={item.accounts[0]}
-            created_at={item.last_status?.created_at}
-          />
-          <Pressable
-            onPress={conversationOnPress}
-            children={conversationChildren}
-          />
-        </View>
+        <TimelineHeaderConversation
+          queryKey={queryKey}
+          id={item.id}
+          account={item.accounts[0]}
+          created_at={item.last_status?.created_at}
+        />
       </View>
 
+      <Pressable
+        onPress={conversationOnPress}
+        children={conversationChildren}
+      />
+
       <View
         style={{
           paddingLeft: highlighted
@@ -66,18 +81,15 @@ const TimelineConversation: React.FC<Props> = ({
 }
 
 const styles = StyleSheet.create({
-  statusView: {
+  conversationView: {
     flex: 1,
     flexDirection: 'column',
     padding: StyleConstants.Spacing.Global.PagePadding
   },
-  status: {
+  header: {
     flex: 1,
+    width: '100%',
     flexDirection: 'row'
-  },
-  details: {
-    flex: 1,
-    flexGrow: 1
   }
 })
 
diff --git a/src/components/Timelines/Timeline/Default.tsx b/src/components/Timelines/Timeline/Default.tsx
index 67804870..4e93bec0 100644
--- a/src/components/Timelines/Timeline/Default.tsx
+++ b/src/components/Timelines/Timeline/Default.tsx
@@ -46,14 +46,12 @@ const TimelineDefault: React.FC<Props> = ({
   const tootChildren = useMemo(
     () => (
       <View
-        style={[
-          styles.content,
-          {
-            paddingLeft: highlighted
-              ? 0
-              : StyleConstants.Avatar.S + StyleConstants.Spacing.S
-          }
-        ]}
+        style={{
+          paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+          paddingLeft: highlighted
+            ? 0
+            : StyleConstants.Avatar.S + StyleConstants.Spacing.S
+        }}
       >
         {actualStatus.content.length > 0 && (
           <TimelineContent status={actualStatus} highlighted={highlighted} />
@@ -75,10 +73,12 @@ const TimelineDefault: React.FC<Props> = ({
       {item.reblog && (
         <TimelineActioned action='reblog' account={item.account} />
       )}
+
       <View style={styles.header}>
         <TimelineAvatar account={actualStatus.account} />
         <TimelineHeaderDefault queryKey={queryKey} status={actualStatus} />
       </View>
+      
       <Pressable onPress={tootOnPress} children={tootChildren} />
       <View
         style={{
@@ -102,9 +102,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
     flexDirection: 'row'
-  },
-  content: {
-    paddingTop: StyleConstants.Spacing.S
   }
 })
 
diff --git a/src/components/Timelines/Timeline/Notifications.tsx b/src/components/Timelines/Timeline/Notifications.tsx
index ab449961..cdb564aa 100644
--- a/src/components/Timelines/Timeline/Notifications.tsx
+++ b/src/components/Timelines/Timeline/Notifications.tsx
@@ -16,32 +16,49 @@ import { StyleConstants } from '@utils/styles/constants'
 export interface Props {
   notification: Mastodon.Notification
   queryKey: App.QueryKey
+  highlighted?: boolean
 }
 
-const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
+const TimelineNotifications: React.FC<Props> = ({
+  notification,
+  queryKey,
+  highlighted = false
+}) => {
   const navigation = useNavigation()
   const actualAccount = notification.status
     ? notification.status.account
     : notification.account
-  const contentWidth =
-    Dimensions.get('window').width -
-    StyleConstants.Spacing.Global.PagePadding * 2 - // Global page padding on both sides
-    StyleConstants.Avatar.S - // Avatar width
-    StyleConstants.Spacing.S // Avatar margin to the right
+  const contentWidth = highlighted
+    ? Dimensions.get('window').width -
+      StyleConstants.Spacing.Global.PagePadding * 2 // Global page padding on both sides
+    : Dimensions.get('window').width -
+      StyleConstants.Spacing.Global.PagePadding * 2 - // Global page padding on both sides
+      StyleConstants.Avatar.S - // Avatar width
+      StyleConstants.Spacing.S // Avatar margin to the right
 
   const tootOnPress = useCallback(
     () =>
       navigation.navigate('Screen-Shared-Toot', {
-        toot: notification
+        toot: notification.status
       }),
     []
   )
   const tootChildren = useMemo(
     () =>
       notification.status ? (
-        <>
+        <View
+          style={{
+            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+            paddingLeft: highlighted
+              ? 0
+              : StyleConstants.Avatar.S + StyleConstants.Spacing.S
+          }}
+        >
           {notification.status.content.length > 0 && (
-            <TimelineContent status={notification.status} />
+            <TimelineContent
+              status={notification.status}
+              highlighted={highlighted}
+            />
           )}
           {notification.status.poll && (
             <TimelinePoll queryKey={queryKey} status={notification.status} />
@@ -55,7 +72,7 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
           {notification.status.card && (
             <TimelineCard card={notification.status.card} />
           )}
-        </>
+        </View>
       ) : null,
     [notification.status?.poll?.voted]
   )
@@ -68,33 +85,37 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
         notification
       />
 
-      <View style={styles.notification}>
+      <View style={styles.header}>
         <TimelineAvatar account={actualAccount} />
-        <View style={styles.details}>
-          <TimelineHeaderNotification notification={notification} />
-          <Pressable onPress={tootOnPress} children={tootChildren} />
-          {notification.status && (
-            <TimelineActions queryKey={queryKey} status={notification.status} />
-          )}
-        </View>
+        <TimelineHeaderNotification notification={notification} />
       </View>
+
+      <Pressable onPress={tootOnPress} children={tootChildren} />
+
+      {notification.status && (
+        <View
+          style={{
+            paddingLeft: highlighted
+              ? 0
+              : StyleConstants.Avatar.S + StyleConstants.Spacing.S
+          }}
+        >
+          <TimelineActions queryKey={queryKey} status={notification.status} />
+        </View>
+      )}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   notificationView: {
-    flex: 1,
-    flexDirection: 'column',
-    padding: StyleConstants.Spacing.Global.PagePadding
+    padding: StyleConstants.Spacing.Global.PagePadding,
+    paddingBottom: StyleConstants.Spacing.M
   },
-  notification: {
+  header: {
     flex: 1,
+    width: '100%',
     flexDirection: 'row'
-  },
-  details: {
-    flex: 1,
-    flexGrow: 1
   }
 })
 
diff --git a/src/screens/Me/Root.tsx b/src/screens/Me/Root.tsx
index 2ae473f6..2eab2080 100644
--- a/src/screens/Me/Root.tsx
+++ b/src/screens/Me/Root.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { ScrollView } from 'react-native'
 import { useSelector } from 'react-redux'
 
@@ -9,12 +9,16 @@ import MyInfo from '@screens/Me/Root/MyInfo'
 import Collections from '@screens/Me/Root/Collections'
 import Settings from '@screens/Me/Root/Settings'
 import Logout from '@screens/Me/Root/Logout'
+import { useScrollToTop } from '@react-navigation/native'
 
 const ScreenMeRoot: React.FC = () => {
   const localRegistered = useSelector(getLocalUrl)
 
+  const scrollRef = useRef<ScrollView>(null)
+  useScrollToTop(scrollRef)
+
   return (
-    <ScrollView keyboardShouldPersistTaps='handled'>
+    <ScrollView ref={scrollRef} keyboardShouldPersistTaps='handled'>
       {localRegistered ? <MyInfo /> : <Login />}
       {localRegistered && <Collections />}
       <Settings />