diff --git a/client/src/plus/collections/api.ts b/client/src/plus/collections/api.ts index d5ec5cb0763d..56d24e757805 100644 --- a/client/src/plus/collections/api.ts +++ b/client/src/plus/collections/api.ts @@ -1,6 +1,6 @@ import { useState } from "react"; import useSWR, { KeyedMutator, mutate, SWRResponse } from "swr"; -import useSWRInfinite from "swr/infinite"; +import useSWRInfinite, { SWRInfiniteResponse } from "swr/infinite"; import { MultipleCollectionInfo, MultipleCollectionResponse, @@ -10,6 +10,11 @@ import { CollectionItemModificationRequest, } from "./rust-types"; +// "swr/infinite" doesn't export InfiniteKeyedMutator directly +type InfiniteKeyedMutator = SWRInfiniteResponse< + T extends (infer I)[] ? I : T +>["mutate"]; + export interface NewCollection { name: string; description?: string; @@ -288,7 +293,9 @@ export function useItemAdd() { ); } -export function useItemEdit(scopedMutator?: KeyedMutator) { +export function useItemEdit( + scopedMutator?: KeyedMutator | InfiniteKeyedMutator +) { return useMutation( ({ collection_id, id, ...body }) => poster( @@ -303,7 +310,9 @@ export function useItemEdit(scopedMutator?: KeyedMutator) { ); } -export function useItemDelete(scopedMutator?: KeyedMutator) { +export function useItemDelete( + scopedMutator?: KeyedMutator | InfiniteKeyedMutator +) { return useMutation( ({ collection_id, id }) => deleter(getItemKey(collection_id, id)), ({ collection_id, url }) => { diff --git a/client/src/plus/collections/collection.tsx b/client/src/plus/collections/collection.tsx index 05bbf2ac48d3..f895b8f7392c 100644 --- a/client/src/plus/collections/collection.tsx +++ b/client/src/plus/collections/collection.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { useParams } from "react-router"; import { Link } from "react-router-dom"; import useSWR, { KeyedMutator } from "swr"; +import { SWRInfiniteResponse } from "swr/infinite"; import { useScrollToTop, useLocale } from "../../hooks"; import { Button } from "../../ui/atoms/button"; import Container from "../../ui/atoms/container"; @@ -26,6 +27,11 @@ import { useGleanClick } from "../../telemetry/glean-context"; import { PLUS_COLLECTIONS } from "../../telemetry/constants"; dayjs.extend(relativeTime); +// "swr/infinite" doesn't export InfiniteKeyedMutator directly +type InfiniteKeyedMutator = SWRInfiniteResponse< + T extends (infer I)[] ? I : T +>["mutate"]; + export function CollectionComponent() { const { collectionId } = useParams(); const { data: collection, error: collectionError } = @@ -170,7 +176,7 @@ function ItemComponent({ }: { addNoteEnabled?: boolean; item: Item | FrequentlyViewedItem; - mutate?: KeyedMutator; + mutate?: KeyedMutator | InfiniteKeyedMutator; }) { const [slicedNote, setSlicedNote] = useState(); const [note, setNote] = useState(); diff --git a/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx b/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx index 34467c3dcc13..67f9a5985b16 100644 --- a/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx +++ b/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx @@ -21,10 +21,16 @@ import { useGleanClick } from "../../../../telemetry/glean-context"; import { PLUS_COLLECTIONS } from "../../../../telemetry/constants"; import ExpandingTextarea from "../../../atoms/form/expanding-textarea"; import { KeyedMutator } from "swr"; +import { SWRInfiniteResponse } from "swr/infinite"; import "./index.scss"; import { Overlay, useUIStatus } from "../../../../ui-context"; +// "swr/infinite" doesn't export InfiniteKeyedMutator directly +type InfiniteKeyedMutator = SWRInfiniteResponse< + T extends (infer I)[] ? I : T +>["mutate"]; + const addValue = "add"; export default function BookmarkMenu({ @@ -34,7 +40,7 @@ export default function BookmarkMenu({ }: { doc?: Doc | DocMetadata; item?: Item; - scopedMutator?: KeyedMutator; + scopedMutator?: KeyedMutator | InfiniteKeyedMutator; }) { const [show, setShow] = useState(false); const [disableAutoClose, setDisableAutoClose] = useState(false); @@ -101,7 +107,7 @@ function BookmarkMenuDropdown({ setSaved: React.Dispatch>; setDisableAutoClose: React.Dispatch>; item?: Item; - scopedMutator?: KeyedMutator; + scopedMutator?: KeyedMutator | InfiniteKeyedMutator; }) { const { data: collections } = useCollections(); const { data: savedItems } = useBookmark(doc.mdn_url); diff --git a/client/src/ui/organisms/article-actions/index.tsx b/client/src/ui/organisms/article-actions/index.tsx index 541c7646a059..40dbafd55de7 100644 --- a/client/src/ui/organisms/article-actions/index.tsx +++ b/client/src/ui/organisms/article-actions/index.tsx @@ -12,8 +12,14 @@ import BookmarkMenu from "./bookmark-menu"; import { Overlay, useUIStatus } from "../../../ui-context"; import { useEffect, useState } from "react"; import { KeyedMutator } from "swr"; +import { SWRInfiniteResponse } from "swr/infinite"; import { Item } from "../../../plus/collections/api"; +// "swr/infinite" doesn't export InfiniteKeyedMutator directly +type InfiniteKeyedMutator = SWRInfiniteResponse< + T extends (infer I)[] ? I : T +>["mutate"]; + export const ArticleActions = ({ doc, showTranslations = true, @@ -23,7 +29,7 @@ export const ArticleActions = ({ doc?: Doc | DocMetadata; showTranslations?: boolean; item?: Item; - scopedMutator?: KeyedMutator; + scopedMutator?: KeyedMutator | InfiniteKeyedMutator; }) => { const [showArticleActionsMenu, setShowArticleActionsMenu] = useState(false); const userData = useUserData(); diff --git a/package.json b/package.json index 324ff91b242d..6d89e72e907b 100644 --- a/package.json +++ b/package.json @@ -251,7 +251,7 @@ "stylelint-order": "^6.0.4", "stylelint-prettier": "^4.1.0", "stylelint-scss": "^5.3.2", - "swr": "^2.2.4", + "swr": "^2.2.5", "tailwindcss": "^3.4.1", "terser-webpack-plugin": "^5.3.10", "ts-jest": "^29.1.2", diff --git a/yarn.lock b/yarn.lock index b3fd8ce3f258..d81da3cd6df0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14441,10 +14441,10 @@ svgo@^3.2.0: csso "^5.0.5" picocolors "^1.0.0" -swr@^2.2.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07" - integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ== +swr@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.5.tgz#063eea0e9939f947227d5ca760cc53696f46446b" + integrity sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg== dependencies: client-only "^0.0.1" use-sync-external-store "^1.2.0"