pl-fe: Migrate bookmark folders to tanstack query

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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 };

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 };

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 };

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 };

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 };

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'
         >

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' />;
 

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';
 

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>

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={

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>)`;