From 6529b87e9df4cadb3deeef0e7526ed62c6e3c2ba Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 12 Aug 2024 20:40:28 +0800 Subject: [PATCH] Some improvements to the additem --- .../templates/homeFeed/EditItemModals.tsx | 10 +- .../templates/library/LibraryContainer.tsx | 98 ++----------------- .../web/lib/networking/library_items/gql.tsx | 32 ++++++ .../library_items/useLibraryItems.tsx | 19 ++++ packages/web/pages/_app.tsx | 4 +- 5 files changed, 67 insertions(+), 96 deletions(-) diff --git a/packages/web/components/templates/homeFeed/EditItemModals.tsx b/packages/web/components/templates/homeFeed/EditItemModals.tsx index 59deceb6c..d6443e67a 100644 --- a/packages/web/components/templates/homeFeed/EditItemModals.tsx +++ b/packages/web/components/templates/homeFeed/EditItemModals.tsx @@ -31,7 +31,7 @@ export function EditLibraryItemModal( ( title: string, author: string | undefined, - description: string, + description: string | undefined, savedAt: Dayjs, publishedAt: Dayjs | undefined ) => { @@ -102,7 +102,7 @@ type EditArticleModalProps = { updateArticle: ( title: string, author: string | undefined, - description: string, + description: string | undefined, savedAt: string, publishedAt: string | undefined ) => void @@ -114,7 +114,7 @@ export function EditArticleModal(props: EditArticleModalProps): JSX.Element { ( title: string, author: string | undefined, - description: string, + description: string | undefined, savedAt: Dayjs, publishedAt: Dayjs | undefined ) => { @@ -177,7 +177,7 @@ export function EditArticleModal(props: EditArticleModalProps): JSX.Element { type EditItemModalProps = { title: string author: string | undefined - description: string + description: string | undefined savedAt: Dayjs publishedAt: Dayjs | undefined @@ -186,7 +186,7 @@ type EditItemModalProps = { onSave: ( title: string, author: string | undefined, - description: string, + description: string | undefined, savedAt: Dayjs, publishedAt: Dayjs | undefined ) => void diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 05f357e98..b07d1678b 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -41,15 +41,9 @@ import { EmptyLibrary } from '../homeFeed/EmptyLibrary' import { MultiSelectMode } from '../homeFeed/LibraryHeader' import { UploadModal } from '../UploadModal' import { BulkAction } from '../../../lib/networking/library_items/useLibraryItems' -import { - showErrorToast, - showSuccessToast, - showSuccessToastWithAction, -} from '../../../lib/toastHelpers' +import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' import { SetPageLabelsModalPresenter } from '../article/SetLabelsModalPresenter' import { NotebookPresenter } from '../article/NotebookPresenter' -import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation' -import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery' import { PinnedButtons } from '../homeFeed/PinnedButtons' import { PinnedSearch } from '../../../pages/settings/pinned-searches' import { FetchItemsError } from '../homeFeed/FetchItemsError' @@ -59,6 +53,7 @@ import { theme } from '../../tokens/stitches.config' import { emptyTrashMutation } from '../../../lib/networking/mutations/emptyTrashMutation' import { State } from '../../../lib/networking/fragments/articleFragment' import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl' +import { QueryClient, useQueryClient } from '@tanstack/react-query' export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' @@ -75,11 +70,6 @@ const debouncedFetchSearchResults = debounce((query, cb) => { fetchSearchResults(query, cb) }, 300) -// We set a relatively high delay for the refresh at the end, as it's likely there's an issue -// in processing. We give it the best attempt to be able to resolve, but if it doesn't we set -// the state as Failed. On refresh it will try again if the backend sends "PROCESSING" -const TIMEOUT_DELAYS = [2000, 3500, 5000] - type LibraryContainerProps = { folder: string | undefined filterFunc: (item: LibraryItemNode) => boolean @@ -88,8 +78,8 @@ type LibraryContainerProps = { } export function LibraryContainer(props: LibraryContainerProps): JSX.Element { - const { viewerData } = useGetViewerQuery() const router = useRouter() + const { viewerData } = useGetViewerQuery() const { queryValue } = useKBar((state) => ({ queryValue: state.searchQuery })) const [searchResults, setSearchResults] = useState([]) @@ -185,78 +175,13 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { } }, [libraryItems]) - // useEffect(() => { - // const timeout: NodeJS.Timeout[] = [] + const processingItems = useMemo(() => { + return libraryItems + .filter((li) => li.node.state === State.PROCESSING) + .map((li) => li.node.id) + }, [libraryItems]) - // const items = ( - // itemsPages?.flatMap((ad) => { - // return ad.search.edges.map((it) => ({ - // ...it, - // isLoading: it.node.state === 'PROCESSING', - // })) - // }) || [] - // ).filter((it) => it.isLoading) - - // items.map(async (item) => { - // let startIdx = 0 - - // const seeIfUpdated = async () => { - // if (startIdx >= TIMEOUT_DELAYS.length) { - // item.node.state = State.FAILED - // const updatedArticle = { ...item } - // updatedArticle.node = { ...item.node } - // updatedArticle.isLoading = false - // // performActionOnItem('update-item', updatedArticle) - // return - // } - - // const username = viewerData?.me?.profile.username - // const itemsToUpdate = libraryItems.filter((it) => it.isLoading) - - // if (itemsToUpdate.length > 0) { - // const link = await articleQuery({ - // username, - // slug: item.node.id, - // includeFriendsHighlights: false, - // }) - - // if (link && link.state != 'PROCESSING') { - // const updatedArticle = { ...item } - // updatedArticle.node = { ...item.node, ...link } - // updatedArticle.isLoading = false - // console.log(`Updating Metadata of ${item.node.slug}.`) - // // performActionOnItem('update-item', updatedArticle) - // return - // } - - // console.log( - // `Trying to get the metadata of item ${item.node.slug}... Retry ${startIdx} of 5` - // ) - // timeout.push(setTimeout(seeIfUpdated, TIMEOUT_DELAYS[startIdx++])) - // } - // } - - // await seeIfUpdated() - // }) - - // return () => { - // timeout.forEach(clearTimeout) - // } - // }, [itemsPages]) - - // const handleFetchMore = useCallback(() => { - // if (isLoading || !hasNextPage) { - // return - // } - // setSize(size + 1) - // }, [size, isValidating]) - - // useEffect(() => { - // if (isValidating || !hasNextPage || size !== 1) { - // return - // } - // setSize(size + 1) - // }, [size, isValidating]) + console.log('processingItems: ', processingItems) const focusFirstItem = useCallback(() => { if (libraryItems.length < 1) { @@ -361,10 +286,6 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { if (activeCardId && !alreadyScrolled.current) { scrollToActiveCard(activeCardId) alreadyScrolled.current = true - - // if (activeItem) { - // performActionOnItem('refresh', activeItem) - // } } }, [activeCardId, scrollToActiveCard]) @@ -880,7 +801,6 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { const href = `${window.location.pathname}?${qp.toString()}` router.push(href, href, { shallow: true }) window.sessionStorage.setItem('q', qp.toString()) - // performActionOnItem('refresh', undefined as unknown as any) }} loadMore={fetchNextPage} hasMore={hasNextPage ?? false} diff --git a/packages/web/lib/networking/library_items/gql.tsx b/packages/web/lib/networking/library_items/gql.tsx index 536503264..e74e118f4 100644 --- a/packages/web/lib/networking/library_items/gql.tsx +++ b/packages/web/lib/networking/library_items/gql.tsx @@ -203,6 +203,38 @@ export const GQL_UPDATE_LIBRARY_ITEM = gql` } ` +export const GQL_GET_LIBRARY_ITEM = gql` + query GetArticle( + $username: String! + $slug: String! + $includeFriendsHighlights: Boolean + ) { + article(username: $username, slug: $slug) { + ... on ArticleSuccess { + article { + ...ArticleFields + highlights(input: { includeFriends: $includeFriendsHighlights }) { + ...HighlightFields + } + labels { + ...LabelFields + } + recommendations { + ...RecommendationFields + } + } + } + ... on ArticleError { + errorCodes + } + } + } + ${articleFragment} + ${highlightFragment} + ${labelFragment} + ${recommendationFragment} +` + export const GQL_GET_LIBRARY_ITEM_CONTENT = gql` query GetArticle( $username: String! diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index 58cf6accc..a522238fc 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -13,6 +13,7 @@ import { Label } from '../fragments/labelFragment' import { GQL_BULK_ACTION, GQL_DELETE_LIBRARY_ITEM, + GQL_GET_LIBRARY_ITEM, GQL_GET_LIBRARY_ITEM_CONTENT, GQL_MOVE_ITEM_TO_FOLDER, GQL_SAVE_ARTICLE_READING_PROGRESS, @@ -517,6 +518,24 @@ export const useUpdateItemReadStatus = () => { }) } +export function useRefreshProcessingItems(itemIds: string[]) { + const fullQuery = `in:all includes:${itemIds.join(',')}` + + return useQuery({ + queryKey: ['libraryItems', fullQuery], + queryFn: async () => { + const response = (await gqlFetcher(GQL_SEARCH_QUERY, { + after: 0, + first: 10, + query: fullQuery, + includeContent: false, + })) as LibraryItemsData + return response.search + }, + enabled: itemIds.length > 0, + }) +} + export const useGetLibraryItemContent = (username: string, slug: string) => { const queryClient = useQueryClient() return useQuery({ diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index cb189de02..83cfe8dfe 100644 --- a/packages/web/pages/_app.tsx +++ b/packages/web/pages/_app.tsx @@ -38,10 +38,10 @@ if (typeof window !== 'undefined') { persistQueryClient({ queryClient, persister: localStoragePersister, - maxAge: 60 * 60 * 1000, + // one week cache time + maxAge: 7 * 24 * 60 * 60 * 1000, dehydrateOptions: { shouldDehydrateQuery: ({ queryKey }) => { - console.log('queryKey: ', queryKey) // Don't cache the library items in local storage const [firstKey] = queryKey return firstKey !== 'library-items'