refactor: move favorite libs to indexdb library

Author: maxy-shpfy

src/components/shared/Dialogs/ComponentDuplicateDialog.test.tsx

@@ -40,15 +40,13 @@ const createMockComponentLibraryContext = (
     componentLibrary: undefined,
     userComponentsFolder,
     usedComponentsFolder: { name: "Used", components: [] },
-    favoritesFolder: { name: "Favorites", components: [] },
     isLoading: false,
     error: null,
     existingComponentLibraries: undefined,
     searchResult: null,
     searchComponentLibrary: vi.fn(),
     addToComponentLibrary: vi.fn(),
     removeFromComponentLibrary: vi.fn(),
-    setComponentFavorite: vi.fn(),
     checkIfUserComponent: vi.fn().mockReturnValue(false),
     getComponentLibrary: vi.fn(),
   };

src/components/shared/FavoriteComponentToggle.tsx

@@ -14,10 +14,7 @@ import { Spinner } from "@/components/ui/spinner";
 import { useGuaranteedHydrateComponentReference } from "@/hooks/useHydrateComponentReference";
 import { cn } from "@/lib/utils";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
-import {
-  flattenFolders,
-  isFavoriteComponent,
-} from "@/providers/ComponentLibraryProvider/componentLibrary";
+import { flattenFolders } from "@/providers/ComponentLibraryProvider/componentLibrary";
 import { hydrateComponentReference } from "@/services/componentService";
 import { type ComponentReference } from "@/utils/componentSpec";
 import { MINUTES } from "@/utils/constants";
