From 2fae98cb9ec503a47a95a69379141cdca2ab6643 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Fri, 30 Oct 2020 00:49:05 +0100
Subject: [PATCH] Notification done

---
 src/components/Toot/Actioned.jsx    |  82 ++++++++++++++++++++++
 src/components/Toot/Avatar.jsx      |   1 +
 src/components/Toot/Reblog.jsx      |  37 ----------
 src/components/TootNotification.jsx | 105 +++++++++++++---------------
 src/components/TootTimeline.jsx     |   5 +-
 5 files changed, 134 insertions(+), 96 deletions(-)
 create mode 100644 src/components/Toot/Actioned.jsx
 delete mode 100644 src/components/Toot/Reblog.jsx

diff --git a/src/components/Toot/Actioned.jsx b/src/components/Toot/Actioned.jsx
new file mode 100644
index 00000000..4ead4c58
--- /dev/null
+++ b/src/components/Toot/Actioned.jsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import propTypesEmoji from 'src/prop-types/emoji'
+import { StyleSheet, Text, View } from 'react-native'
+import { Feather } from '@expo/vector-icons'
+
+import Emojis from './Emojis'
+
+export default function Actioned ({
+  action,
+  name,
+  emojis,
+  notification = false
+}) {
+  let icon
+  let content
+  switch (action) {
+    case 'favourite':
+      icon = (
+        <Feather name='heart' size={12} color='black' style={styles.icon} />
+      )
+      content = `${name} 喜欢了你的嘟嘟`
+      break
+    case 'follow':
+      icon = (
+        <Feather name='user-plus' size={12} color='black' style={styles.icon} />
+      )
+      content = `${name} 开始关注你`
+      break
+    case 'poll':
+      icon = (
+        <Feather
+          name='bar-chart-2'
+          size={12}
+          color='black'
+          style={styles.icon}
+        />
+      )
+      content = `你参与的投票已结束`
+      break
+    case 'reblog':
+      icon = (
+        <Feather name='repeat' size={12} color='black' style={styles.icon} />
+      )
+      content = `${name} 转嘟了${notification ? '你的嘟嘟' : ''}`
+      break
+  }
+
+  return (
+    <View style={styles.actioned}>
+      {icon}
+      {content ? (
+        <View style={styles.content}>
+          <Emojis content={content} emojis={emojis} dimension={12} />
+        </View>
+      ) : (
+        <></>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  actioned: {
+    flexDirection: 'row',
+    marginBottom: 8
+  },
+  icon: {
+    marginLeft: 50 - 12,
+    marginRight: 8
+  },
+  content: {
+    flexDirection: 'row'
+  }
+})
+
+Actioned.propTypes = {
+  action: PropTypes.oneOf(['favourite', 'follow', 'poll', 'reblog']).isRequired,
+  name: PropTypes.string,
+  emojis: PropTypes.arrayOf(propTypesEmoji),
+  notification: PropTypes.bool
+}
diff --git a/src/components/Toot/Avatar.jsx b/src/components/Toot/Avatar.jsx
index dc3b95ea..b0d93226 100644
--- a/src/components/Toot/Avatar.jsx
+++ b/src/components/Toot/Avatar.jsx
@@ -5,6 +5,7 @@ import { useNavigation } from '@react-navigation/native'
 
 export default function Avatar ({ uri, id }) {
   const navigation = useNavigation()
+  // Need to fix go back root
   return (
     <Pressable
       style={styles.avatar}
diff --git a/src/components/Toot/Reblog.jsx b/src/components/Toot/Reblog.jsx
deleted file mode 100644
index 2b4f3cf4..00000000
--- a/src/components/Toot/Reblog.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import propTypesEmoji from 'src/prop-types/emoji'
-import { StyleSheet, Text, View } from 'react-native'
-import { Feather } from '@expo/vector-icons'
-
-import Emojis from './Emojis'
-
-export default function Reblog ({ name, emojis }) {
-  return (
-    <View style={styles.reblog}>
-      <Feather name='repeat' size={12} color='black' style={styles.icon} />
-      <View style={styles.name}>
-        <Emojis content={name} emojis={emojis} dimension={12} />
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  reblog: {
-    flexDirection: 'row',
-    marginBottom: 8
-  },
-  icon: {
-    marginLeft: 50 - 12,
-    marginRight: 8
-  },
-  name: {
-    flexDirection: 'row'
-  }
-})
-
-Reblog.propTypes = {
-  name: PropTypes.string.isRequired,
-  emojis: PropTypes.arrayOf(propTypesEmoji)
-}
diff --git a/src/components/TootNotification.jsx b/src/components/TootNotification.jsx
index 68806c57..77bbdfa8 100644
--- a/src/components/TootNotification.jsx
+++ b/src/components/TootNotification.jsx
@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react'
-import PropTypes from 'prop-types'
 import propTypesNotification from 'src/prop-types/notification'
-import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
+import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 
-import Reblog from './Toot/Reblog'
+import Actioned from './Toot/Actioned'
 import Avatar from './Toot/Avatar'
 import Header from './Toot/Header'
 import Content from './Toot/Content'
@@ -15,74 +14,66 @@ import Actions from './Toot/Actions'
 
 export default function TootNotification ({ toot }) {
   const navigation = useNavigation()
-
-  let actualContent
-  if (toot.reblog) {
-    actualContent = toot.reblog
-  } else {
-    actualContent = toot
-  }
+  const actualAccount = toot.status ? toot.status.account : toot.account
 
   const tootView = useMemo(() => {
     return (
-      <View style={styles.tootTimeline}>
-        {toot.reblog && (
-          <Reblog
-            name={toot.account.display_name || toot.account.username}
-            emojis={toot.account.emojis}
-          />
-        )}
+      <View style={styles.tootNotification}>
+        <Actioned
+          action={toot.type}
+          name={toot.account.display_name || toot.account.username}
+          emojis={toot.account.emojis}
+          notification
+        />
+
         <View style={styles.toot}>
-          <Avatar
-            uri={actualContent.account.avatar}
-            id={actualContent.account.id}
-          />
+          <Avatar uri={actualAccount.avatar} id={actualAccount.id} />
           <View style={styles.details}>
             <Header
-              name={
-                actualContent.account.display_name ||
-                actualContent.account.username
-              }
-              emojis={actualContent.account.emojis}
-              account={actualContent.account.acct}
+              name={actualAccount.display_name || actualAccount.username}
+              emojis={actualAccount.emojis}
+              account={actualAccount.acct}
               created_at={toot.created_at}
-              application={toot.application}
             />
             {/* Can pass toot info to next page to speed up performance */}
             <Pressable
-              onPress={() =>
-                navigation.navigate('Toot', { toot: actualContent.id })
-              }
+              onPress={() => navigation.navigate('Toot', { toot: toot.id })}
             >
-              {actualContent.content ? (
-                <Content
-                  content={actualContent.content}
-                  emojis={actualContent.emojis}
-                  mentions={actualContent.mentions}
-                  spoiler_text={actualContent.spoiler_text}
-                  tags={actualContent.tags}
-                  style={{ flex: 1 }}
-                />
+              {toot.status ? (
+                <>
+                  {toot.status.content && (
+                    <Content
+                      content={toot.status.content}
+                      emojis={toot.status.emojis}
+                      mentions={toot.status.mentions}
+                      spoiler_text={toot.status.spoiler_text}
+                      tags={toot.status.tags}
+                      style={{ flex: 1 }}
+                    />
+                  )}
+                  {toot.status.poll && <Poll poll={toot.status.poll} />}
+                  {toot.status.media_attachments && (
+                    <Media
+                      media_attachments={toot.status.media_attachments}
+                      sensitive={toot.status.sensitive}
+                      width={Dimensions.get('window').width - 24 - 50 - 8}
+                    />
+                  )}
+                  {toot.status.card && <Card card={toot.status.card} />}
+                </>
               ) : (
                 <></>
               )}
-              {actualContent.poll && <Poll poll={actualContent.poll} />}
-              {actualContent.media_attachments && (
-                <Media
-                  media_attachments={actualContent.media_attachments}
-                  sensitive={actualContent.sensitive}
-                  width={Dimensions.get('window').width - 24 - 50 - 8}
-                />
-              )}
-              {actualContent.card && <Card card={actualContent.card} />}
             </Pressable>
-            <Actions
-              replies_count={actualContent.replies_count}
-              reblogs_count={actualContent.reblogs_count}
-              reblogged={actualContent.reblogged}
-              favourites_count={actualContent.favourites_count}
-              favourited={actualContent.favourited}
-            />
+            {toot.status && (
+              <Actions
+                replies_count={toot.status.replies_count}
+                reblogs_count={toot.status.reblogs_count}
+                reblogged={toot.status.reblogged}
+                favourites_count={toot.status.favourites_count}
+                favourited={toot.status.favourited}
+              />
+            )}
           </View>
         </View>
       </View>
@@ -93,7 +84,7 @@ export default function TootNotification ({ toot }) {
 }
 
 const styles = StyleSheet.create({
-  tootTimeline: {
+  tootNotification: {
     flex: 1,
     flexDirection: 'column',
     padding: 12
diff --git a/src/components/TootTimeline.jsx b/src/components/TootTimeline.jsx
index 23a1bd8c..2f6d76c3 100644
--- a/src/components/TootTimeline.jsx
+++ b/src/components/TootTimeline.jsx
@@ -3,7 +3,7 @@ import propTypesStatus from 'src/prop-types/status'
 import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 
-import Reblog from './Toot/Reblog'
+import Actioned from './Toot/Actioned'
 import Avatar from './Toot/Avatar'
 import Header from './Toot/Header'
 import Content from './Toot/Content'
@@ -26,7 +26,8 @@ export default function TootTimeline ({ toot }) {
     return (
       <View style={styles.tootTimeline}>
         {toot.reblog && (
-          <Reblog
+          <Actioned
+            action='reblog'
             name={toot.account.display_name || toot.account.username}
             emojis={toot.account.emojis}
           />