fix(ui): improve history behavior

ui/src/articles/ArticlePage.tsx

@@ -28,17 +28,15 @@ export default ({ category, match, history }: AllProps) => {
   const { id } = match.params
 
   let title = 'Articles to read'
-  let redirect = '/unread'
   if (category) {
     title = category.title
-    redirect = `/categories/${category.id}`
   }
   if (match.path === '/history/:id') {
     title = 'History'
-    redirect = '/history'
   }
 
-  useKeyboard('backspace', () => history.push(redirect))
+  // useKeyboard('backspace', () => history.push(redirect))
+  useKeyboard('backspace', () => history.goBack())
 
   const { data, error, loading } = useQuery<GetArticleResponse>(GetArticle, {
     variables: { id }
@@ -60,20 +58,20 @@ export default ({ category, match, history }: AllProps) => {
               <ArticleMenu article={article} keyboard />
             </ArticleHeader>
             <ArticleContent article={article} />
-            <MarkAsButton article={article} floating onSuccess={() => history.push(redirect)} keyboard />
+            <MarkAsButton article={article} floating onSuccess={() => history.goBack()} keyboard />
           </>
         )
       }
       return <ErrorPanel title="Not found">Article #{id} not found.</ErrorPanel>
     },
-    Other: () => <Redirect to={redirect} />
+    Other: () => <p>OTHER</p>
   })
 
   return (
     <Page
       title={title}
       subtitle={data && data.article ? data.article.title : ''}
-      actions={<ButtonIcon to={redirect} icon="arrow_back" title="back to the list" />}
+      actions={<ButtonIcon onClick={history.goBack} icon="arrow_back" title="back to the list" />}
     >
       <Panel style={{ flex: '1 1 auto' }}>{render(data, error, loading)}</Panel>
     </Page>

ui/src/articles/ArticlesPage.tsx

@@ -127,7 +127,6 @@ export const ArticlesPage = (props: AllProps) => {
       <>
         <ArticleList
           articles={d.articles.entries}
-          basePath={mode === DisplayMode.category ? `${match.url}/articles/` : `${match.url}/`}
           emptyMessage={EmptyMessage({ mode })}
           filter={a => a.status === req.status}
           hasMore={d.articles.hasNext}

ui/src/articles/components/ArticleCard.tsx

@@ -14,15 +14,14 @@ interface Props {
   article: Article
   isActive: boolean
   onRemove?: () => void
-  readMoreBasePath: string
 }
 
 type AllProps = Props & RouteComponentProps
 
 export default withRouter((props: AllProps) => {
-  const { article, readMoreBasePath, isActive, onRemove, history } = props
+  const { article, isActive, onRemove, history, match } = props
 
-  const readMorePath = readMoreBasePath + props.article.id
+  const readMorePath = match.url + '/' + props.article.id
 
   useKeyboard('enter', () => history.push(readMorePath), isActive)
   const kbs = isActive ? ' [enter]' : ''

ui/src/articles/components/ArticleList.tsx

@@ -14,7 +14,6 @@ import SwipeableArticleCard from './SwipeableArticleCard'
 
 interface Props {
   articles: Article[]
-  basePath: string
   emptyMessage: string
   hasMore: boolean
   fetchMoreArticles: () => Promise<void>
@@ -46,14 +45,7 @@ const useKeyNavigation = (ref: RefObject<HTMLUListElement>, itemClassName: strin
 }
 
 export default (props: Props) => {
-  const {
-    basePath,
-    fetchMoreArticles,
-    refetch,
-    hasMore,
-    filter = () => true,
-    emptyMessage = 'No more article to read'
-  } = props
+  const { fetchMoreArticles, refetch, hasMore, filter = () => true, emptyMessage = 'No more article to read' } = props
 
   const ref = useRef<HTMLUListElement>(null)
   const [loading, setLoading] = useState(false)
@@ -101,9 +93,9 @@ export default (props: Props) => {
       {articles.map((article, idx) => (
         <li key={`article-${article.id}`} className={styles.item} tabIndex={-1} onFocus={() => setActiveIndex(idx)}>
           {isMobileDisplay && !article.isOffline ? (
-            <SwipeableArticleCard article={article} readMoreBasePath={basePath} />
+            <SwipeableArticleCard article={article} />
           ) : (
-            <ArticleCard article={article} isActive={idx === activeIndex} readMoreBasePath={basePath} />
+            <ArticleCard article={article} isActive={idx === activeIndex} />
           )}
         </li>
       ))}

ui/src/articles/components/SwipeableArticleCard.tsx

@@ -12,7 +12,6 @@ import styles from './SwipeableArticleCard.module.css'
 
 interface Props {
   article: Article
-  readMoreBasePath: string
 }
 
 type AllProps = Props & IMessageDispatchProps
@@ -24,7 +23,7 @@ const Background = ({ icon }: { icon: string }) => (
 )
 
 export const SwipeableArticleCard = (props: AllProps) => {
-  const { article, readMoreBasePath, showMessage } = props
+  const { article, showMessage } = props
   const updateArticleStatusMutation = useMutation<UpdateArticleStatusRequest>(UpdateArticleStatus)
 
   const updateArticleStatus = async (status: string) => {
@@ -46,7 +45,7 @@ export const SwipeableArticleCard = (props: AllProps) => {
 
   return (
     <SwipeableListItem background={<Background icon={bgIcon} />} onSwipe={handleOnDelete}>
-      <ArticleCard article={article} readMoreBasePath={readMoreBasePath} isActive={false} />
+      <ArticleCard article={article} isActive={false} />
     </SwipeableListItem>
   )
 }

ui/src/categories/Routes.tsx

@@ -37,7 +37,7 @@ export default ({ match }: AllProps) => {
               component={(props: RouteComponentProps) => <ArticlesPage category={category} {...props} />}
             />
             <Route
-              path={match.path + '/articles/:id'}
+              path={match.path + '/:id'}
               component={(props: RouteComponentProps<{ id: string }>) => <ArticlePage category={category} {...props} />}
             />
           </Switch>

ui/src/offline/OfflineArticlesPage.tsx

@@ -14,7 +14,7 @@ import { GetArticlesQuery, GetArticlesResult } from './dao/articles'
 
 type AllProps = OfflineProps & RouteComponentProps
 
-export const OfflineArticlesPage = ({ offlineArticles, fetchOfflineArticles, match, location }: AllProps) => {
+export const OfflineArticlesPage = ({ offlineArticles, fetchOfflineArticles, location }: AllProps) => {
   const params = new URLSearchParams(location.search)
   const query: GetArticlesQuery = {
     limit: getURLParam<number>(params, 'limit', 10),
@@ -47,7 +47,6 @@ export const OfflineArticlesPage = ({ offlineArticles, fetchOfflineArticles, mat
     Data: d => (
       <ArticleList
         articles={d.entries}
-        basePath={match.path}
         emptyMessage="no offline articles"
         hasMore={d.hasNext}
         refetch={refetch}