@@ -108,17 +105,26 @@ const FavoriteToggleButton = withSuspenseWrapper(
   ({ component }: { component: ComponentReference }) => {
     const queryClient = useQueryClient();
 
-    const { setComponentFavorite } = useComponentLibrary();
+    const { getComponentLibrary } = useComponentLibrary();
+    const favoriteComponentsLibrary = getComponentLibrary(
+      "favorite_components",
+    );
     const hydratedComponent = useGuaranteedHydrateComponentReference(component);
 
     const { data: isFavorited } = useSuspenseQuery({
       queryKey: favoriteComponentKey(hydratedComponent),
-      queryFn: async () => isFavoriteComponent(hydratedComponent),
+      queryFn: async () =>
+        favoriteComponentsLibrary.hasComponent(hydratedComponent),
     });
 
     const { mutate: setFavorite } = useMutation({
-      mutationFn: async () =>
-        setComponentFavorite(hydratedComponent, !isFavorited),
+      mutationFn: async () => {
+        if (isFavorited) {
+          await favoriteComponentsLibrary.removeComponent(hydratedComponent);
+        } else {
+          await favoriteComponentsLibrary.addComponent(hydratedComponent);
+        }
+      },
       onSuccess: () => {
         queryClient.invalidateQueries({
           queryKey: favoriteComponentKey(hydratedComponent),

src/components/shared/ReactFlow/FlowSidebar/sections/GraphComponents.tsx

@@ -39,7 +39,6 @@ const GraphComponents = ({ isOpen }: { isOpen: boolean }) => {
   const remoteComponentLibrarySearchEnabled = useBetaFlagValue(
     "remote-component-library-search",
   );
-
   const { updateSearchFilter, currentSearchFilter } = useForcedSearchContext();
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -121,20 +120,20 @@ function ComponentLibrarySection() {
   const remoteComponentLibrarySearchEnabled = useBetaFlagValue(
     "remote-component-library-search",
   );
-
   const githubComponentLibraryEnabled = useBetaFlagValue(
     "github-component-library",
   );
 
   const { getComponentLibrary, existingComponentLibraries } =
     useComponentLibrary();
 
+  const favoriteComponentsLibrary = getComponentLibrary("favorite_components");
+
   const { updateSearchFilter } = useForcedSearchContext();
   const {
     componentLibrary,
     usedComponentsFolder,
     userComponentsFolder,
-    favoritesFolder,
     isLoading,
     error,
     searchResult,
@@ -165,9 +164,6 @@ function ComponentLibrarySection() {
     usedComponentsFolder?.components &&
     usedComponentsFolder.components.length > 0;
 
-  const hasFavouriteComponents =
-    favoritesFolder?.components && favoritesFolder.components.length > 0;
-
   const hasUserComponents =
     userComponentsFolder?.components &&
     userComponentsFolder.components.length > 0;
@@ -184,13 +180,13 @@ function ComponentLibrarySection() {
             icon="LayoutGrid"
           />
         )}
-        {hasFavouriteComponents && (
-          <FolderItem
-            key="favorite-components-folder"
-            folder={favoritesFolder}
-            icon="Star"
-          />
-        )}
+
+        <LibraryFolderItem
+          key="favorite-components-folder-v2"
+          library={favoriteComponentsLibrary}
+          icon="Star"
+        />
+
         {hasUserComponents && (
           <FolderItem
             key="my-components-folder"

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.test.tsx

@@ -67,14 +67,9 @@ const mockImportComponent = vi.mocked(componentStore.importComponent);
 const mockDeleteComponentFileFromList = vi.mocked(
   componentStore.deleteComponentFileFromList,
 );
-const mockUpdateComponentRefInList = vi.mocked(
-  componentStore.updateComponentRefInList,
-);
-const mockGetComponentByUrl = vi.mocked(localforage.getComponentByUrl);
 const mockGetUserComponentByName = vi.mocked(
   localforage.getUserComponentByName,
 );
-const mockSaveComponent = vi.mocked(localforage.saveComponent);
 const mockGetComponentName = vi.mocked(getComponentName.getComponentName);
 
 describe("ComponentLibraryProvider - Component Management", () => {
@@ -537,82 +532,4 @@ describe("ComponentLibraryProvider - Component Management", () => {
       expect(isUserComponent).toBe(false);
     });
   });
-
-  describe("Component Favoriting", () => {
-    it("should set component as favorite for user components", async () => {
-      const userComponent: ComponentReference = {
-        name: "user-component",
-        digest: "user-digest",
-        spec: mockComponentSpec,
-        text: "user yaml content",
-      };
-
-      mockUpdateComponentRefInList.mockResolvedValue({
-        componentRef: userComponent,
-        name: "user-component",
-        data: new ArrayBuffer(0),
-        creationTime: new Date(),
-        modificationTime: new Date(),
-      } as any);
-
-      const { result } = renderHook(() => useComponentLibrary(), {
-        wrapper: createWrapper,
-      });
-
-      await waitFor(() => {
-        expect(result.current.isLoading).toBe(false);
-      });
-
-      await act(async () => {
-        await result.current.setComponentFavorite(userComponent, true);
-      });
-
-      expect(mockUpdateComponentRefInList).toHaveBeenCalledWith(
-        USER_COMPONENTS_LIST_NAME,
-        expect.objectContaining({ favorited: true }),
-        "user-component",
-      );
-    });
-
-    it("should set component as favorite for standard components", async () => {
-      const standardComponent: ComponentReference = {
-        name: "standard-component",
-        digest: "standard-digest",
-        url: "https://example.com/standard.yaml",
-        spec: mockComponentSpec,
-      };
-
-      const mockStoredComponent = {
-        id: "stored-1",
-        url: "https://example.com/standard.yaml",
-        data: "stored yaml",
-        createdAt: Date.now(),
-        updatedAt: Date.now(),
-        favorited: false,
-      };
-
-      mockGetComponentByUrl.mockResolvedValue(mockStoredComponent);
-      mockSaveComponent.mockResolvedValue(mockStoredComponent as any);
-
-      const { result } = renderHook(() => useComponentLibrary(), {
-        wrapper: createWrapper,
-      });
-
-      await waitFor(() => {
-        expect(result.current.isLoading).toBe(false);
-      });
-
-      await act(async () => {
-        await result.current.setComponentFavorite(standardComponent, true);
-      });
-
-      expect(mockGetComponentByUrl).toHaveBeenCalledWith(
-        "https://example.com/standard.yaml",
-      );
-      expect(mockSaveComponent).toHaveBeenCalledWith({
-        ...mockStoredComponent,
-        favorited: true,
-      });
-    });
-  });
 });