Move reading progress to new system
This commit is contained in:
@ -13,7 +13,6 @@ import { Instance, HighlightAnnotation, List, Annotation, Rect } from 'pspdfkit'
|
||||
import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
|
||||
import { createHighlightMutation } from '../../../lib/networking/mutations/createHighlightMutation'
|
||||
import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
|
||||
import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
|
||||
import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
|
||||
import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
|
||||
import { pspdfKitKey } from '../../../lib/appConfig'
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { ArticleAttributes } from '../../../lib/networking/library_items/useLibraryItems'
|
||||
import {
|
||||
ArticleAttributes,
|
||||
useUpdateItemReadStatus,
|
||||
} from '../../../lib/networking/library_items/useLibraryItems'
|
||||
import { Box } from '../../elements/LayoutPrimitives'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { nanoid } from 'nanoid'
|
||||
@ -9,7 +12,6 @@ import { Instance, HighlightAnnotation, List, Annotation, Rect } from 'pspdfkit'
|
||||
import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
|
||||
import { createHighlightMutation } from '../../../lib/networking/mutations/createHighlightMutation'
|
||||
import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
|
||||
import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
|
||||
import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
|
||||
import { pspdfKitKey } from '../../../lib/appConfig'
|
||||
import { HighlightNoteModal } from './HighlightNoteModal'
|
||||
@ -40,6 +42,7 @@ export default function PdfArticleContainer(
|
||||
number | undefined
|
||||
>(undefined)
|
||||
const highlightsRef = useRef<Highlight[]>([])
|
||||
const updateItemReadStatus = useUpdateItemReadStatus()
|
||||
|
||||
const annotationOmnivoreId = (annotation: Annotation): string | undefined => {
|
||||
if (
|
||||
@ -411,7 +414,7 @@ export default function PdfArticleContainer(
|
||||
100,
|
||||
Math.max(0, ((pageIndex + 1) / instance.totalPageCount) * 100)
|
||||
)
|
||||
await articleReadingProgressMutation({
|
||||
await updateItemReadStatus.mutateAsync({
|
||||
id: props.article.id,
|
||||
force: true,
|
||||
readingProgressPercent: percent,
|
||||
|
||||
@ -185,8 +185,6 @@ const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
|
||||
initialValue: [],
|
||||
})
|
||||
|
||||
console.log('got shortcuts: ', shortcuts)
|
||||
|
||||
// const shortcuts: Shortcut[] = [
|
||||
// {
|
||||
// id: '12asdfasdf',
|
||||
|
||||
@ -9,32 +9,32 @@ export type ArticleReadingProgressMutationInput = {
|
||||
readingProgressAnchorIndex?: number
|
||||
}
|
||||
|
||||
export async function articleReadingProgressMutation(
|
||||
input: ArticleReadingProgressMutationInput
|
||||
): Promise<boolean> {
|
||||
const mutation = gql`
|
||||
mutation SaveArticleReadingProgress(
|
||||
$input: SaveArticleReadingProgressInput!
|
||||
) {
|
||||
saveArticleReadingProgress(input: $input) {
|
||||
... on SaveArticleReadingProgressSuccess {
|
||||
updatedArticle {
|
||||
id
|
||||
readingProgressPercent
|
||||
readingProgressAnchorIndex
|
||||
}
|
||||
}
|
||||
... on SaveArticleReadingProgressError {
|
||||
errorCodes
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
// export async function articleReadingProgressMutation(
|
||||
// input: ArticleReadingProgressMutationInput
|
||||
// ): Promise<boolean> {
|
||||
// const mutation = gql`
|
||||
// mutation SaveArticleReadingProgress(
|
||||
// $input: SaveArticleReadingProgressInput!
|
||||
// ) {
|
||||
// saveArticleReadingProgress(input: $input) {
|
||||
// ... on SaveArticleReadingProgressSuccess {
|
||||
// updatedArticle {
|
||||
// id
|
||||
// readingProgressPercent
|
||||
// readingProgressAnchorIndex
|
||||
// }
|
||||
// }
|
||||
// ... on SaveArticleReadingProgressError {
|
||||
// errorCodes
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// `
|
||||
|
||||
try {
|
||||
await gqlFetcher(mutation, { input })
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
// try {
|
||||
// await gqlFetcher(mutation, { input })
|
||||
// return true
|
||||
// } catch {
|
||||
// return false
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
import { useGetArticleQuery } from '../../../../lib/networking/queries/useGetArticleQuery'
|
||||
import { Box, VStack } from './../../../../components/elements/LayoutPrimitives'
|
||||
import { ArticleContainer } from './../../../../components/templates/article/ArticleContainer'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { LoadingView } from '../../../../components/patterns/LoadingView'
|
||||
import { cookieValue } from '../../../../lib/cookieHelpers'
|
||||
import { applyStoredTheme } from '../../../../lib/themeUpdater'
|
||||
import { createHighlightMutation } from '../../../../lib/networking/mutations/createHighlightMutation'
|
||||
import { deleteHighlightMutation } from '../../../../lib/networking/mutations/deleteHighlightMutation'
|
||||
import { mergeHighlightMutation } from '../../../../lib/networking/mutations/mergeHighlightMutation'
|
||||
import { updateHighlightMutation } from '../../../../lib/networking/mutations/updateHighlightMutation'
|
||||
import { articleReadingProgressMutation } from '../../../../lib/networking/mutations/articleReadingProgressMutation'
|
||||
import Script from 'next/script'
|
||||
import { useGetViewerQuery } from '../../../../lib/networking/queries/useGetViewerQuery'
|
||||
|
||||
type AppArticleEmbedContentProps = {
|
||||
slug: string
|
||||
username: string
|
||||
highlightBarDisabled: boolean
|
||||
fontSize: number
|
||||
margin: number
|
||||
fontFamily: string
|
||||
}
|
||||
|
||||
export default function AppArticleEmbed(): JSX.Element {
|
||||
applyStoredTheme()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const [contentProps, setContentProps] =
|
||||
useState<AppArticleEmbedContentProps | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
if (!router.isReady) return
|
||||
const highlightBarDisabled =
|
||||
(router.query.highlightBarDisabled as string | undefined) ?? ''
|
||||
const articleProps = {
|
||||
slug: router.query.slug as string,
|
||||
username: router.query.username as string,
|
||||
highlightBarDisabled: highlightBarDisabled == 'true',
|
||||
fontSize: Number(cookieValue('fontSize', document.cookie) ?? '16'),
|
||||
margin: Number(cookieValue('margin', document.cookie) ?? '0'),
|
||||
fontFamily: cookieValue('fontFamily', document.cookie) ?? 'inter',
|
||||
}
|
||||
setContentProps(articleProps)
|
||||
}, [
|
||||
router.isReady,
|
||||
router.query.slug,
|
||||
router.query.username,
|
||||
router.query.highlightBarDisabled,
|
||||
])
|
||||
|
||||
if (contentProps) {
|
||||
return <AppArticleEmbedContent {...contentProps} />
|
||||
}
|
||||
|
||||
return <LoadingView bgColor="#ffffff00" />
|
||||
}
|
||||
|
||||
function AppArticleEmbedContent(
|
||||
props: AppArticleEmbedContentProps
|
||||
): JSX.Element {
|
||||
const { viewerData } = useGetViewerQuery()
|
||||
const [showHighlightsModal, setShowHighlightsModal] = useState(false)
|
||||
|
||||
const { articleData } = useGetArticleQuery({
|
||||
username: props.username,
|
||||
slug: props.slug,
|
||||
includeFriendsHighlights: false,
|
||||
})
|
||||
|
||||
if (articleData && viewerData?.me) {
|
||||
return (
|
||||
<Box>
|
||||
<Script async src="/static/scripts/mathJaxConfiguration.js" />
|
||||
<Script async id="MathJax-script" src="/static/tex-mml-chtml.js" />
|
||||
<VStack
|
||||
alignment="center"
|
||||
distribution="center"
|
||||
className="disable-webkit-callout"
|
||||
css={{ paddingTop: '80px' }}
|
||||
>
|
||||
<ArticleContainer
|
||||
viewer={viewerData.me}
|
||||
article={articleData.article.article}
|
||||
isAppleAppEmbed={true}
|
||||
highlightBarDisabled={props.highlightBarDisabled}
|
||||
fontSize={props.fontSize}
|
||||
margin={props.margin}
|
||||
fontFamily={props.fontFamily}
|
||||
labels={[]}
|
||||
showHighlightsModal={showHighlightsModal}
|
||||
setShowHighlightsModal={setShowHighlightsModal}
|
||||
articleMutations={{
|
||||
createHighlightMutation,
|
||||
deleteHighlightMutation,
|
||||
mergeHighlightMutation,
|
||||
updateHighlightMutation,
|
||||
articleReadingProgressMutation,
|
||||
}}
|
||||
/>
|
||||
</VStack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return <LoadingView bgColor="#ffffff00" />
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Box } from '../../../../components/elements/LayoutPrimitives'
|
||||
import { useGetArticleSavingStatus } from '../../../../lib/networking/queries/useGetArticleSavingStatus'
|
||||
import { ErrorComponent } from '../../../../components/templates/SavingRequest'
|
||||
import { useSWRConfig } from 'swr'
|
||||
import { PrimaryLayout } from '../../../../components/templates/PrimaryLayout'
|
||||
import { applyStoredTheme } from '../../../../lib/themeUpdater'
|
||||
|
||||
export default function LinkRequestPage(): JSX.Element {
|
||||
applyStoredTheme()
|
||||
|
||||
const router = useRouter()
|
||||
const [requestID, setRequestID] = useState<string | undefined>(undefined)
|
||||
const [username, setUsername] = useState<string | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
if (!router.isReady) return
|
||||
setRequestID(router.query.id as string)
|
||||
setUsername(router.query.username as string)
|
||||
}, [router.isReady, router.query.id, router.query.username])
|
||||
|
||||
return (
|
||||
<PrimaryLayout
|
||||
pageMetaDataProps={{
|
||||
title: 'Retrieving article...',
|
||||
path: router.pathname,
|
||||
}}
|
||||
hideHeader={true}
|
||||
pageTestId={router.pathname}
|
||||
>
|
||||
<Box
|
||||
css={{ bg: '$grayBase', height: '100vh', width: '100vw', px: '16px' }}
|
||||
>
|
||||
{requestID && username ? (
|
||||
<PrimaryContent requestID={requestID} username={username} />
|
||||
) : (
|
||||
<Loader />
|
||||
)}
|
||||
</Box>
|
||||
</PrimaryLayout>
|
||||
)
|
||||
}
|
||||
|
||||
function Loader(): JSX.Element {
|
||||
return <Box />
|
||||
}
|
||||
|
||||
type PrimaryContentProps = {
|
||||
requestID: string
|
||||
username: string
|
||||
}
|
||||
|
||||
function PrimaryContent(props: PrimaryContentProps): JSX.Element {
|
||||
const router = useRouter()
|
||||
const { mutate } = useSWRConfig()
|
||||
const [timedOut, setTimedOut] = useState(false)
|
||||
|
||||
const { successRedirectPath, article, error } = useGetArticleSavingStatus({
|
||||
id: props.requestID,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setTimedOut(true)
|
||||
}, 10 * 1000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (error === 'unauthorized') {
|
||||
router.replace('/login')
|
||||
}
|
||||
|
||||
if (timedOut || error) {
|
||||
return (
|
||||
<ErrorComponent errorMessage="Something went wrong while processing and your link could not be saved. Please try again later." />
|
||||
)
|
||||
}
|
||||
|
||||
if (successRedirectPath) {
|
||||
router.replace(
|
||||
`/app${successRedirectPath}?isAppEmbedView=true&highlightBarDisabled=true`
|
||||
)
|
||||
}
|
||||
|
||||
return <Loader />
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { PrivacyPolicy } from '../../components/templates/PrivacyPolicy'
|
||||
import { applyStoredTheme } from '../../lib/themeUpdater'
|
||||
|
||||
export default function Privacy(): JSX.Element {
|
||||
applyStoredTheme()
|
||||
return <PrivacyPolicy isAppEmbed />
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { TermsAndConditions } from '../../components/templates/TermsAndConditions'
|
||||
import { applyStoredTheme } from '../../lib/themeUpdater'
|
||||
|
||||
export default function Terms(): JSX.Element {
|
||||
applyStoredTheme()
|
||||
return <TermsAndConditions isAppEmbed />
|
||||
}
|
||||
Reference in New Issue
Block a user