Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Move next and other unneeded dependencies into next page instead of the article component
This commit is contained in:
Jackson Harper
2022-03-25 15:23:09 -07:00
committed by GitHub
parent 59da82ddc7 a856297002
commit ca144e6926
10 changed files with 93 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/appreader/src/index.jsx
View File

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

4
packages/web/components/elements/Label.tsx → packages/web/components/elements/LabelChip.tsx
View File

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

58
packages/web/components/templates/article/ArticleContainer.tsx
View File

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

39
packages/web/components/templates/article/EditLabelsModal.tsx
View File

@ -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
if (event.target.checked) {
setSelectedLabels([...selectedLabels, label])
} else {
setSelectedLabels(selectedLabels.filter((l) => l !== label))
}
// const label = event.target.value
// if (event.target.checked) {
// setSelectedLabels([...selectedLabels, label])
// } else {
// 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)) {
setSelectedLabels(
selectedLabels.filter((id) => id !== label.id)
)
} else {
setSelectedLabels([...selectedLabels, label.id])
}
// if (selectedLabels.includes(label.id)) {
// setSelectedLabels(
// selectedLabels.filter((id) => id !== label.id)
// )
// } else {
// 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>
))}

3
packages/web/components/templates/article/HighlightsLayer.tsx
View File

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

1
packages/web/lib/networking/fragments/labelFragment.ts
View File

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

16
packages/web/lib/networking/queries/useGetLabelsQuery.tsx
View File

@ -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
name
color
description
createdAt
...LabelFields
}
}
... on LabelsError {
@ -42,6 +31,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
}
}
}
${labelFragment}
`
const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)

2
packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
View File

@ -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 = {

61
packages/web/pages/[username]/[slug]/index.tsx
View File

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

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

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