From 1d76c05844b3a99415330636261131f2d41b255b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 9 Nov 2024 23:34:45 +0100
Subject: [PATCH] pl-fe: Migrate bookmark folders to tanstack query
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../api/hooks/statuses/use-bookmark-folder.ts | 29 +------------------
 .../hooks/statuses/use-bookmark-folders.ts    | 26 +++++++----------
 .../statuses/use-create-bookmark-folder.ts    | 20 +++++--------
 .../statuses/use-delete-bookmark-folder.ts    | 19 +++++-------
 .../statuses/use-update-bookmark-folder.ts    | 20 +++++--------
 .../components/new-folder-form.tsx            |  6 ++--
 .../src/features/bookmark-folders/index.tsx   |  2 +-
 .../pl-fe/src/features/bookmarks/index.tsx    |  4 +--
 .../modals/edit-bookmark-folder-modal.tsx     |  6 ++--
 .../modals/select-bookmark-folder-modal.tsx   |  4 +--
 packages/pl-fe/tailwind/colors.ts             |  2 +-
 11 files changed, 48 insertions(+), 90 deletions(-)

diff --git a/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folder.ts b/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folder.ts
index 397517553..79f145aaa 100644
--- a/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folder.ts
+++ b/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folder.ts
@@ -1,32 +1,5 @@
-import { Entities } from 'pl-fe/entity-store/entities';
-import { selectEntity } from 'pl-fe/entity-store/selectors';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
-
 import { useBookmarkFolders } from './use-bookmark-folders';
 
-import type{ BookmarkFolder } from 'pl-api';
-
-const useBookmarkFolder = (folderId?: string) => {
-  const {
-    isError,
-    isFetched,
-    isFetching,
-    isLoading,
-    invalidate,
-  } = useBookmarkFolders();
-
-  const bookmarkFolder = useAppSelector(state => folderId
-    ? selectEntity<BookmarkFolder>(state, Entities.BOOKMARK_FOLDERS, folderId)
-    : undefined);
-
-  return {
-    bookmarkFolder,
-    isError,
-    isFetched,
-    isFetching,
-    isLoading,
-    invalidate,
-  };
-};
+const useBookmarkFolder = (folderId?: string) => useBookmarkFolders((data) => folderId ? data.find(folder => folder.id === folderId) : undefined);
 
 export { useBookmarkFolder };
diff --git a/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folders.ts b/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folders.ts
index f936e4f19..7e857b1ac 100644
--- a/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folders.ts
+++ b/packages/pl-fe/src/api/hooks/statuses/use-bookmark-folders.ts
@@ -1,26 +1,22 @@
-import { Entities } from 'pl-fe/entity-store/entities';
-import { useEntities } from 'pl-fe/entity-store/hooks/use-entities';
+import { useQuery } from '@tanstack/react-query';
+
 import { useClient } from 'pl-fe/hooks/use-client';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 
 import type { BookmarkFolder } from 'pl-api';
 
