refactor: update methods for adding url and checking existing collections a card is in

Use getUrlStatusForMyLibrary and addUrlToLibrary

src/webapp/features/cards/components/addCardToModal/AddCardToModal.tsx

···
   Alert,
 } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
 import { Fragment, useState } from 'react';
 import { IoSearch } from 'react-icons/io5';
 import { BiPlus } from 'react-icons/bi';
-import useMyCollections from '../../../collections/lib/queries/useMyCollections';
-import useCard from '@/features/cards/lib/queries/useGetCard';
-import { notifications } from '@mantine/notifications';
 import CollectionSelectorError from '../../../collections/components/collectionSelector/Error.CollectionSelector';
 import CollectionSelectorItemList from '../../../collections/components/collectionSelectorItemList/CollectionSelectorItemList';
 import CreateCollectionDrawer from '../../../collections/components/createCollectionDrawer/CreateCollectionDrawer';
 import CardToBeAddedPreview from './CardToBeAddedPreview';
 import useAddCardToLibrary from '../../lib/mutations/useAddCardToLibrary';
-import useGetLibrariesForCard from '../../lib/queries/useGetLibrariesForcard';
-import { useAuth } from '@/hooks/useAuth';
+import useGetCardFromMyLibrary from '../../lib/queries/useGetCardFromMyLibrary';
+import useMyCollections from '../../../collections/lib/queries/useMyCollections';
 
 interface Props {
   isOpen: boolean;
···
 }
 
 export default function AddCardToModal(props: Props) {
-  const { user, isLoading: isLoadingUser } = useAuth();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const [search, setSearch] = useState<string>('');
   const [debouncedSearch] = useDebouncedValue(search, 200);
   const searchedCollections = useCollectionSearch({ query: debouncedSearch });
 
-  const libraries = useGetLibrariesForCard({ id: props.cardId });
-  const isInUserLibrary = libraries.data.users.some((u) => u.id === user?.id);
+  const addCardToLibrary = useAddCardToLibrary();
 
-  const addCardToLibrary = useAddCardToLibrary();
-  const card = useCard({ id: props.cardId });
+  const cardStaus = useGetCardFromMyLibrary({ url: props.cardContent.url });
   const { data, error } = useMyCollections();
   const [selectedCollections, setSelectedCollections] = useState<
     SelectableCollectionItem[]
···
     data?.pages.flatMap((page) => page.collections ?? []) ?? [];
 
   const collectionsWithCard = allCollections.filter((c) =>
-    card.data?.collections.some((col) => col.id === c.id),
+    cardStaus.data.collections?.some((col) => col.id === c.id),
   );
 
   const collectionsWithoutCard = allCollections.filter(
     (c) => !collectionsWithCard.some((col) => col.id === c.id),
   );
+
+  const isInUserLibrary = collectionsWithCard.length > 0;
 
   const hasCollections = allCollections.length > 0;
   const hasSelectedCollections = selectedCollections.length > 0;
···
 
     addCardToLibrary.mutate(
       {
-        cardId: props.cardId,
+        url: props.cardContent.url,
         collectionIds: selectedCollections.map((c) => c.id),
       },
       {
···
                 onClick={handleAddCard}
                 // disabled when:
                 // user already has the card in a collection (and therefore in library)
-                // and when it's already in library and no new collection is selected yet
-                disabled={
-                  isLoadingUser ||
-                  (isInUserLibrary && selectedCollections.length === 0)
-                }
+                // and no new collection is selected yet
+                disabled={isInUserLibrary && selectedCollections.length === 0}
                 loading={addCardToLibrary.isPending}
               >
                 Add

src/webapp/features/cards/components/addCardToModal/CardToBeAddedPreview.tsx

···
   Anchor,
 } from '@mantine/core';
 import Link from 'next/link';
-import { GetCollectionsResponse, UrlCardView } from '@/api-client/types';
+import {
+  GetUrlStatusForMyLibraryResponse,
+  UrlCardView,
+} from '@/api-client/types';
 import { BiCollection } from 'react-icons/bi';
 import { LuLibrary } from 'react-icons/lu';
 import { getDomain } from '@/lib/utils/link';
 import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
 import { getRecordKey } from '@/lib/utils/atproto';
+import { Fragment } from 'react';
 
 interface Props {
   cardId: string;
   cardContent: UrlCardView['cardContent'];
-  collectionsWithCard: GetCollectionsResponse['collections'];
+  collectionsWithCard: GetUrlStatusForMyLibraryResponse['collections'];
   isInLibrary: boolean;
 }
 
···
             In Library
           </Button>
         )}
