From 6daa599b76d4cce2646a23015e563e129e517ba0 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 22 Mar 2022 13:58:19 -0700 Subject: [PATCH] Separate the mutations out of lower level components This will let us handle the mutations differently on native iOS and should help in avoiding making web calls directly from the web view, so we can avoid CORs and introduce a caching layer. --- .../components/templates/article/Article.tsx | 5 +- .../templates/article/ArticleContainer.tsx | 4 + .../templates/article/HighlightsLayer.tsx | 10 +- packages/web/lib/articleActions.tsx | 14 + .../web/lib/highlights/createHighlight.ts | 10 +- packages/web/lib/highlights/useSelection.tsx | 2 +- .../articleReadingProgressMutation.ts | 2 +- .../mutations/createHighlightMutation.ts | 2 +- .../mutations/mergeHighlightMutation.ts | 4 +- .../mutations/updateHighlightMutation.ts | 2 +- .../web/pages/[username]/[slug]/index.tsx | 12 + .../web/pages/app/[username]/[slug]/index.tsx | 12 + yarn.lock | 2263 ++++++++++++++++- 13 files changed, 2239 insertions(+), 103 deletions(-) create mode 100644 packages/web/lib/articleActions.tsx diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx index f02be67c2..6191a8db5 100644 --- a/packages/web/components/templates/article/Article.tsx +++ b/packages/web/components/templates/article/Article.tsx @@ -12,11 +12,11 @@ import { useRef, useState, } from 'react' -import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation' import { Tweet } from 'react-twitter-widgets' import { render } from 'react-dom' import { isDarkTheme } from '../../../lib/themeUpdater' import { debounce } from 'lodash' +import { ArticleMutations } from '../../../lib/articleActions' export type ArticleProps = { articleId: string @@ -24,6 +24,7 @@ export type ArticleProps = { initialAnchorIndex: number initialReadingProgress?: number scrollElementRef: MutableRefObject + articleMutations: ArticleMutations } export function Article(props: ArticleProps): JSX.Element { @@ -64,7 +65,7 @@ export function Article(props: ArticleProps): JSX.Element { useEffect(() => { ;(async () => { if (!readingProgress) return - await articleReadingProgressMutation({ + await props.articleMutations.articleReadingProgressMutation({ id: props.articleId, // round reading progress to 100% if more than that readingProgressPercent: readingProgress > 100 ? 100 : readingProgress, diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index cbe9d85ad..e2e757b86 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -19,10 +19,12 @@ 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 isAppleAppEmbed: boolean highlightBarDisabled: boolean @@ -187,6 +189,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { content={props.article.content} initialAnchorIndex={props.article.readingProgressAnchorIndex} scrollElementRef={props.scrollElementRef} + articleMutations={props.articleMutations} />