1 files changed, 21 insertions, 58 deletions

diff --git a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
index bfe6d53f..3b8a6700 100644
--- a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
@@ -16,21 +16,15 @@ import {
   FormItem,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import LoadingSpinner from "@/components/ui/spinner";
 import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { useAddBookmarkToList } from "@hoarder/shared-react/hooks/lists";
+
+import { BookmarkListSelector } from "../lists/BookmarkListSelector";
+
 export default function AddToListModal({
   bookmarkId,
   open,
@@ -49,20 +43,13 @@ export default function AddToListModal({
     resolver: zodResolver(formSchema),
   });
 
-  const { data: lists, isPending: isFetchingListsPending } =
-    api.lists.list.useQuery();
-
-  const bookmarksInvalidationFunction =
-    api.useUtils().bookmarks.getBookmarks.invalidate;
-
   const { mutate: addToList, isPending: isAddingToListPending } =
-    api.lists.addToList.useMutation({
-      onSuccess: (_resp, req) => {
+    useAddBookmarkToList({
+      onSuccess: () => {
         toast({
           description: "List has been updated!",
         });
         setOpen(false);
-        bookmarksInvalidationFunction({ listId: req.listId });
       },
       onError: (e) => {
         if (e.data?.code == "BAD_REQUEST") {
@@ -79,8 +66,6 @@ export default function AddToListModal({
       },
     });
 
-  const isPending = isFetchingListsPending || isAddingToListPending;
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
@@ -98,42 +83,20 @@ export default function AddToListModal({
             </DialogHeader>
 
             <div className="py-4">
-              {lists ? (
-                <FormField
-                  control={form.control}
-                  name="listId"
-                  render={({ field }) => {
-                    return (
-                      <FormItem>
-                        <FormControl>
-                          <Select onValueChange={field.onChange}>
-                            <SelectTrigger className="w-full">
-                              <SelectValue placeholder="Select a list" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectGroup>
-                                {lists?.lists.map((l) => (
-                                  <SelectItem key={l.id} value={l.id}>
-                                    {l.icon} {l.name}
-                                  </SelectItem>
-                                ))}
-                                {lists && lists.lists.length == 0 && (
-                                  <SelectItem value="nolist" disabled>
-                                    You don&apos;t currently have any lists.
-                                  </SelectItem>
-                                )}
-                              </SelectGroup>
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    );
-                  }}
-                />
-              ) : (
-                <LoadingSpinner />
-              )}
+              <FormField
+                control={form.control}
+                name="listId"
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormControl>
+                        <BookmarkListSelector onChange={field.onChange} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
             </div>
             <DialogFooter className="sm:justify-end">
               <DialogClose asChild>
@@ -144,7 +107,7 @@ export default function AddToListModal({
               <ActionButton
                 type="submit"
                 loading={isAddingToListPending}
-                disabled={isPending}
+                disabled={isAddingToListPending}
               >
                 Add
               </ActionButton>