From 788b44c7c9ba45c9a2e935d4f49cd7b477713ba6 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 13 Aug 2024 16:41:24 +0800 Subject: [PATCH 1/5] Use router instead of window.location to better handle the local cache --- .../components/elements/images/OmnivoreLogoBase.tsx | 8 +++++--- .../templates/article/PdfArticleContainer.tsx | 13 +++++++------ packages/web/lib/hooks/useHandleAddUrl.ts | 4 +++- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/web/components/elements/images/OmnivoreLogoBase.tsx b/packages/web/components/elements/images/OmnivoreLogoBase.tsx index 94c3fae86..6a244ad26 100644 --- a/packages/web/components/elements/images/OmnivoreLogoBase.tsx +++ b/packages/web/components/elements/images/OmnivoreLogoBase.tsx @@ -10,6 +10,8 @@ export type OmnivoreLogoBaseProps = { } export function OmnivoreLogoBase(props: OmnivoreLogoBaseProps): JSX.Element { + const router = useRouter() + return ( { const navReturn = window.localStorage.getItem('nav-return') if (navReturn) { - window.location.assign(navReturn) + router.push(navReturn) return } const query = window.sessionStorage.getItem('q') if (query) { - window.location.assign(`${DEFAULT_HOME_PATH}?${query}`) + router.push(`${DEFAULT_HOME_PATH}?${query}`) } else { - window.location.replace(DEFAULT_HOME_PATH) + router.push(DEFAULT_HOME_PATH) } }} tabIndex={-1} diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 32713da06..4e63e694f 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -27,6 +27,7 @@ import { useMergeHighlight, useUpdateHighlight, } from '../../../lib/networking/highlights/useItemHighlights' +import { useRouter } from 'next/router' export type PdfArticleContainerProps = { viewer: UserBasicData @@ -38,12 +39,12 @@ export type PdfArticleContainerProps = { export default function PdfArticleContainer( props: PdfArticleContainerProps ): JSX.Element { + const router = useRouter() const containerRef = useRef(null) const [notebookKey, setNotebookKey] = useState(uuidv4()) const [noteTarget, setNoteTarget] = useState(undefined) - const [noteTargetPageIndex, setNoteTargetPageIndex] = useState< - number | undefined - >(undefined) + const [noteTargetPageIndex, setNoteTargetPageIndex] = + useState(undefined) const highlightsRef = useRef([]) const createHighlight = useCreateHighlight() const deleteHighlight = useDeleteHighlight() @@ -481,14 +482,14 @@ export default function PdfArticleContainer( case 'u': const navReturn = window.localStorage.getItem('nav-return') if (navReturn) { - window.location.assign(navReturn) + router.push(navReturn) return } const query = window.sessionStorage.getItem('q') if (query) { - window.location.assign(`${DEFAULT_HOME_PATH}?${query}`) + router.push(`${DEFAULT_HOME_PATH}?${query}`) } else { - window.location.replace(DEFAULT_HOME_PATH) + router.push(DEFAULT_HOME_PATH) } break case 'e': diff --git a/packages/web/lib/hooks/useHandleAddUrl.ts b/packages/web/lib/hooks/useHandleAddUrl.ts index 577f74f29..4b47508ce 100644 --- a/packages/web/lib/hooks/useHandleAddUrl.ts +++ b/packages/web/lib/hooks/useHandleAddUrl.ts @@ -2,8 +2,10 @@ import { useCallback } from 'react' import { v4 as uuidv4 } from 'uuid' import { useAddItem } from '../networking/library_items/useLibraryItems' import { showErrorToast, showSuccessToastWithAction } from '../toastHelpers' +import { useRouter } from 'next/router' export const useHandleAddUrl = () => { + const router = useRouter() const addItem = useAddItem() return useCallback(async (url: string, timezone: string, locale: string) => { const itemId = uuidv4() @@ -16,7 +18,7 @@ export const useHandleAddUrl = () => { console.log('result: ', result) if (result) { showSuccessToastWithAction('Item saving', 'Read now', async () => { - window.location.href = `/article?url=${encodeURIComponent(url)}` + router.push(`/article?url=${encodeURIComponent(url)}`) return Promise.resolve() }) } else { From a92db4e21651058d12a4e40694291b034516beac Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 13 Aug 2024 16:41:44 +0800 Subject: [PATCH 2/5] Dont query for recommendations --- packages/web/lib/networking/library_items/gql.tsx | 12 ------------ .../lib/networking/library_items/useLibraryItems.tsx | 1 - 2 files changed, 13 deletions(-) diff --git a/packages/web/lib/networking/library_items/gql.tsx b/packages/web/lib/networking/library_items/gql.tsx index e74e118f4..930c45745 100644 --- a/packages/web/lib/networking/library_items/gql.tsx +++ b/packages/web/lib/networking/library_items/gql.tsx @@ -69,18 +69,6 @@ export const GQL_SEARCH_QUERY = gql` readAt savedAt wordsCount - recommendations { - id - name - note - user { - userId - name - username - profileImageURL - } - recommendedAt - } highlights { ...HighlightFields } diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index e3512711c..1c0a8e19b 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -890,7 +890,6 @@ export type ArticleAttributes = { labels?: Label[] state?: State directionality?: TextDirection - recommendations?: Recommendation[] } type MoveToFolderData = { From 22216e33b8c062d9d96fe84c082ec215e0647f2b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 13 Aug 2024 17:00:05 +0800 Subject: [PATCH 3/5] Use AsyncStorage for local cache --- .../elements/images/OmnivoreLogoBase.tsx | 1 + packages/web/package.json | 3 ++ packages/web/pages/_app.tsx | 24 ++++++++++--- yarn.lock | 35 +++++++++++++++++++ 4 files changed, 59 insertions(+), 4 deletions(-) diff --git a/packages/web/components/elements/images/OmnivoreLogoBase.tsx b/packages/web/components/elements/images/OmnivoreLogoBase.tsx index 6a244ad26..b5203de8d 100644 --- a/packages/web/components/elements/images/OmnivoreLogoBase.tsx +++ b/packages/web/components/elements/images/OmnivoreLogoBase.tsx @@ -18,6 +18,7 @@ export function OmnivoreLogoBase(props: OmnivoreLogoBaseProps): JSX.Element { textDecoration: 'none', display: 'flex', alignItems: 'center', + cursor: 'pointer', }} onClick={(event) => { const navReturn = window.localStorage.getItem('nav-return') diff --git a/packages/web/package.json b/packages/web/package.json index 383d603dd..6d6ba26e4 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -30,9 +30,12 @@ "@radix-ui/react-separator": "^0.1.0", "@radix-ui/react-slider": "^1.1.0", "@radix-ui/react-switch": "^1.0.1", + "@react-native-async-storage/async-storage": "^1.24.0", "@sentry/nextjs": "^7.42.0", "@stitches/react": "^1.2.5", + "@tanstack/query-async-storage-persister": "^5.51.21", "@tanstack/react-query": "^5.51.21", + "@tanstack/react-query-persist-client": "^5.51.23", "allotment": "^1.20.2", "antd": "4.24.3", "axios": "^1.2.0", diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index a21001afa..75f043348 100644 --- a/packages/web/pages/_app.tsx +++ b/packages/web/pages/_app.tsx @@ -24,10 +24,23 @@ import { updateTheme } from '../lib/themeUpdater' import { ThemeId } from '../components/tokens/stitches.config' import { posthog } from 'posthog-js' import { GoogleReCaptchaProvider } from '@google-recaptcha/react' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import AsyncStorage from '@react-native-async-storage/async-storage' +import { QueryClient } from '@tanstack/react-query' +import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' +import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' import React from 'react' -const queryClient = new QueryClient() +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + gcTime: 1000 * 60 * 60 * 24, // 24 hours + }, + }, +}) + +const asyncStoragePersister = createAsyncStoragePersister({ + storage: AsyncStorage, +}) TopBarProgress.config({ barColors: { @@ -102,7 +115,10 @@ export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element { return ( - + @@ -116,7 +132,7 @@ export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element { - + ) } diff --git a/yarn.lock b/yarn.lock index 78c27cdb7..e8bd5190e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5619,6 +5619,13 @@ resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a" integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg== +"@react-native-async-storage/async-storage@^1.24.0": + version "1.24.0" + resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.24.0.tgz#888efbc62a26f7d9464b32f4d3027b7f2771999b" + integrity sha512-W4/vbwUOYOjco0x3toB8QCr7EjIP6nE9G7o8PMguvvjYT5Awg09lyV4enACRx4s++PPulBiBSjL0KTFx2u0Z/g== + dependencies: + merge-options "^3.0.4" + "@redis/bloom@1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@redis/bloom/-/bloom-1.2.0.tgz#d3fd6d3c0af3ef92f26767b56414a370c7b63b71" @@ -7575,11 +7582,32 @@ dependencies: defer-to-connect "^1.0.1" +"@tanstack/query-async-storage-persister@^5.51.21": + version "5.51.21" + resolved "https://registry.yarnpkg.com/@tanstack/query-async-storage-persister/-/query-async-storage-persister-5.51.21.tgz#27e6635d89e0814c65586b8047372349698c7841" + integrity sha512-T22f99fDKk+XrT0kCEwETNehn8gjGfdNaaYM0xRA7VvwFKUKNYETOwUQgXV6kZ+xg6LKbZeI22YsTcuYDFOx5w== + dependencies: + "@tanstack/query-persist-client-core" "5.51.21" + "@tanstack/query-core@5.51.21": version "5.51.21" resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.51.21.tgz#a510469c6c30d3de2a8b8798e340169a4b0fd08f" integrity sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw== +"@tanstack/query-persist-client-core@5.51.21": + version "5.51.21" + resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-5.51.21.tgz#5ee605f730c28ebdf3e2bf075257f65ceab80ccb" + integrity sha512-W/H3SFIMPjxgiwkrl511pG2JhvKnFWtLCgO+AlNqk9keyClMbm9tb3oLUHveLuzviCaROpmFShW+eSP5zYwk4g== + dependencies: + "@tanstack/query-core" "5.51.21" + +"@tanstack/react-query-persist-client@^5.51.23": + version "5.51.23" + resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-5.51.23.tgz#f4f4d7ba854907c43a864614eea94579a20f0651" + integrity sha512-SwTNwxhG4zgpji3B8oLZqZuaOXYtOjbuqVerMQkOX/vGroIU6dGh1SzOwy4glW3IVr+G3kUKMcS3JYibWPQZiQ== + dependencies: + "@tanstack/query-persist-client-core" "5.51.21" + "@tanstack/react-query@^5.51.21": version "5.51.23" resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.51.23.tgz#83c223f4cb6054b206de8856b73ca7e41a63ba1f" @@ -22061,6 +22089,13 @@ merge-descriptors@1.0.1: resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E= +merge-options@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7" + integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ== + dependencies: + is-plain-obj "^2.1.0" + merge-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" From a0c3d1d18e874b50c20c77ebed8ea263f5f98e6c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 13 Aug 2024 17:04:24 +0800 Subject: [PATCH 4/5] Use 48hrs for cache timeout --- packages/web/pages/_app.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index 75f043348..234192d3b 100644 --- a/packages/web/pages/_app.tsx +++ b/packages/web/pages/_app.tsx @@ -33,7 +33,7 @@ import React from 'react' const queryClient = new QueryClient({ defaultOptions: { queries: { - gcTime: 1000 * 60 * 60 * 24, // 24 hours + gcTime: 1000 * 60 * 60 * 48, // 48 hours }, }, }) @@ -92,14 +92,6 @@ const ConditionalCaptchaProvider = (props: { return <>{props.children} } -// const queryClient = new QueryClient({ -// defaultOptions: { -// queries: { -// gcTime: 1000 * 60 * 60 * 24, -// }, -// }, -// }) - export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element { const router = useRouter() From 602acbbe318267a159fa436bff8b9a9e2755297f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 13 Aug 2024 17:12:26 +0800 Subject: [PATCH 5/5] Leave recommendations attribute as it still could be used in iOS --- packages/web/lib/networking/library_items/useLibraryItems.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index 1c0a8e19b..e3512711c 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -890,6 +890,7 @@ export type ArticleAttributes = { labels?: Label[] state?: State directionality?: TextDirection + recommendations?: Recommendation[] } type MoveToFolderData = {