Merge pull request #323 from omnivore-app/fix/rm-uneeded-article-deps

Move next and other unneeded dependencies into next page instead of the article component

packages/appreader/src/index.jsx

@@ -33,7 +33,6 @@ const App = () => {
           className="disable-webkit-callout"
         >
           <ArticleContainer
-            viewerUsername="test"
             article={window.omnivoreArticle}
             scrollElementRef={React.createRef()}
             isAppleAppEmbed={true}

packages/web/components/elements/LabelChip.tsx

@@ -1,11 +1,11 @@
 import { StyledText } from './StyledText'
 
-type LabelProps = {
+type LabelChipProps = {
   text: string
   color: string // expected to be a RGB hex color string
 }
 
-export function Label(props: LabelProps): JSX.Element {
+export function LabelChip(props: LabelChipProps): JSX.Element {
   const hexToRgb = (hex: string) => {
     const bigint = parseInt(hex.substring(1), 16)
     const r = (bigint >> 16) & 255

packages/web/components/templates/article/ArticleContainer.tsx

@@ -10,19 +10,11 @@ import { MutableRefObject, useEffect, useState } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
 import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
-import { articleKeyboardCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { ShareArticleModal } from './ShareArticleModal'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
-import { webBaseURL } from '../../../lib/appConfig'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
-import { EditLabelsModal } from './EditLabelsModal'
-import Script from 'next/script'
-import { useRouter } from 'next/router'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type ArticleContainerProps = {
-  viewerUsername: string
   article: ArticleAttributes
   articleMutations: ArticleMutations
   scrollElementRef: MutableRefObject<HTMLDivElement | null>
@@ -35,7 +27,6 @@ type ArticleContainerProps = {
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
-  const router = useRouter()
   const [showShareModal, setShowShareModal] = useState(false)
   const [showLabelsModal, setShowLabelsModal] = useState(false)
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
@@ -50,28 +41,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     await userPersonalizationMutation({ fontSize: newFontSize })
   }
 
-  useKeyboardShortcuts(
-    articleKeyboardCommands(router, async (action) => {
-      switch (action) {
-        case 'openOriginalArticle':
-          const url = props.article.url
-          if (url) {
-            window.open(url, '_blank')
-          }
-          break
-        case 'incrementFontSize':
-          await updateFontSize(Math.min(fontSize + 2, 28))
-          break
-        case 'decrementFontSize':
-          await updateFontSize(Math.max(fontSize - 2, 10))
-          break
-        case 'editLabels':
-          setShowLabelsModal(true)
-          break
-      }
-    })
-  )
-
   // Listen for font size and color mode change events sent from host apps (ios, macos...)
   useEffect(() => {
     const increaseFontSize = async () => {
@@ -123,16 +92,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
 
   return (
     <>
-      {!props.isAppleAppEmbed && (
-        <>
-          <Script async src="/static/scripts/mathJaxConfiguration.js" />
-          <Script
-            async
-            id="MathJax-script"
-            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
-          />
-        </>
-      )}
       <Box
         id="article-container"
         css={{
@@ -213,7 +172,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         <Box css={{ height: '100px' }} />
       </Box>
       <HighlightsLayer
-        viewerUsername={props.viewerUsername}
         highlights={props.article.highlights}
         articleTitle={props.article.title}
         articleAuthor={props.article.author ?? ''}
@@ -238,7 +196,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           onOpenChange={(open: boolean) => setShowReportIssuesModal(open)}
         />
       ) : null}
-      {showShareModal && (
+      {/* {showShareModal && (
         <ShareArticleModal
           url={`${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights?r=true`}
           title={props.article.title}
@@ -249,19 +207,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           originalArticleUrl={props.article.originalArticleUrl}
           onOpenChange={(open: boolean) => setShowShareModal(open)}
         />
-      )}
+      )} */}
-      {showLabelsModal && (
-        <EditLabelsModal
-          labels={labels}
-          article={props.article}
-          onOpenChange={() => {
-            setShowLabelsModal(false)
-          }}
-          setLabels={(labels: string[]) => {
-            setLabels(labels)
-          }}
-        />
-      )}
     </>
   )
 }

packages/web/components/templates/article/EditLabelsModal.tsx

@@ -10,15 +10,16 @@ import { CrossIcon } from '../../elements/images/CrossIcon'
 import { theme } from '../../tokens/stitches.config'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { ChangeEvent, useCallback, useState } from 'react'
-import { Label } from '../../elements/Label'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { LabelChip } from '../../elements/LabelChip'
 
 type EditLabelsModalProps = {
-  labels: string[]
+  labels: Label[]
   article: ArticleAttributes
   onOpenChange: (open: boolean) => void
-  setLabels: (labels: string[]) => void
+  setLabels: (labels: Label[]) => void
 }
 
 export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
@@ -26,7 +27,7 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
   const { labels } = useGetLabelsQuery()
 
   const saveAndExit = useCallback(async () => {
-    const result = await setLabelsMutation(props.article.id, selectedLabels)
+    const result = await setLabelsMutation(props.article.id, selectedLabels.map((l) => l.id))
     console.log('result of setting labels', result)
     props.onOpenChange(false)
     props.setLabels(selectedLabels)
@@ -34,12 +35,12 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
-      const label = event.target.value
+      // const label = event.target.value
-      if (event.target.checked) {
+      // if (event.target.checked) {
-        setSelectedLabels([...selectedLabels, label])
+      //   setSelectedLabels([...selectedLabels, label])
-      } else {
+      // } else {
-        setSelectedLabels(selectedLabels.filter((l) => l !== label))
+      //   setSelectedLabels(selectedLabels.filter((l) => l !== label))
-      }
+      // }
     },
     [selectedLabels]
   )
@@ -81,21 +82,21 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
                 key={label.id}
                 css={{ height: '50px', verticalAlign: 'middle' }}
                 onClick={() => {
-                  if (selectedLabels.includes(label.id)) {
+                  // if (selectedLabels.includes(label.id)) {
-                    setSelectedLabels(
+                  //   setSelectedLabels(
-                      selectedLabels.filter((id) => id !== label.id)
+                  //     selectedLabels.filter((id) => id !== label.id)
-                    )
+                  //   )
-                  } else {
+                  // } else {
-                    setSelectedLabels([...selectedLabels, label.id])
+                  //   setSelectedLabels([...selectedLabels, label.id])
-                  }
+                  // }
                 }}
               >
-                <Label color={label.color} text={label.name} />
+                <LabelChip color={label.color} text={label.name} />
                 <input
                   type="checkbox"
                   value={label.id}
                   onChange={handleChange}
-                  checked={selectedLabels.includes(label.id)}
+                  checked={selectedLabels.includes(label)}
                 />
               </HStack>
             ))}

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -3,8 +3,6 @@ import { makeHighlightStartEndOffset } from '../../../lib/highlights/highlightGe
 import type { HighlightLocation } from '../../../lib/highlights/highlightGenerator'
 import { useSelection } from '../../../lib/highlights/useSelection'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
-import { shareHighlightToFeedMutation } from '../../../lib/networking/mutations/shareHighlightToFeedMutation'
-import { shareHighlightCommentMutation } from '../../../lib/networking/mutations/updateShareHighlightCommentMutation'
 import {
   highlightIdAttribute,
   highlightNoteIdAttribute,
@@ -21,7 +19,6 @@ import { showErrorToast } from '../../../lib/toastHelpers'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type HighlightsLayerProps = {
-  viewerUsername: string
   highlights: Highlight[]
   articleId: string
   articleTitle: string

packages/web/lib/networking/fragments/labelFragment.ts

@@ -6,6 +6,7 @@ export const labelFragment = gql`
     name
     color
     description
+    createdAt
   }
 `
 

packages/web/lib/networking/queries/useGetLabelsQuery.tsx

@@ -1,5 +1,6 @@
 import { gql } from 'graphql-request'
 import useSWR from 'swr'
+import { Label, labelFragment } from '../fragments/labelFragment'
 import { publicGqlFetcher } from '../networkHelpers'
 
 type LabelsQueryResponse = {
@@ -16,25 +17,13 @@ type LabelsData = {
   labels?: unknown
 }
 
-export type Label = {
-  id: string
-  name: string
-  color: string
-  description?: string
-  createdAt: Date
-}
-
 export function useGetLabelsQuery(): LabelsQueryResponse {
   const query = gql`
     query GetLabels {
       labels {
         ... on LabelsSuccess {
           labels {
-            id
+            ...LabelFields
-            name
-            color
-            description
-            createdAt
           }
         }
         ... on LabelsError {
@@ -42,6 +31,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
         }
       }
     }
+    ${labelFragment}
   `
 
   const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)

packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx

@@ -6,7 +6,7 @@ import { articleFragment } from '../fragments/articleFragment'
 import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation'
 import { deleteLinkMutation } from '../mutations/deleteLinkMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
-import { Label } from './useGetLabelsQuery'
+import { Label } from './../fragments/labelFragment'
 import { showErrorToast, showSuccessToast } from '../../toastHelpers'
 
 export type LibraryItemsQueryInput = {

packages/web/pages/[username]/[slug]/index.tsx

@@ -6,9 +6,9 @@ import { useRouter } from 'next/router'
 import { VStack } from './../../../components/elements/LayoutPrimitives'
 import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { articleKeyboardCommands, navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import dynamic from 'next/dynamic'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { webBaseURL } from '../../../lib/appConfig'
@@ -18,6 +18,11 @@ import { deleteHighlightMutation } from '../../../lib/networking/mutations/delet
 import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
+import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
+import Script from 'next/script'
+import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { isVipUser } from '../../../lib/featureFlag'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -28,6 +33,7 @@ export default function Home(): JSX.Element {
   const router = useRouter()
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const { slug } = router.query
+  const [showLabelsModal, setShowLabelsModal] = useState(false)
 
   // Populate data cache
   const { viewerData } = useGetViewerQuery()
@@ -38,9 +44,39 @@ export default function Home(): JSX.Element {
   })
   const { preferencesData } = useGetUserPreferences()
   const article = articleData?.article.article
+  const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
 
   useKeyboardShortcuts(navigationCommands(router))
 
+  const updateFontSize = async (newFontSize: number) => {
+    setFontSize(newFontSize)
+    await userPersonalizationMutation({ fontSize: newFontSize })
+  }
+
+  useKeyboardShortcuts(
+    articleKeyboardCommands(router, async (action) => {
+      switch (action) {
+        case 'openOriginalArticle':
+          const url = article?.url
+          if (url) {
+            window.open(url, '_blank')
+          }
+          break
+        case 'incrementFontSize':
+          await updateFontSize(Math.min(fontSize + 2, 28))
+          break
+        case 'decrementFontSize':
+          await updateFontSize(Math.max(fontSize - 2, 10))
+          break
+        case 'editLabels':
+          if (viewerData?.me && isVipUser(viewerData?.me)) {
+            setShowLabelsModal(true)
+          }
+          break
+      }
+    })
+  )
+
   if (article && viewerData?.me) {
     return (
       <PrimaryLayout
@@ -53,6 +89,12 @@ export default function Home(): JSX.Element {
           description: article.description,
         }}
       >
+        <Script async src="/static/scripts/mathJaxConfiguration.js" />
+        <Script
+          async
+          id="MathJax-script"
+          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+        />
         <Toaster />
 
           {article.contentReader == 'PDF' ? (
@@ -72,9 +114,8 @@ export default function Home(): JSX.Element {
                 scrollElementRef={scrollRef}
                 isAppleAppEmbed={false}
                 highlightBarDisabled={false}
-                viewerUsername={viewerData.me?.profile?.username}
                 highlightsBaseURL={`${webBaseURL}/${viewerData.me?.profile?.username}/${slug}/highlights`}
-                fontSize={preferencesData?.fontSize}
+                fontSize={fontSize}
                 articleMutations={{
                   createHighlightMutation,
                   deleteHighlightMutation,
@@ -83,6 +124,18 @@ export default function Home(): JSX.Element {
                   articleReadingProgressMutation,
                 }}
               />
+              {showLabelsModal && (
+                <EditLabelsModal
+                  labels={article.labels || []}
+                  article={article}
+                  onOpenChange={() => {
+                    setShowLabelsModal(false)
+                  }}
+                  setLabels={(labels: Label[]) => {
+                    // setLabels(labels)
+                  }}
+                />
+              )}
             </VStack>
           )}
       </PrimaryLayout>

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -12,6 +12,7 @@ import { deleteHighlightMutation } from '../../../../lib/networking/mutations/de
 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'
 
 type AppArticleEmbedContentProps = {
   slug: string
@@ -78,6 +79,12 @@ function AppArticleEmbedContent(
           width: '100vw',
         }}
       >
+        <Script async src="/static/scripts/mathJaxConfiguration.js" />
+        <Script
+          async
+          id="MathJax-script"
+          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+        />
         <VStack
           alignment="center"
           distribution="center"
@@ -88,7 +95,6 @@ function AppArticleEmbedContent(
             scrollElementRef={scrollRef}
             isAppleAppEmbed={true}
             highlightBarDisabled={props.highlightBarDisabled}
-            viewerUsername={props.username}
             highlightsBaseURL={`${webBaseURL}/${props.username}/${props.slug}/highlights`}
             fontSize={props.fontSize}
             margin={props.margin}