-        {props.collectionsWithCard.length > 0 && (
+        {props.collectionsWithCard && props.collectionsWithCard.length > 0 && (
           <Menu shadow="sm">
             <Menu.Target>
               <Button
···
             <Menu.Dropdown maw={380}>
               <ScrollArea.Autosize mah={150} type="auto">
                 {props.collectionsWithCard.map((c) => (
-                  <Menu.Item
-                    key={c.id}
-                    component={Link}
-                    href={`/profile/${c.createdBy.handle}/collections/${getRecordKey(c.uri!)}`}
-                    target="_blank"
-                    c="blue"
-                    fw={600}
-                  >
-                    {c.name}
-                  </Menu.Item>
+                  <Fragment key={c.id}>
+                    {c.uri && (
+                      <Menu.Item
+                        component={Link}
+                        href={`/profile/${profile.handle}/collections/${getRecordKey(c.uri)}`}
+                        target="_blank"
+                        c="blue"
+                        fw={600}
+                      >
+                        {c.name}
+                      </Menu.Item>
+                    )}
+                  </Fragment>
                 ))}
               </ScrollArea.Autosize>
             </Menu.Dropdown>

src/webapp/features/cards/lib/mutations/useAddCardToLibrary.tsx

···
 
   const mutation = useMutation({
     mutationFn: ({
-      cardId,
+      url,
+      note,
       collectionIds,
     }: {
-      cardId: string;
+      url: string;
+      note?: string;
       collectionIds: string[];
     }) => {
-      return apiClient.addCardToLibrary({ cardId, collectionIds });
+      return apiClient.addUrlToLibrary({ url, note, collectionIds });
     },
 
-    onSuccess: (_data, variables) => {
-      queryClient.invalidateQueries({ queryKey: ['card', variables.cardId] });
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['card', data.urlCardId] });
+      queryClient.invalidateQueries({ queryKey: ['card', data.noteCardId] });
+      queryClient.invalidateQueries({ queryKey: ['card', variables.url] });
       queryClient.invalidateQueries({ queryKey: ['my cards'] });
       queryClient.invalidateQueries({ queryKey: ['home'] });
       queryClient.invalidateQueries({ queryKey: ['collections'] });

src/webapp/features/cards/lib/queries/useGetCard.tsx

···
   id: string;
 }
 
-export default function useCard(props: Props) {
+export default function useGetCard(props: Props) {
   const apiClient = new ApiClient(
     process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000',
     createClientTokenManager(),

src/webapp/features/cards/lib/queries/useGetCardFromMyLibrary.tsx

···
+import { ApiClient } from '@/api-client/ApiClient';
+import { createClientTokenManager } from '@/services/auth';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+interface Props {
+  url: string;
+}
+
+export default function useGetCardFromMyLibrary(props: Props) {
+  const apiClient = new ApiClient(
+    process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000',
+    createClientTokenManager(),
+  );
+
+  const cardStatus = useSuspenseQuery({
+    queryKey: ['card from my library', props.url],
+    queryFn: () => apiClient.getUrlStatusForMyLibrary({ url: props.url }),
+  });
+
+  return cardStatus;
+}

src/webapp/features/collections/components/addToCollectionModal/AddToCollectionModal.tsx

···
-import { UrlCardView } from '@/api-client/types';
-import useCollectionSearch from '../../lib/queries/useCollectionSearch';
-import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
-import {
-  Group,
-  Modal,
-  Stack,
-  Text,
-  TextInput,
-  CloseButton,
-  Tabs,
-  ScrollArea,
-  Button,
-  Loader,
-  Alert,
-} from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
-import { Fragment, useState } from 'react';
-import { IoSearch } from 'react-icons/io5';
-import { BiPlus } from 'react-icons/bi';
-import useMyCollections from '../../lib/queries/useMyCollections';
-import useCard from '@/features/cards/lib/queries/useGetCard';
-import useAddCardToCollection from '@/features/collections/lib/mutations/useAddCardToCollection';
-import { notifications } from '@mantine/notifications';
-import CollectionSelectorError from '../collectionSelector/Error.CollectionSelector';
-import CardToBeAddedPreview from './CardToBeAddedPreview';
-import CollectionSelectorItemList from '../collectionSelectorItemList/CollectionSelectorItemList';
-import CreateCollectionDrawer from '../createCollectionDrawer/CreateCollectionDrawer';
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  cardContent: UrlCardView['cardContent'];
-  cardId: string;
-}
-
-export default function AddToCollectionModal(props: Props) {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-
-  const [search, setSearch] = useState<string>('');
-  const [debouncedSearch] = useDebouncedValue(search, 200);
-  const searchedCollections = useCollectionSearch({ query: debouncedSearch });
-
-  const addCardToCollection = useAddCardToCollection();
-  const card = useCard({ id: props.cardId });
-  const { data, error } = useMyCollections();
-  const [selectedCollections, setSelectedCollections] = useState<
-    SelectableCollectionItem[]
-  >([]);
-
-  const handleCollectionChange = (
-    checked: boolean,
-    item: SelectableCollectionItem,
-  ) => {
-    if (checked) {
-      if (!selectedCollections.some((col) => col.id === item.id)) {
-        setSelectedCollections([...selectedCollections, item]);
-      }
-    } else {
-      setSelectedCollections(
-        selectedCollections.filter((col) => col.id !== item.id),
-      );
-    }
-  };
-
-  const allCollections =
-    data?.pages.flatMap((page) => page.collections ?? []) ?? [];
-
-  const collectionsWithCard = allCollections.filter((c) =>
-    card.data?.collections.some((col) => col.id === c.id),
-  );
-
-  const collectionsWithoutCard = allCollections.filter(
-    (c) => !collectionsWithCard.some((col) => col.id === c.id),
-  );
-
-  const hasCollections = allCollections.length > 0;
-  const hasSelectedCollections = selectedCollections.length > 0;
-
-  const handleAddCardToCollection = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    addCardToCollection.mutate(
-      {
-        cardId: props.cardId,
-        collectionIds: selectedCollections.map((c) => c.id),
-      },
-      {
-        onSuccess: () => {
-          setSelectedCollections([]);
-          props.onClose();
-        },
-        onError: () => {
-          notifications.show({
-            message: 'Could not add card.',
-          });
-        },
-        onSettled: () => {
-          setSelectedCollections([]);
-          props.onClose();
-        },
-      },
-    );
-  };
-
-  if (error) {
-    return <CollectionSelectorError />;
-  }
-
-  return (
-    <Modal
-      opened={props.isOpen}
-      onClose={props.onClose}
-      title="Add to Collections"
-      overlayProps={DEFAULT_OVERLAY_PROPS}
-      centered
-    >
-      <Stack gap={'xl'}>
-        <CardToBeAddedPreview
-          cardContent={props.cardContent}
-          collectionsWithCard={collectionsWithCard}
-        />
-
-        <Stack gap={'md'}>
-          <TextInput
-            placeholder="Search for collections"
-            value={search}
-            onChange={(e) => {
-              setSearch(e.currentTarget.value);
-            }}
-            size="md"
-            variant="filled"
-            id="search"
-            leftSection={<IoSearch size={22} />}
-            rightSection={
-              <CloseButton
-                aria-label="Clear input"
-                onClick={() => setSearch('')}
-                style={{ display: search ? undefined : 'none' }}
-              />
-            }
-          />
-          <Stack gap={'xl'}>
-            <Tabs defaultValue={'collections'}>
-              <Tabs.List grow>
-                <Tabs.Tab value="collections">Collections</Tabs.Tab>
-                <Tabs.Tab value="selected">
-                  Selected ({selectedCollections.length})
-                </Tabs.Tab>
-              </Tabs.List>
-
-              <Tabs.Panel value="collections" my="xs" w="100%">
-                <ScrollArea.Autosize mah={200} type="auto">
-                  <Stack gap="xs">
-                    {search ? (
-                      <Fragment>
-                        <Button
-                          variant="light"
-                          size="md"
-                          color="grape"
-                          radius="lg"
-                          leftSection={<BiPlus size={22} />}
-                          onClick={() => setIsDrawerOpen(true)}
-                        >
-                          Create new collection "{search}"
-                        </Button>
-
-                        {searchedCollections.isPending && (
-                          <Stack align="center">
-                            <Text fw={500} c="gray">
-                              Searching collections...
-                            </Text>
-                            <Loader color="gray" />
-                          </Stack>
-                        )}
-
-                        {searchedCollections.data &&
-                          (searchedCollections.data.collections.length === 0 ? (
-                            <Alert
-                              color="gray"
-                              title={`No results found for "${search}"`}
-                            />
-                          ) : (
-                            <CollectionSelectorItemList
-                              collections={searchedCollections.data.collections}
-                              collectionsWithCard={collectionsWithCard}
-                              selectedCollections={selectedCollections}
-                              onChange={handleCollectionChange}
-                            />
-                          ))}
-                      </Fragment>
-                    ) : hasCollections ? (
-                      <CollectionSelectorItemList
-                        collections={collectionsWithoutCard}
-                        selectedCollections={selectedCollections}
-                        onChange={handleCollectionChange}
-                      />
-                    ) : (
-                      <Stack align="center" gap="xs">
-                        <Text fz="lg" fw={600} c="gray">
-                          No collections
-                        </Text>
-                        <Button
-                          onClick={() => setIsDrawerOpen(true)}
-                          variant="light"
-                          color="gray"
-                          rightSection={<BiPlus size={22} />}
-                        >
-                          Create a collection
-                        </Button>
-                      </Stack>
-                    )}
-                  </Stack>
-                </ScrollArea.Autosize>
-              </Tabs.Panel>
-
-              <Tabs.Panel value="selected" my="xs">
-                <ScrollArea.Autosize mah={200} type="auto">
-                  <Stack gap="xs">
-                    {hasSelectedCollections ? (
-                      <CollectionSelectorItemList
-                        collections={selectedCollections}
-                        selectedCollections={selectedCollections}
-                        onChange={handleCollectionChange}
-                      />
-                    ) : (
-                      <Alert color="gray" title="No collections selected" />
-                    )}
-                  </Stack>
-                </ScrollArea.Autosize>
-              </Tabs.Panel>
-            </Tabs>
-
-            <Group justify="space-between" gap="xs" grow>
-              <Button
-                variant="light"
-                color="gray"
-                size="md"
-                onClick={() => {
-                  setSelectedCollections([]);
-                  props.onClose();
-                }}
-              >
-                Cancel
-              </Button>
-              {hasSelectedCollections && (
-                <Button
-                  variant="light"
-                  color="grape"
-                  size="md"
-                  onClick={() => setSelectedCollections([])}
-                >
-                  Clear
-                </Button>
-              )}
-              <Button
-                size="md"
-                onClick={handleAddCardToCollection}
-                disabled={selectedCollections.length === 0}
-                loading={addCardToCollection.isPending}
-              >
-                Save
-              </Button>
-            </Group>
-          </Stack>
-        </Stack>
-      </Stack>
-      <CreateCollectionDrawer
-        key={search}
-        isOpen={isDrawerOpen}
-        onClose={() => setIsDrawerOpen(false)}
-        initialName={search}
-        onCreate={(newCollection) => {
-          setSelectedCollections([...selectedCollections, newCollection]);
-        }}
-      />
-    </Modal>
-  );
-}

src/webapp/features/collections/components/addToCollectionModal/CardToBeAddedPreview.tsx

···
-import {
-  AspectRatio,
-  Group,
-  Stack,
-  Image,
-  Text,
-  Card,
-  Menu,
-  Button,
-  ScrollArea,
-  Anchor,
-} from '@mantine/core';
-import { GetCollectionsResponse, UrlCardView } from '@/api-client/types';
-import Link from 'next/link';
-import { getDomain } from '@/lib/utils/link';
-import { BiSolidChevronDownCircle } from 'react-icons/bi';
-
-interface Props {
-  cardContent: UrlCardView['cardContent'];
-  collectionsWithCard: GetCollectionsResponse['collections'];
-}
-
-export default function CardToBeAddedPreview(props: Props) {
-  const domain = getDomain(props.cardContent.url);
-
-  return (
-    <Stack gap={'md'}>
-      <Card withBorder p={'xs'} radius={'lg'}>
-        <Stack>
-          <Group gap={'sm'}>
-            {props.cardContent.thumbnailUrl && (
-              <AspectRatio ratio={1 / 1} flex={0.1}>
-                <Image
-                  src={props.cardContent.thumbnailUrl}
-                  alt={`${props.cardContent.url} social preview image`}
-                  radius={'md'}
-                  w={50}
-                  h={50}
-                />
-              </AspectRatio>
-            )}
-            <Stack gap={0} flex={0.9}>
-              <Anchor
-                component={Link}
-                href={props.cardContent.url}
-                target="_blank"
-                c={'gray'}
-                lineClamp={1}
-              >
-                {domain}
-              </Anchor>
-              {props.cardContent.title && (
-                <Text fw={500} lineClamp={1}>
-                  {props.cardContent.title}
-                </Text>
-              )}
-            </Stack>
-          </Group>
-          {props.collectionsWithCard.length > 0 && (
-            <Menu shadow="sm">
-              <Menu.Target>
-                <Button
-                  variant="light"
-                  color="grape"
-                  rightSection={<BiSolidChevronDownCircle />}
-                >
-                  Already in {props.collectionsWithCard.length} collection
-                  {props.collectionsWithCard.length !== 1 && 's'}
-                </Button>
-              </Menu.Target>
-              <Menu.Dropdown maw={380}>
-                <ScrollArea.Autosize mah={150} type="auto">
-                  {props.collectionsWithCard.map((c) => (
-                    <Menu.Item
-                      key={c.id}
-                      component={Link}
-                      href={`/profile/${c.createdBy.handle}/collections/${c.id}`}
-                      target="_blank"
-                      c="blue"
-                      fw={600}
-                    >
-                      {c.name}
-                    </Menu.Item>
-                  ))}
-                </ScrollArea.Autosize>
-              </Menu.Dropdown>
-            </Menu>
-          )}
-        </Stack>
-      </Card>
-    </Stack>
-  );
-}