-const useBookmarkFolders = () => {
+const useBookmarkFolders = <T>(
+  select?: ((data: Array<BookmarkFolder>) => T),
+) => {
   const client = useClient();
   const features = useFeatures();
 
-  const { entities, ...result } = useEntities<BookmarkFolder>(
-    [Entities.BOOKMARK_FOLDERS],
-    () => client.myAccount.getBookmarkFolders(),
-    { enabled: features.bookmarkFolders },
-  );
-
-  const bookmarkFolders = entities;
-
-  return {
-    ...result,
-    bookmarkFolders,
-  };
+  return useQuery({
+    queryKey: ['bookmarkFolders'],
+    queryFn: () => client.myAccount.getBookmarkFolders(),
+    enabled: features.bookmarkFolders,
+    select,
+  });
 };
 
 export { useBookmarkFolders };
diff --git a/packages/pl-fe/src/api/hooks/statuses/use-create-bookmark-folder.ts b/packages/pl-fe/src/api/hooks/statuses/use-create-bookmark-folder.ts
index 8f351906b..0cc9acfc8 100644
--- a/packages/pl-fe/src/api/hooks/statuses/use-create-bookmark-folder.ts
+++ b/packages/pl-fe/src/api/hooks/statuses/use-create-bookmark-folder.ts
@@ -1,6 +1,7 @@
-import { Entities } from 'pl-fe/entity-store/entities';
-import { useCreateEntity } from 'pl-fe/entity-store/hooks/use-create-entity';
+import { useMutation } from '@tanstack/react-query';
+
 import { useClient } from 'pl-fe/hooks/use-client';
+import { queryClient } from 'pl-fe/queries/client';
 
 interface CreateBookmarkFolderParams {
   name: string;
@@ -10,16 +11,11 @@ interface CreateBookmarkFolderParams {
 const useCreateBookmarkFolder = () => {
   const client = useClient();
 
-  const { createEntity, ...rest } = useCreateEntity(
-    [Entities.BOOKMARK_FOLDERS],
-    (params: CreateBookmarkFolderParams) =>
-      client.myAccount.createBookmarkFolder(params),
-  );
-
-  return {
-    createBookmarkFolder: createEntity,
-    ...rest,
-  };
+  return useMutation({
+    mutationKey: ['bookmarkFolders', 'create'],
+    mutationFn: (params: CreateBookmarkFolderParams) => client.myAccount.createBookmarkFolder(params),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: ['bookmarkFolders'] }),
+  });
 };
 
 export { useCreateBookmarkFolder };
diff --git a/packages/pl-fe/src/api/hooks/statuses/use-delete-bookmark-folder.ts b/packages/pl-fe/src/api/hooks/statuses/use-delete-bookmark-folder.ts
index feaf10793..9c96d5786 100644
--- a/packages/pl-fe/src/api/hooks/statuses/use-delete-bookmark-folder.ts
+++ b/packages/pl-fe/src/api/hooks/statuses/use-delete-bookmark-folder.ts
@@ -1,19 +1,16 @@
-import { Entities } from 'pl-fe/entity-store/entities';
-import { useDeleteEntity } from 'pl-fe/entity-store/hooks/use-delete-entity';
+import { useMutation } from '@tanstack/react-query';
+
 import { useClient } from 'pl-fe/hooks/use-client';
+import { queryClient } from 'pl-fe/queries/client';
 
 const useDeleteBookmarkFolder = () => {
   const client = useClient();
 
-  const { deleteEntity, isSubmitting } = useDeleteEntity(
-    Entities.BOOKMARK_FOLDERS,
-    (folderId: string) => client.myAccount.deleteBookmarkFolder(folderId),
-  );
-
-  return {
-    deleteBookmarkFolder: deleteEntity,
-    isSubmitting,
-  };
+  return useMutation({
+    mutationKey: ['bookmarkFolders', 'delete'],
+    mutationFn: (folderId: string) => client.myAccount.deleteBookmarkFolder(folderId),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: ['bookmarkFolders'] }),
+  });
 };
 
 export { useDeleteBookmarkFolder };
diff --git a/packages/pl-fe/src/api/hooks/statuses/use-update-bookmark-folder.ts b/packages/pl-fe/src/api/hooks/statuses/use-update-bookmark-folder.ts
index 4fa91b784..13c6b28e9 100644
--- a/packages/pl-fe/src/api/hooks/statuses/use-update-bookmark-folder.ts
+++ b/packages/pl-fe/src/api/hooks/statuses/use-update-bookmark-folder.ts
@@ -1,6 +1,7 @@
-import { Entities } from 'pl-fe/entity-store/entities';
-import { useCreateEntity } from 'pl-fe/entity-store/hooks/use-create-entity';
+import { useMutation } from '@tanstack/react-query';
+
 import { useClient } from 'pl-fe/hooks/use-client';
