feat(ui): improve pages title

ncarlier · Apr 12, 2019 · 50bc7f2 · 50bc7f2
1 parent 493bcb8
commit 50bc7f2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/ui/src/articles/ArticlesPage.tsx b/ui/src/articles/ArticlesPage.tsx
@@ -29,21 +29,22 @@ export const ArticlesPage = (props : AllProps) => {
     status: 'unread',
   }
 
-  let title = 'Articles to read'
+  let title = 'to read'
   let basePath = match.url + '/'
-  let emptyMessage = 'No more article to read'
+  let emptyMessage = 'no article to read'
   if (category) {
     req.category = category.id
-    title = category.title
     req.status = getURLParam<string>(params, 'status', 'unread'),
+    title = (req.status === 'unread') ? "to read" : "read"
+    title = title + ' in "' + category.title + '"'
     basePath += 'articles/'
-    emptyMessage = 'No more article to read in this category'
+    emptyMessage = 'no article to read in this category'
   }
 
   if (basePath.startsWith('/history')) {
-    title = 'History'
+    title = 'read'
     req.status = 'read'
-    emptyMessage = 'History is empty'
+    emptyMessage = 'history is empty'
   }
 
   const { data, error, loading, fetchMore, refetch } = useQuery<GetArticlesResponse>(GetArticles, {
@@ -99,10 +100,13 @@ export const ArticlesPage = (props : AllProps) => {
     Other: () => <Panel><ErrorPanel>Unable to fetch articles!</ErrorPanel></Panel>
   })
 
-  if (data && data.articles && data.articles.totalCount) {
-    const {totalCount} = data.articles    
-    title += ` [${totalCount}]`
-  }
+  if (data && data.articles) {
+    const {totalCount} = data.articles
+    const plural = totalCount > 1 ? " articles " : " article " 
+    title = totalCount + plural + title
+  } else (
+    title = " "
+  )
 
   return (
     <Page title={title} actions={

diff --git a/ui/src/common/Page.tsx b/ui/src/common/Page.tsx
@@ -22,7 +22,7 @@ type Props = {
 export default (props: Props) => {
   const {
     children,
-    title = 'Reader',
+    title,
     subtitle,
     className,
     actions,

diff --git a/ui/src/hooks/usePageTitle.ts b/ui/src/hooks/usePageTitle.ts
@@ -1,6 +1,6 @@
 import { useEffect } from "react"
 
-export default (title: string, subtitle?: string) => {
+export default (title = 'Readflow', subtitle?: string) => {
   useEffect(() => {
     document.title = subtitle ? subtitle : title
   }, [title, subtitle])

diff --git a/ui/src/offline/OfflineArticlesPage.tsx b/ui/src/offline/OfflineArticlesPage.tsx
@@ -37,14 +37,16 @@ export const OfflineArticlesPage = ({offlineArticles, fetchOfflineArticles, matc
     Data: (d) => <ArticleList
       articles={d.entries}
       basePath={match.path}
-      emptyMessage="No offline articles"
+      emptyMessage="no offline articles"
       fetchMoreArticles={ fetchMoreArticles }
     />,
   })
 
-  let title = "offline articles"
-  if (data && data.totalCount) {
-    title = data.totalCount + ' ' + title
+  let title = ' '
+  if (data) {
+    const {totalCount} = data
+    const plural = totalCount > 1 ? " articles" : " article" 
+    title = data.totalCount + ' offline ' + plural
   }
 
   return (