Fine tune announcements

src/@types/app.d.ts

@@ -24,6 +24,13 @@ declare namespace QueryKey {
     }
   ]
 
+  type Announcements = [
+    'Announcements',
+    {
+      showAll?: boolean
+    }
+  ]
+
   type Application = [
     'Application',
     {

src/i18n/zh/_all.ts

@@ -17,5 +17,5 @@ export default {
 
   sharedAccount: require('./screens/sharedAccount').default,
   sharedToot: require('./screens/sharedToot').default,
-  sharedWebview: require('./screens/sharedWebview').default
+  sharedAnnouncements: require('./screens/sharedAnnouncements').default
 }

src/i18n/zh/screens/meRoot.ts

@@ -11,7 +11,8 @@ export default {
       conversations: '$t(meConversations:heading)',
       bookmarks: '$t(meBookmarks:heading)',
       favourites: '$t(meFavourites:heading)',
-      lists: '$t(meLists:heading)'
+      lists: '$t(meLists:heading)',
+      announcements: '$t(sharedAnnouncements:heading)'
     },
     settings: '$t(meSettings:heading)',
     logout: {

src/i18n/zh/screens/sharedAnnouncements.ts

@@ -0,0 +1,4 @@
+export default {
+  heading: '公告',
+  content: {}
+}

src/i18n/zh/screens/sharedWebview.ts

@@ -1,7 +0,0 @@
-export default {
-  heading: {
-    loading: '加载中…',
-    error: '加载错误'
-  },
-  content: {}
-}

src/screens/Me/Root/Collections.tsx

@@ -1,35 +1,66 @@
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { MenuContainer, MenuRow } from '@components/Menu'
+import { useQuery } from 'react-query'
+import { announcementFetch } from '@root/utils/fetches/announcementsFetch'
 
 const Collections: React.FC = () => {
   const { t } = useTranslation('meRoot')
   const navigation = useNavigation()
 
+  const queryKey = ['Announcements', { showAll: true }]
+  const { data } = useQuery(queryKey, announcementFetch)
+
+  const announcementContent = useMemo(() => {
+    if (data) {
+      const amount = data.filter(announcement => !announcement.read).length
+      if (amount) {
+        return `${amount} 条未读公告`
+      } else {
+        return '无未读公告'
+      }
+    }
+  }, [data])
+
   return (
     <MenuContainer>
       <MenuRow
         iconFront='mail'
+        iconBack='chevron-right'
         title={t('content.collections.conversations')}
         onPress={() => navigation.navigate('Screen-Me-Conversations')}
       />
       <MenuRow
         iconFront='bookmark'
+        iconBack='chevron-right'
         title={t('content.collections.bookmarks')}
         onPress={() => navigation.navigate('Screen-Me-Bookmarks')}
       />
       <MenuRow
         iconFront='star'
+        iconBack='chevron-right'
         title={t('content.collections.favourites')}
         onPress={() => navigation.navigate('Screen-Me-Favourites')}
       />
       <MenuRow
         iconFront='list'
+        iconBack='chevron-right'
         title={t('content.collections.lists')}
         onPress={() => navigation.navigate('Screen-Me-Lists')}
       />
+      <MenuRow
+        iconFront='clipboard'
+        iconBack='chevron-right'
+        title={t('content.collections.announcements')}
+        content={announcementContent}
+        onPress={() =>
+          data &&
+          data.length &&
+          navigation.navigate('Screen-Shared-Announcements', { showAll: true })
+        }
+      />
     </MenuContainer>
   )
 }

src/screens/Me/Root/Settings.tsx

@@ -12,6 +12,7 @@ const Settings: React.FC = () => {
     <MenuContainer>
       <MenuRow
         iconFront='settings'
+        iconBack='chevron-right'
         title={t('content.settings')}
         onPress={() => navigation.navigate('Screen-Me-Settings')}
       />

src/screens/Shared/Announcements.tsx

@@ -47,16 +47,23 @@ const fireMutation = async ({
   }
 }
 
-const ScreenSharedAnnouncements: React.FC = ({ navigation }) => {
+const ScreenSharedAnnouncements: React.FC = ({
+  route: {
+    params: { showAll }
+  },
+  navigation
+}) => {
   const { mode, theme } = useTheme()
   const bottomTabBarHeight = useBottomTabBarHeight()
   const [index, setIndex] = useState(0)
   const invisibleTextInputRef = useRef<TextInput>(null)
 
-  const queryKey = ['Announcements']
+  const queryKey = ['Announcements', { showAll }]
   const { data, refetch } = useQuery(queryKey, announcementFetch, {
     select: announcements =>
-      announcements.filter(announcement => !announcement.read)
+      announcements.filter(announcement =>
+        showAll ? announcement : !announcement.read
+      )
   })
   const { mutate } = useMutation(fireMutation, {
     onSettled: () => {
@@ -65,7 +72,7 @@ const ScreenSharedAnnouncements: React.FC = ({ navigation }) => {
   })
 
   useEffect(() => {
-    if (data?.length === 0) {
+    if (!showAll && data?.length === 0) {
       navigation.goBack()
     }
   }, [data])

src/screens/Shared/sharedScreens.tsx

@@ -1,6 +1,6 @@
 import { HeaderLeft } from '@root/components/Header'
 import ScreenSharedAccount from '@screens/Shared/Account'
-import ScreenSharedAnnouncements from '@screens/Shared/Announcement'
+import ScreenSharedAnnouncements from '@root/screens/Shared/Announcements'
 import ScreenSharedHashtag from '@screens/Shared/Hashtag'
 import ScreenSharedToot from '@screens/Shared/Toot'
 import Compose from '@screens/Shared/Compose'

src/utils/fetches/announcementsFetch.ts

@@ -1,10 +1,21 @@
 import client from '@api/client'
 
-export const announcementFetch = async (): Promise<Mastodon.Announcement[]> => {
+export const announcementFetch = async ({
+  queryKey
+}: {
+  queryKey: QueryKey.Announcements
+}): Promise<Mastodon.Announcement[]> => {
+  const [_, { showAll }] = queryKey
+
   const res = await client({
     method: 'get',
     instance: 'local',
-    url: `announcements`
+    url: `announcements`,
+    ...(showAll && {
+      params: {
+        with_dismissed: 'true'
+      }
+    })
   })
   return Promise.resolve(res.body)
 }