From cf65a635320110cf7d0698621841e084d096a8cd Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 4 May 2022 14:30:54 +0800
Subject: [PATCH] Replace getArticleSavingRequest with getArticle

---
 packages/web/pages/[username]/links/[id].tsx | 88 +++++++++++---------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/packages/web/pages/[username]/links/[id].tsx b/packages/web/pages/[username]/links/[id].tsx
index 343ecf773..1ff941ad6 100644
--- a/packages/web/pages/[username]/links/[id].tsx
+++ b/packages/web/pages/[username]/links/[id].tsx
@@ -1,10 +1,9 @@
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { useGetArticleSavingStatus } from '../../../lib/networking/queries/useGetArticleSavingStatus'
 import { PrimaryLayout } from '../../../components/templates/PrimaryLayout'
 import {
-  Loader,
   ErrorComponent,
+  Loader,
 } from '../../../components/templates/SavingRequest'
 import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
 import { VStack } from '../../../components/elements/LayoutPrimitives'
@@ -13,6 +12,7 @@ import { applyStoredTheme } from '../../../lib/themeUpdater'
 import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { SkeletonArticleContainer } from '../../../components/templates/article/SkeletonArticleContainer'
 import TopBarProgress from 'react-topbar-progress-indicator'
+import { useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
 
 export default function ArticleSavingRequestPage(): JSX.Element {
   const router = useRouter()
@@ -32,7 +32,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
       headerToolbarControl={
         <ArticleActionsMenu
           article={undefined}
-          layout='top'
+          layout="top"
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={true}
@@ -46,44 +46,54 @@ export default function ArticleSavingRequestPage(): JSX.Element {
       }}
     >
       <TopBarProgress />
-      <VStack distribution="between" alignment="center" css={{
-        position: 'fixed',
-        flexDirection: 'row-reverse',
-        top: '-120px',
-        left: 8,
-        height: '100%',
-        width: '35px',
-        '@lgDown': {
-          display: 'none',
-        },
+      <VStack
+        distribution="between"
+        alignment="center"
+        css={{
+          position: 'fixed',
+          flexDirection: 'row-reverse',
+          top: '-120px',
+          left: 8,
+          height: '100%',
+          width: '35px',
+          '@lgDown': {
+            display: 'none',
+          },
         }}
       >
         <ArticleActionsMenu
           article={undefined}
-          layout='side'
+          layout="side"
           lineHeight={readerSettings.lineHeight}
           marginWidth={readerSettings.marginWidth}
           showReaderDisplaySettings={true}
           articleActionHandler={readerSettings.actionHandler}
         />
       </VStack>
-        <VStack
-          alignment="center"
-          distribution="center"
-          className="disable-webkit-callout"
-          css={{
-            '@smDown': {
-              background: theme.colors.grayBg.toString(),
-            }
-          }}
+      <VStack
+        alignment="center"
+        distribution="center"
+        className="disable-webkit-callout"
+        css={{
+          '@smDown': {
+            background: theme.colors.grayBg.toString(),
+          },
+        }}
+      >
+        <SkeletonArticleContainer
+          margin={readerSettings.marginWidth}
+          fontSize={readerSettings.fontSize}
+          lineHeight={readerSettings.lineHeight}
         >
-          <SkeletonArticleContainer
-            margin={readerSettings.marginWidth}
-            fontSize={readerSettings.fontSize}
-            lineHeight={readerSettings.lineHeight}
-          >
-            {articleId ? <PrimaryContent articleId={articleId} /> : <Loader />}
-          </SkeletonArticleContainer>
+          {articleId ? (
+            <PrimaryContent
+              articleId={articleId}
+              username={router.query.username as string}
+            />
+          ) : (
+            <Loader />
+          )}
+        </SkeletonArticleContainer>
       </VStack>
     </PrimaryLayout>
   )
@@ -91,14 +101,16 @@ export default function ArticleSavingRequestPage(): JSX.Element {
 
 type PrimaryContentProps = {
   articleId: string
+  username: string
 }
 
 function PrimaryContent(props: PrimaryContentProps): JSX.Element {
   const router = useRouter()
   const [timedOut, setTimedOut] = useState(false)
 
-  const { successRedirectPath, error } = useGetArticleSavingStatus({
-    id: props.articleId,
+  const { articleData, articleFetchError } = useGetArticleQuery({
+    username: props.username,
+    slug: props.articleId,
   })
 
   useEffect(() => {
@@ -111,21 +123,19 @@ function PrimaryContent(props: PrimaryContentProps): JSX.Element {
     }
   }, [])
 
-  if (error === 'unauthorized') {
+  if (articleFetchError === 'Unauthorized') {
     router.replace('/login')
   }
 
-  if (timedOut || error) {
+  if (timedOut || articleFetchError) {
     return (
       <ErrorComponent errorMessage="Something went wrong while processing the link, please try again in a moment" />
     )
   }
 
-  if (successRedirectPath) {
-    router.replace(successRedirectPath)
+  if (articleData && articleData.article.article.state === 'SUCCEEDED') {
+    router.replace(`/${props.username}/${articleData.article.article.slug}`)
   }
 
-  return (
-    <Loader />
-  )
+  return <Loader />
 }