Rewrite account page

src/components/Button.tsx

@@ -46,7 +46,7 @@ const Button: React.FC<Props> = ({
 }) => {
   const { theme } = useTheme()
 
-  useLayoutEffect(() => layoutAnimation(), [loading, disabled])
+  useLayoutEffect(() => layoutAnimation(), [content, loading, disabled])
 
   const loadingSpinkit = useMemo(
     () => (

src/components/Timelines/Timeline.tsx

@@ -100,7 +100,9 @@ const Timeline: React.FC<Props> = ({
     ({ item, index }) => {
       switch (page) {
         case 'Conversations':
-          return <TimelineConversation item={item} queryKey={queryKey} />
+          return (
+            <TimelineConversation conversation={item} queryKey={queryKey} />
+          )
         case 'Notifications':
           return (
             <TimelineNotifications notification={item} queryKey={queryKey} />

src/components/Timelines/Timeline/Conversation.tsx

@@ -7,32 +7,55 @@ import TimelineHeaderConversation from '@components/Timelines/Timeline/Shared/He
 import TimelineContent from '@components/Timelines/Timeline/Shared/Content'
 import { StyleConstants } from '@utils/styles/constants'
 import TimelineActions from '@components/Timelines/Timeline/Shared/Actions'
+import client from '@root/api/client'
+import { useMutation, useQueryClient } from 'react-query'
 
 export interface Props {
-  item: Mastodon.Conversation
+  conversation: Mastodon.Conversation
   queryKey: QueryKey.Timeline
   highlighted?: boolean
 }
-// Unread and mark as unread
+
+const fireMutation = async ({ id }: { id: Mastodon.Conversation['id'] }) => {
+  const res = await client({
+    method: 'post',
+    instance: 'local',
+    url: `conversations/${id}/read`
+  })
+
+  if (res.body.id === id) {
+    return Promise.resolve()
+  } else {
+    return Promise.reject()
+  }
+}
+
 const TimelineConversation: React.FC<Props> = ({
-  item,
+  conversation,
   queryKey,
   highlighted = false
 }) => {
+  const queryClient = useQueryClient()
+  const { mutate } = useMutation(fireMutation, {
+    onSettled: () => {
+      queryClient.invalidateQueries(queryKey)
+    }
+  })
+
   const navigation = useNavigation()
 
-  const conversationOnPress = useCallback(
-    () =>
-      item.last_status &&
+  const conversationOnPress = useCallback(() => {
+    if (conversation.last_status) {
+      conversation.unread && mutate({ id: conversation.id })
       navigation.navigate('Screen-Shared-Toot', {
-        toot: item.last_status
-      }),
-    []
-  )
+        toot: conversation.last_status
+      })
+    }
+  }, [])
 
   const conversationChildren = useMemo(() => {
     return (
-      item.last_status && (
+      conversation.last_status && (
         <View
           style={{
             paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
@@ -42,7 +65,7 @@ const TimelineConversation: React.FC<Props> = ({
           }}
         >
           <TimelineContent
-            status={item.last_status}
+            status={conversation.last_status}
             highlighted={highlighted}
           />
         </View>
@@ -53,12 +76,13 @@ const TimelineConversation: React.FC<Props> = ({
   return (
     <View style={styles.conversationView}>
       <View style={styles.header}>
-        <TimelineAvatar queryKey={queryKey} account={item.accounts[0]} />
+        <TimelineAvatar
+          queryKey={queryKey}
+          account={conversation.accounts[0]}
+        />
         <TimelineHeaderConversation
           queryKey={queryKey}
-          id={item.id}
-          account={item.accounts[0]}
-          created_at={item.last_status?.created_at}
+          conversation={conversation}
         />
       </View>
 
@@ -76,7 +100,7 @@ const TimelineConversation: React.FC<Props> = ({
       >
         <TimelineActions
           queryKey={queryKey}
-          status={item.last_status!}
+          status={conversation.last_status!}
           reblog={false}
           sameAccountRoot={false}
         />

src/components/Timelines/Timeline/Shared/HeaderConversation.tsx

@@ -12,9 +12,7 @@ import Emojis from '@components/Timelines/Timeline/Shared/Emojis'
 
 export interface Props {
   queryKey: QueryKey.Timeline
-  id: string
-  account: Mastodon.Account
-  created_at?: Mastodon.Status['created_at']
+  conversation: Mastodon.Conversation
 }
 
 const fireMutation = async ({ id }: { id: string }) => {
@@ -37,12 +35,7 @@ const fireMutation = async ({ id }: { id: string }) => {
   }
 }
 
-const HeaderConversation: React.FC<Props> = ({
-  queryKey,
-  id,
-  account,
-  created_at
-}) => {
+const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
   const queryClient = useQueryClient()
   const { mutate } = useMutation(fireMutation, {
     onMutate: () => {
@@ -51,7 +44,9 @@ const HeaderConversation: React.FC<Props> = ({
 
       queryClient.setQueryData(queryKey, (old: any) =>
         old.pages.map((paging: any) => ({
-          toots: paging.toots.filter((toot: any) => toot.id !== id),
+          toots: paging.toots.filter(
+            (toot: Mastodon.Conversation) => toot.id !== conversation.id
+          ),
           pointer: paging.pointer
         }))
       )
@@ -66,7 +61,7 @@ const HeaderConversation: React.FC<Props> = ({
 
   const { theme } = useTheme()
 
-  const actionOnPress = useCallback(() => mutate({ id }), [])
+  const actionOnPress = useCallback(() => mutate({ id: conversation.id }), [])
 
   const actionChildren = useMemo(
     () => (
@@ -83,10 +78,13 @@ const HeaderConversation: React.FC<Props> = ({
     <View style={styles.base}>
       <View style={styles.nameAndDate}>
         <View style={styles.name}>
-          {account.emojis ? (
+          {conversation.accounts[0].emojis ? (
             <Emojis
-              content={account.display_name || account.username}
-              emojis={account.emojis}
+              content={
+                conversation.accounts[0].display_name ||
+                conversation.accounts[0].username
+              }
+              emojis={conversation.accounts[0].emojis}
               size={StyleConstants.Font.Size.M}
               fontBold={true}
             />
@@ -95,24 +93,27 @@ const HeaderConversation: React.FC<Props> = ({
               numberOfLines={1}
               style={[styles.nameWithoutEmoji, { color: theme.primary }]}
             >
-              {account.display_name || account.username}
+              {conversation.accounts[0].display_name ||
+                conversation.accounts[0].username}
             </Text>
           )}
           <Text
             style={[styles.account, { color: theme.secondary }]}
             numberOfLines={1}
           >
-            @{account.acct}
+            @{conversation.accounts[0].acct}
           </Text>
         </View>
-
-        {created_at && (
-          <View style={styles.meta}>
+        <View style={styles.meta}>
+          {conversation.last_status?.created_at && (
             <Text style={[styles.created_at, { color: theme.secondary }]}>
-              {relativeTime(created_at)}
+              {relativeTime(conversation.last_status?.created_at)}
             </Text>
-          </View>
-        )}
+          )}
+          {conversation.unread && (
+            <Feather name='circle' color={theme.blue} style={styles.unread} />
+          )}
+        </View>
       </View>
 
       <Pressable
@@ -152,6 +153,9 @@ const styles = StyleSheet.create({
   created_at: {
     fontSize: StyleConstants.Font.Size.S
   },
+  unread: {
+    marginLeft: StyleConstants.Spacing.XS
+  },
   action: {
     flexBasis: '20%',
     flexDirection: 'row',