From 036040a3a0b2879537c835c84b165b784d1365fd Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 10 Mar 2023 15:05:03 +0800
Subject: [PATCH] Start sending top percent

---
 .../web/components/templates/article/Article.tsx   | 14 ++++++++++----
 .../mutations/articleReadingProgressMutation.ts    |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 71b1794a4..c5c9780af 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -34,17 +34,25 @@ export function Article(props: ArticleProps): JSX.Element {
 
   const articleContentRef = useRef<HTMLDivElement | null>(null)
 
+  const clampToPercent = (float: number) => {
+    return Math.floor(Math.max(0, Math.min(100, float)))
+  }
+
   useEffect(() => {
     ;(async () => {
       if (!readingProgress) return
       if (!articleContentRef.current) return
+      if (!window.document.scrollingElement) return
       const anchor = getTopOmnivoreAnchorElement(articleContentRef.current)
+      const topPositionPercent =
+        window.scrollY / window.document.scrollingElement.scrollHeight
       const anchorIndex = Number(anchor)
 
       await props.articleMutations.articleReadingProgressMutation({
         id: props.articleId,
-        // round reading progress to 100% if more than that
-        readingProgressPercent: readingProgress > 100 ? 100 : readingProgress,
+        //   // round reading progress to 100% if more than that
+        readingProgressPercent: clampToPercent(readingProgress),
+        readingProgressTopPercent: clampToPercent(topPositionPercent),
         readingProgressAnchorIndex:
           anchorIndex == Number.NaN ? undefined : anchorIndex,
       })
@@ -67,8 +75,6 @@ export function Article(props: ArticleProps): JSX.Element {
 
   useScrollWatcher((changeset: ScrollOffsetChangeset) => {
     if (window && window.document.scrollingElement) {
-      const topProgress =
-        window.scrollY / window.document.scrollingElement.scrollHeight
       const bottomProgress =
         (window.scrollY + window.document.scrollingElement.clientHeight) /
         window.document.scrollingElement.scrollHeight
diff --git a/packages/web/lib/networking/mutations/articleReadingProgressMutation.ts b/packages/web/lib/networking/mutations/articleReadingProgressMutation.ts
index e02f6e9c7..6c41950d0 100644
--- a/packages/web/lib/networking/mutations/articleReadingProgressMutation.ts
+++ b/packages/web/lib/networking/mutations/articleReadingProgressMutation.ts
@@ -4,6 +4,7 @@ import { gqlFetcher } from '../networkHelpers'
 export type ArticleReadingProgressMutationInput = {
   id: string
   readingProgressPercent?: number
+  readingProgressTopPercent?: number
   readingProgressAnchorIndex?: number
 }