Move reading progress to new system

This commit is contained in:
Jackson Harper
2024-07-29 21:27:49 +08:00
parent d0e4908c0f
commit 67bf5003ea
8 changed files with 34 additions and 247 deletions

View File

@ -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'

View File

@ -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,

View File

@ -185,8 +185,6 @@ const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
initialValue: [],
})
console.log('got shortcuts: ', shortcuts)
// const shortcuts: Shortcut[] = [
// {
// id: '12asdfasdf',

View File

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

View File

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

View File

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

View File

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

View File

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