prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace getArticleSavingRequest with getArticle

Browse source
This commit is contained in:
Hongbo Wu 2022-05-04 14:30:54 +08:00
parent a42bb7ab38
commit cf65a63532
1 changed files with 49 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
packages/web/pages/[username]/links/[id].tsx
View file

@ -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 />
}