+import { queryClient } from 'pl-fe/queries/client';
 
 interface UpdateBookmarkFolderParams {
   name: string;
@@ -10,16 +11,11 @@ interface UpdateBookmarkFolderParams {
 const useUpdateBookmarkFolder = (folderId: string) => {
   const client = useClient();
 
-  const { createEntity, ...rest } = useCreateEntity(
-    [Entities.BOOKMARK_FOLDERS],
-    (params: UpdateBookmarkFolderParams) =>
-      client.myAccount.updateBookmarkFolder(folderId, params),
-  );
-
-  return {
-    updateBookmarkFolder: createEntity,
-    ...rest,
-  };
+  return useMutation({
+    mutationKey: ['bookmarkFolders', 'update', folderId],
+    mutationFn: (params: UpdateBookmarkFolderParams) => client.myAccount.updateBookmarkFolder(folderId, params),
+    onSettled: () => queryClient.invalidateQueries({ queryKey: ['bookmarkFolders'] }),
+  });
 };
 
 export { useUpdateBookmarkFolder };
diff --git a/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx b/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx
index 0a8c93a02..4726af8c9 100644
--- a/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx
+++ b/packages/pl-fe/src/features/bookmark-folders/components/new-folder-form.tsx
@@ -20,7 +20,7 @@ const NewFolderForm: React.FC = () => {
 
   const name = useTextField();
 
-  const { createBookmarkFolder, isSubmitting } = useCreateBookmarkFolder();
+  const { mutate: createBookmarkFolder, isPending } = useCreateBookmarkFolder();
 
   const handleSubmit = (e: React.FormEvent<Element>) => {
     e.preventDefault();
@@ -47,13 +47,13 @@ const NewFolderForm: React.FC = () => {
           <Input
             type='text'
             placeholder={label}
-            disabled={isSubmitting}
+            disabled={isPending}
             {...name}
           />
         </label>
 
         <Button
-          disabled={isSubmitting}
+          disabled={isPending}
           onClick={handleSubmit}
           theme='primary'
         >
diff --git a/packages/pl-fe/src/features/bookmark-folders/index.tsx b/packages/pl-fe/src/features/bookmark-folders/index.tsx
index 184ecd86a..450baf5d3 100644
--- a/packages/pl-fe/src/features/bookmark-folders/index.tsx
+++ b/packages/pl-fe/src/features/bookmark-folders/index.tsx
@@ -22,7 +22,7 @@ const BookmarkFolders: React.FC = () => {
   const intl = useIntl();
   const features = useFeatures();
 
-  const { bookmarkFolders, isFetching } = useBookmarkFolders();
+  const { data: bookmarkFolders, isFetching } = useBookmarkFolders(data => data);
 
   if (!features.bookmarkFolders) return <Redirect to='/bookmarks/all' />;
 
diff --git a/packages/pl-fe/src/features/bookmarks/index.tsx b/packages/pl-fe/src/features/bookmarks/index.tsx
index 214931832..cf7648dd7 100644
--- a/packages/pl-fe/src/features/bookmarks/index.tsx
+++ b/packages/pl-fe/src/features/bookmarks/index.tsx
@@ -49,8 +49,8 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
   const folderId = params?.id;
 
   const { openModal } = useModalsStore();
-  const { bookmarkFolder: folder } = useBookmarkFolder(folderId);
-  const { deleteBookmarkFolder } = useDeleteBookmarkFolder();
+  const { data: folder } = useBookmarkFolder(folderId);
+  const { mutate: deleteBookmarkFolder } = useDeleteBookmarkFolder();
 
   const bookmarksKey = folderId ? `bookmarks:${folderId}` : 'bookmarks';
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 20843a303..c8d974995 100644
--- a/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -98,8 +98,8 @@ interface EditBookmarkFolderModalProps {
 const EditBookmarkFolderModal: React.FC<BaseModalProps & EditBookmarkFolderModalProps> = ({ folderId, onClose }) => {
   const intl = useIntl();
 
-  const { bookmarkFolder } = useBookmarkFolder(folderId);
-  const { updateBookmarkFolder, isSubmitting } = useUpdateBookmarkFolder(folderId);
+  const { data: bookmarkFolder } = useBookmarkFolder(folderId);
+  const { mutate: updateBookmarkFolder, isPending } = useUpdateBookmarkFolder(folderId);
 
   const [emoji, setEmoji] = useState(bookmarkFolder?.emoji || undefined);
   const [emojiUrl, setEmojiUrl] = useState(bookmarkFolder?.emoji_url || undefined);
@@ -154,7 +154,7 @@ const EditBookmarkFolderModal: React.FC<BaseModalProps & EditBookmarkFolderModal
           <Input
             type='text'
             placeholder={label}
-            disabled={isSubmitting}
+            disabled={isPending}
             {...name}
           />
         </label>
diff --git a/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 6c93d49fa..b0f861254 100644
--- a/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -28,7 +28,7 @@ const SelectBookmarkFolderModal: React.FC<SelectBookmarkFolderModalProps & BaseM
 
   const [selectedFolder, setSelectedFolder] = useState(status.bookmark_folder);
 
-  const { isFetching, bookmarkFolders } = useBookmarkFolders();
+  const { isFetching, data: bookmarkFolders } = useBookmarkFolders(data => data);
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     const folderId = e.target.value;
@@ -58,7 +58,7 @@ const SelectBookmarkFolderModal: React.FC<SelectBookmarkFolderModalProps & BaseM
   ];
 
   if (!isFetching) {
-    items.push(...(bookmarkFolders.map((folder) => (
+    items.push(...((bookmarkFolders || []).map((folder) => (
       <RadioItem
         key={folder.id}
         label={
diff --git a/packages/pl-fe/tailwind/colors.ts b/packages/pl-fe/tailwind/colors.ts
index fd88d9a6c..bfb21718b 100644
--- a/packages/pl-fe/tailwind/colors.ts
+++ b/packages/pl-fe/tailwind/colors.ts
@@ -1,4 +1,4 @@
-import type{ RecursiveKeyValuePair } from 'tailwindcss/types/config';
+import type { RecursiveKeyValuePair } from 'tailwindcss/types/config';
 
 /** https://tailwindcss.com/docs/customizing-colors#using-css-variables */
 const withOpacityValue = (variable: string): string => `rgb(var(${variable}) / <alpha-value>)`;