fix(reader): lift annotations processed state

Author: collectedmind

clients/web/src/components/annotations/annotations.list.js

@@ -57,7 +57,15 @@ export class QuoteList extends Component {
     const { annotations, onClickEvent, shareItem, deleteAnnotation, handleImpression } = this.props
     const cards = []
 
-    annotations
+    const annotationsWithPositon = annotations.map((annotation) => {
+      const id = annotation.id
+      const nodeList = document.querySelectorAll(`[data-annotation-id="${id}"]`)
+      const node = nodeList[0]
+      if (!node) return annotation
+      return { ...annotation, position: node.offsetTop }
+    })
+
+    annotationsWithPositon
       .sort((a, b) => a.position - b.position)
       .forEach((annot) => {
         // const active = annot.coordY > viewPort.top && annot.coordY < viewPort.bottom

clients/web/src/components/annotations/annotations.menu.js

@@ -44,7 +44,7 @@ const relativeWrapper = css`
       color: var(--color-textPrimary);
       background-color: var(--color-actionPrimarySubdued);
     }
-    .icon {
+    & > .icon {
       margin-right: 0;
       transform: translateY(0);
     }

clients/web/src/components/annotations/annotations.tics.js

@@ -69,26 +69,12 @@ const flyAwayWrapper = css`
 `
 
 const menuWrapper = css`
-  min-width: 200px;
   list-style-type: none;
   padding-left: 0;
-  transform: translate(-24px, -20px);
   position: absolute;
-  bottom: 0;
-  right: -32px;
+  bottom: 18px;
+  right: 24px;
   z-index: var(--zIndexModal);
-
-  button {
-    box-shadow: none;
-  }
-  button .icon {
-    margin-top: -5px;
-  }
-
-  & > div {
-    right: 0;
-    text-align: right;
-  }
 `
 
 const floatingCardStyles = css`

clients/web/src/components/annotations/utilities.js

@@ -8,7 +8,7 @@ export function highlightAnnotation(annotation, onHover, element, callback) {
 }
 
 // Main highlight function accepting an array of annotations
-export function highlightAnnotations({ node, annotations }) {
+export function highlightAnnotations({ node, annotations, annotationsCallback }) {
   const tapListener = () => {}
   const callback = () => {}
 
@@ -60,6 +60,8 @@ export function highlightAnnotations({ node, annotations }) {
     doc,
     callback
   })
+
+  if (annotationsCallback) annotationsCallback()
 }
 
 // Helper Functions

clients/web/src/components/reader/content.js

@@ -17,6 +17,7 @@ export const Content = ({
   content,
   images,
   videos,
+  annotationsCallback,
   annotations = [],
   onHighlightHover,
   externalLinkClick = () => {},
@@ -44,8 +45,7 @@ export const Content = ({
 
     const processAnnotations = async (annotations) => {
       removeAllHighlights()
-
-      highlightAnnotations({ annotations, node: articleRef.current })
+      highlightAnnotations({ annotations, node: articleRef.current, annotationsCallback })
     }
 
     if (content) externalizeLinks()
@@ -60,7 +60,16 @@ export const Content = ({
         link.removeEventListener('click', sendExternalLinkClick)
       })
     }
-  }, [annotations, content, externalLinkClick, highlightHover, images, videos])
+  }, [
+    annotations,
+    content,
+    externalLinkClick,
+    highlightHover,
+    annotationsCallback,
+    images,
+    videos,
+    articleRef
+  ])
 
   return (
     <article

clients/web/src/components/reader/sidebar.js

@@ -73,6 +73,7 @@ export const Sidebar = ({
   highlights,
   articleRef,
   shareItem,
+  annotationsProcessed,
   deleteAnnotation,
   isPremium,
   handleImpression
@@ -120,6 +121,7 @@ export const Sidebar = ({
         visible={!sideBarOpen}
         shareItem={shareItem}
         annotations={highlights}
+        annotationsProcessed={annotationsProcessed}
         annotationCount={highlights.length}
         deleteAnnotation={deleteAnnotation}
         onClickEvent={handleAnnotationClick}

clients/web/src/connectors/reader/content.js

@@ -3,7 +3,7 @@ import { Content } from 'components/reader/content'
 import { Highlights } from './highlights'
 import { sendSnowplowEvent } from 'connectors/snowplow/snowplow.state'
 
-export const ContentWrapper = ({ id, articleRef }) => {
+export const ContentWrapper = ({ id, articleRef, annotationsProcessed, annotationsCallback }) => {
   const dispatch = useDispatch()
 
   const item = useSelector((state) => state.itemsDisplay[id])
@@ -19,13 +19,14 @@ export const ContentWrapper = ({ id, articleRef }) => {
 
   return (
     <>
-      <Highlights id={id} articleRef={articleRef} />
+      <Highlights id={id} articleRef={articleRef} annotationsProcessed={annotationsProcessed} />
       <Content
         articleRef={articleRef}
         annotations={highlights}
         images={images}
         videos={videos}
         content={article}
+        annotationsCallback={annotationsCallback}
         externalLinkClick={externalLinkClick}
         style={{ padding: '40px' }}
       />

clients/web/src/connectors/reader/sidebar.js

@@ -6,7 +6,7 @@ import { mutationHighlightDelete } from 'connectors/items/mutation-highlight.sta
 import { shareAction } from 'connectors/items/mutation-share.state'
 import { sendSnowplowEvent } from 'connectors/snowplow/snowplow.state'
 
-export const SidebarWrapper = ({ id, articleRef }) => {
+export const SidebarWrapper = ({ id, articleRef, annotationsProcessed }) => {
   const dispatch = useDispatch()
 
   const item = useSelector((state) => state.itemsDisplay[id])
@@ -41,6 +41,7 @@ export const SidebarWrapper = ({ id, articleRef }) => {
         isPremium={isPremium}
         sideBarOpen={sideBarOpen}
         toggleSidebar={handleSidebarToggle}
+        annotationsProcessed={annotationsProcessed}
         highlights={highlights}
         deleteAnnotation={removeAnnotation}
         shareItem={itemShare}

clients/web/src/containers/read/reader.js

@@ -1,6 +1,6 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { css, cx } from '@emotion/css'
 
@@ -83,6 +83,12 @@ export default function Reader() {
 
   const articleRef = useRef(null)
 
+  const [annotationsProcessed, setAnnotationsProcessed] = useState(false)
+  const annotationsCallback = useCallback(() => {
+    if (annotationsProcessed) return
+    setAnnotationsProcessed(true)
+  }, [annotationsProcessed])
+
   // Item Data
   const itemId = useSelector((state) => state.idMap[slug])
   const item = useSelector((state) => state.itemsDisplay[itemId])
@@ -203,10 +209,18 @@ export default function Reader() {
           <Toolbar id={itemId} />
 
           <main className={articleWrapperStyles}>
-            <SidebarWrapper id={itemId} articleRef={articleRef} />
+            <SidebarWrapper
+              id={itemId}
+              articleRef={articleRef}
+              annotationsProcessed={annotationsProcessed}
+            />
             <article className={articleClasses} style={customStyles}>
               <Header id={itemId} />
-              <ContentWrapper id={itemId} articleRef={articleRef} />
+              <ContentWrapper
+                id={itemId}
+                articleRef={articleRef}
+                annotationsCallback={annotationsCallback}
+              />
             </article>
           </main>