@equinor/fusion-framework-react-components-bookmark 0.5.3 → 1.0.0

package/dist/types/components/BookmarkProvider.d.ts

@@ -1,6 +1,20 @@
 import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
 import { PropsWithChildren } from 'react';
-export declare const BookmarkProvider: ({ children }: PropsWithChildren<unknown>) => import("react/jsx-runtime").JSX.Element;
+import { type BookmarkProvider as IBookmarkProvider } from '@equinor/fusion-framework-module-bookmark';
+type BookmarkApp = {
+    appKey: string;
+    name?: string;
+};
+type ProviderState = {
+    provider: IBookmarkProvider;
+    currentApp?: BookmarkApp | null;
+};
+type BookmarkProviderProps = {
+    readonly provider?: IBookmarkProvider | null;
+};
+export declare const useBookmarkComponentContext: () => ProviderState;
+export declare const useBookmarkProvider: () => IBookmarkProvider;
+export declare const BookmarkProvider: (props: PropsWithChildren<BookmarkProviderProps>) => import("react/jsx-runtime").JSX.Element | null;
 declare module '@equinor/fusion-framework-module-event' {
     interface FrameworkEventMap {
         onBookmarkOpen: FrameworkEvent<FrameworkEventInit<boolean, unknown>>;
@@ -12,3 +26,4 @@ declare module '@equinor/fusion-framework-module-event' {
         }, unknown>>;
     }
 }
+export {};

package/dist/types/components/create-bookmark/index.d.ts

@@ -1 +1 @@
-export * from './CreateBookmark';
+export { CreateBookmarkModal } from './CreateBookmark';

package/dist/types/components/edit-bookmark/EditBookmark.d.ts

@@ -1,5 +1,5 @@
 export declare const EditBookmarkModal: ({ isOpen, onClose, bookmarkId, }: {
     readonly isOpen: boolean;
     readonly onClose: (b: boolean) => void;
-    readonly bookmarkId?: string;
+    readonly bookmarkId: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/useBookmarkGrouping.d.ts

@@ -1,13 +1,49 @@
-import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
-export declare const useBookmarkGrouping: (bookmarks?: Bookmark[]) => {
+export declare const useBookmarkGrouping: (bookmarks?: Bookmarks) => {
     setGroupBy: import("react").Dispatch<import("react").SetStateAction<GroupingKeys>>;
     setSearchText: import("react").Dispatch<import("react").SetStateAction<string | null>>;
     searchText: string | null;
     bookmarkGroups: {
         groupingProperty: string;
-        values: Bookmark<unknown>[];
+        values: {
+            name: string;
+            id: string;
+            appKey: string;
+            created: Date;
+            createdBy: {
+                azureUniqueId: string;
+                name: string;
+                mail?: string | undefined;
+                phoneNumber?: string | undefined;
+                jobTitle?: string | undefined;
+                accountType?: "Employee" | "Consultant" | "External" | "Application" | "Local" | undefined;
+                accountClassification?: "External" | "Unclassified" | "Internal" | undefined;
+            };
+            description?: string | undefined;
+            isShared?: boolean | undefined;
+            updated?: Date | undefined;
+            updatedBy?: {
+                azureUniqueId: string;
+                name: string;
+                mail?: string | undefined;
+                phoneNumber?: string | undefined;
+                jobTitle?: string | undefined;
+                accountType?: "Employee" | "Consultant" | "External" | "Application" | "Local" | undefined;
+                accountClassification?: "External" | "Unclassified" | "Internal" | undefined;
+            } | undefined;
+            context?: {
+                id: string;
+                name?: string | undefined;
+                type?: string | undefined;
+            } | undefined;
+            sourceSystem?: {
+                identifier: string;
+                name?: string | undefined;
+                subSystem?: string | undefined;
+            } | undefined;
+        }[];
     }[];
-    groupingModes: Record<GroupingKeys, (_item: Bookmark) => string>;
+    groupingModes: Record<GroupingKeys, (_item: BookmarkWithoutData) => string>;
     groupByKey: GroupingKeys;
 };

package/dist/types/utils/utils.d.ts

@@ -1,7 +1,7 @@
-import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 /** Helpers.. */
 export declare const filterEmptyGroups: (i: {
-    values: Bookmark[];
+    values: Bookmarks;
 }) => number;
-export declare const sortByName: (a: Bookmark, b: Bookmark) => number;
+export declare const sortByName: (a: BookmarkWithoutData, b: BookmarkWithoutData) => number;
 export declare const toHumanReadable: (val: string) => string;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.3";
+export declare const version = "1.0.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-components-bookmark",
-  "version": "0.5.3",
+  "version": "1.0.0",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -22,8 +22,10 @@
     "directory": "packages/react/components/bookmark"
   },
   "dependencies": {
-    "@equinor/fusion-framework-react-module-bookmark": "^2.1.19",
-    "@equinor/fusion-framework-react": "^7.3.1"
+    "@equinor/fusion-observable": "^8.3.3",
+    "rxjs": "^7.8.1",
+    "@equinor/fusion-framework-react": "^7.3.2",
+    "@equinor/fusion-framework-react-module-bookmark": "^2.2.0"
   },
   "devDependencies": {
     "@equinor/eds-core-react": "^0.42.0",
@@ -35,7 +37,7 @@
     "styled-components": "^6.0.7",
     "typescript": "^5.5.4",
     "@equinor/fusion-framework-module-app": "^6.0.2",
-    "@equinor/fusion-framework-module-bookmark": "^1.2.13",
+    "@equinor/fusion-framework-module-bookmark": "^2.0.0",
     "@equinor/fusion-framework-module-event": "^4.2.4"
   },
   "peerDependencies": {

package/src/components/Bookmark.tsx

@@ -1,8 +1,8 @@
-import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import { EMPTY } from 'rxjs';
 import { useBookmarkGrouping } from '../hooks';
 import { BookmarkFilter } from './filter/Filter';
 import { SectionList } from './sectionList/SectionList';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { Icon } from '@equinor/eds-core-react';
 import { chevron_down, chevron_right, share, more_vertical, add } from '@equinor/eds-icons';
@@ -10,7 +10,8 @@ import { chevron_down, chevron_right, share, more_vertical, add } from '@equinor
 import styled from 'styled-components';
 import { Message } from './messages/Message';
 import { Loading } from './loading/Loading';
-import { useFramework } from '@equinor/fusion-framework-react';
+import { useBookmarkComponentContext } from './BookmarkProvider';
+import { useObservableState } from '@equinor/fusion-observable/react';
 
 Icon.add({
     chevron_down,
@@ -42,30 +43,52 @@ const Styled = {
 };
 
 export const Bookmark = () => {
-    const { bookmarks, getAllBookmarks } = useBookmark();
+    const { provider } = useBookmarkComponentContext();
+
     const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
 
-    const { event } = useFramework().modules;
+    const { value: bookmarks } = useObservableState(
+        useMemo(() => provider?.bookmarks$ || EMPTY, [provider]),
+        { initial: provider?.bookmarks },
+    );
 
     useEffect(() => {
-        return event.addEventListener('onBookmarksChanged', () => {
-            setLoading(false);
+        const sub = provider?.getAllBookmarks().subscribe({
+            complete: () => {
+                setLoading(false);
+            },
+            error: (err) => {
+                setError(err);
+            },
         });
-    }, [event]);
-
-    useEffect(() => {
-        if (bookmarks.length > 0) {
-            setLoading(false);
-        }
-    }, [bookmarks]);
-
-    useEffect(() => {
-        getAllBookmarks();
-    }, [getAllBookmarks]);
+        return () => sub?.unsubscribe();
+    }, [provider]);
 
     const { bookmarkGroups, groupingModes, searchText, setGroupBy, setSearchText, groupByKey } =
         useBookmarkGrouping(bookmarks);
 
+    const content = useMemo(() => {
+        if (error) {
+            return (
+                <Message title="Error" type="Error">
+                    {error.message}
+                </Message>
+            );
+        }
+        if (loading) {
+            return <Loading />;
+        }
+        if (bookmarkGroups.length === 0) {
+            return (
+                <Message title="No Bookmarks" type="NoContent">
+                    You have not created any bookmarks yet.
+                </Message>
+            );
+        }
+        return <SectionList bookmarkGroups={bookmarkGroups} />;
+    }, [error, loading, bookmarkGroups]);
+
     return (
         <Styled.Wrapper>
             <BookmarkFilter
@@ -75,19 +98,7 @@ export const Bookmark = () => {
                 setGroupBy={setGroupBy}
                 setSearchText={setSearchText}
             />
-            <Styled.List>
-                {bookmarkGroups.length > 0 ? (
-                    <SectionList bookmarkGroups={bookmarkGroups} />
-                ) : loading ? (
-                    <Loading />
-                ) : (
-                    <Styled.NoContentWrapper>
-                        <Message title="No Bookmarks" type="NoContent">
-                            You have not created any bookmarks yet.
-                        </Message>
-                    </Styled.NoContentWrapper>
-                )}
-            </Styled.List>
+            <Styled.List>{content}</Styled.List>
         </Styled.Wrapper>
     );
 };

package/src/components/BookmarkProvider.tsx

@@ -1,30 +1,84 @@
 import { Snackbar } from '@equinor/eds-core-react';
 import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
 import { useFramework } from '@equinor/fusion-framework-react';
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { CreateBookmarkModal } from './create-bookmark';
 import { EditBookmarkModal } from './edit-bookmark';
 import { ImportBookmarkModal } from './import-bookmark';
+import {
+    BookmarkModule,
+    type BookmarkProvider as IBookmarkProvider,
+} from '@equinor/fusion-framework-module-bookmark';
+import { Observable, of } from 'rxjs';
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+type BookmarkApp = {
+    appKey: string;
+    name?: string;
+};
+
+type ProviderState = {
+    provider: IBookmarkProvider;
+    currentApp?: BookmarkApp | null;
+};
+
+const bookmarkProviderContext = createContext<ProviderState | null>(null);
+
+type BookmarkProviderProps = {
+    readonly provider?: IBookmarkProvider | null;
+};
+
+export const useBookmarkComponentContext = () =>
+    useContext(bookmarkProviderContext) as ProviderState;
+
+export const useBookmarkProvider = () => useBookmarkComponentContext().provider;
+
+export const BookmarkProvider = (props: PropsWithChildren<BookmarkProviderProps>) => {
+    const { event: eventProvider } = useFramework<[BookmarkModule]>().modules;
+
+    const { provider, children } = props;
 
-export const BookmarkProvider = ({ children }: PropsWithChildren<unknown>) => {
     const [isCreateBookmarkOpen, setIsCreateBookmarkOpen] = useState(false);
     const [isEditBookmarkOpen, setIsEditBookmarkOpen] = useState(false);
     const [editBookmarkId, setEditBookmarkId] = useState<string | undefined>();
     const [isBookmarkCopy, setIsBookmarkCopy] = useState(false);
 
-    const { event } = useFramework().modules;
+    // get the current app
+    const { value: currentApp } = useObservableState(
+        useMemo(() => {
+            // if no provider, return null, this should not happen
+            if (!provider) {
+                return of(null);
+            }
+            return new Observable<BookmarkApp | null>((observer) => {
+                // resolve the application
+                const resolveApp = async () => {
+                    // get the resolved application
+                    const app = await provider.resolvedApplication();
+                    // emit the resolved application
+                    observer.next(app);
+                };
+                // re-resolve the application when the current app changes
+                eventProvider.addEventListener('onCurrentAppChanged', resolveApp);
+
+                // initial resolve
+                resolveApp();
+            });
+        }, [eventProvider, provider]),
+        { initial: undefined },
+    );
 
     useEffect(() => {
-        const subOnBookmarkOpen = event.addEventListener('onBookmarkOpen', (e) => {
+        const subOnBookmarkOpen = eventProvider.addEventListener('onBookmarkOpen', (e) => {
             setIsCreateBookmarkOpen(e.detail);
         });
 
-        const subOnBookmarkEdit = event.addEventListener('onBookmarkEdit', (e) => {
+        const subOnBookmarkEdit = eventProvider.addEventListener('onBookmarkEdit', (e) => {
             setEditBookmarkId(e.detail.bookmarkId);
             setIsEditBookmarkOpen(true);
         });
 
-        const subOnBookmarkUrlCopy = event.addEventListener('onBookmarkUrlCopy', () => {
+        const subOnBookmarkUrlCopy = eventProvider.addEventListener('onBookmarkUrlCopy', () => {
             setIsBookmarkCopy(true);
         });
 
@@ -33,16 +87,22 @@ export const BookmarkProvider = ({ children }: PropsWithChildren<unknown>) => {
             subOnBookmarkOpen();
             subOnBookmarkUrlCopy();
         };
-    }, [event]);
+    }, [eventProvider]);
+
+    if (!provider) {
+        return null;
+    }
 
     return (
-        <>
+        <bookmarkProviderContext.Provider value={{ provider, currentApp }}>
             <CreateBookmarkModal isOpen={isCreateBookmarkOpen} onClose={setIsCreateBookmarkOpen} />
-            <EditBookmarkModal
-                isOpen={isEditBookmarkOpen}
-                onClose={setIsEditBookmarkOpen}
-                bookmarkId={editBookmarkId}
-            />
+            {editBookmarkId && (
+                <EditBookmarkModal
+                    isOpen={isEditBookmarkOpen}
+                    onClose={setIsEditBookmarkOpen}
+                    bookmarkId={editBookmarkId}
+                />
+            )}
             <ImportBookmarkModal />
             <Snackbar
                 autoHideDuration={2000}
@@ -52,7 +112,7 @@ export const BookmarkProvider = ({ children }: PropsWithChildren<unknown>) => {
                 Bookmark url copied to clipboard
             </Snackbar>
             {children}
-        </>
+        </bookmarkProviderContext.Provider>
     );
 };
 

package/src/components/create-bookmark/CreateBookmark.tsx

@@ -1,10 +1,11 @@
-import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
-import type { AppModule } from '@equinor/fusion-framework-module-app';
-import { useFramework } from '@equinor/fusion-framework-react';
-import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+
+import { BookmarkCreateArgs } from '@equinor/fusion-framework-module-bookmark';
+import { useBookmarkComponentContext } from '../BookmarkProvider';
 
+import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
 import styled from 'styled-components';
+
 // TODO
 const StyledContent = styled(Dialog.Content)`
     display: flex;
@@ -19,15 +20,33 @@ export const CreateBookmarkModal = ({
     readonly isOpen: boolean;
     readonly onClose: (b: boolean) => void;
 }) => {
-    const [state, setState] = useState<{ name: string; description: string; isShared: boolean }>({
+    const { provider, currentApp } = useBookmarkComponentContext();
+
+    const [state, setState] = useState<BookmarkCreateArgs<never>>({
         name: '',
         description: '',
         isShared: false,
     });
 
-    const { current } = useFramework<[AppModule]>().modules.app;
+    useEffect(() => {
+        setState((s) => ({ ...s, appKey: currentApp?.appKey || '' }));
+    }, [currentApp]);
 
-    const { createBookmark } = useBookmark();
+    const createBookmark = useCallback(
+        async (args: BookmarkCreateArgs<never>) => {
+            try {
+                await provider.createBookmarkAsync(args);
+                // TODO: Show success message
+                // TODO: should this call onCreated, with the new bookmark?
+                // TODO: should current bookmark be updated?
+                onClose(false);
+            } catch (error) {
+                console.error('Failed to create bookmark', error);
+                // TODO: Show error message
+            }
+        },
+        [onClose, provider],
+    );
 
     return (
         <Dialog style={{ width: '400px' }} open={isOpen}>
@@ -58,7 +77,7 @@ export const CreateBookmarkModal = ({
                 </div>
                 <div>
                     <Label htmlFor="app" label="App" />
-                    <Input readOnly={true} value={current?.manifest?.displayName || ''} />
+                    <Input readOnly={true} value={currentApp?.name || currentApp?.appKey || ''} />
                 </div>
 
                 <div>
@@ -77,11 +96,9 @@ export const CreateBookmarkModal = ({
                         Cancel
                     </Button>
                     <Button
+                        disabled={!currentApp || !state.name}
                         onClick={() => {
-                            state &&
-                                createBookmark(state).then(() => {
-                                    onClose(false);
-                                });
+                            createBookmark(state);
                         }}
                     >
                         Create

package/src/components/create-bookmark/index.ts

@@ -1 +1 @@
-export * from './CreateBookmark';
+export { CreateBookmarkModal } from './CreateBookmark';

package/src/components/edit-bookmark/EditBookmark.tsx

@@ -1,15 +1,19 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
+import { of } from 'rxjs';
+
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+import { useFramework, useFrameworkModule } from '@equinor/fusion-framework-react';
 import type { AppModule } from '@equinor/fusion-framework-module-app';
-// TODO - export from `@equinor/fusion-framework-react-module-bookmark`
-import type { PatchBookmark } from '@equinor/fusion-framework-module-bookmark';
-import { useFramework } from '@equinor/fusion-framework-react';
-import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
-import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
+import type { BookmarkUpdate } from '@equinor/fusion-framework-module-bookmark';
 
+import { Button, Checkbox, Dialog, Input, Label, TextField } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 
+import { useBookmarkComponentContext } from '../BookmarkProvider';
+import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
+
 const Styled = {
     Dialog: styled(Dialog)`
         width: 500px;
@@ -36,11 +40,11 @@ export const EditBookmarkModal = ({
 }: {
     readonly isOpen: boolean;
     readonly onClose: (b: boolean) => void;
-    readonly bookmarkId?: string;
+    readonly bookmarkId: string;
 }) => {
-    const [state, setState] = useState<PatchBookmark>({
-        id: '',
-        appKey: '',
+    const { provider } = useBookmarkComponentContext();
+
+    const [state, setState] = useState<BookmarkUpdate>({
         name: '',
         description: '',
         isShared: false,
@@ -48,17 +52,52 @@ export const EditBookmarkModal = ({
 
     const [updatePayload, setUpdatePayload] = useState(false);
 
-    const { app, event } = useFramework<[AppModule]>().modules;
-    const { current } = app;
+    const { event } = useFramework<[AppModule]>().modules;
 
-    const { updateBookmark, bookmarks } = useBookmark();
+    const bookmark$ = useMemo(
+        () => provider.getBookmark(bookmarkId, { excludePayload: true }),
+        [provider, bookmarkId],
+    );
+
+    const { value: bookmark, complete: isLoadingBookmark } = useObservableState(bookmark$);
 
+    // set the state when the bookmark is loaded
     useEffect(() => {
-        const bookmark = bookmarks.find((b) => b.id === bookmarkId);
         if (bookmark) {
-            setState(bookmark);
+            setState({
+                name: bookmark.name,
+                description: bookmark.description,
+                isShared: bookmark.isShared,
+            });
         }
-    }, [bookmarkId, bookmarks]);
+    }, [bookmark]);
+
+    // TODO - this should be on the bookmark object
+    const appProvider = useFrameworkModule<AppModule>('app');
+    const { value: appName } = useObservableState(
+        useMemo(
+            () =>
+                bookmark && appProvider
+                    ? appProvider.getAppManifest(bookmark.appKey)
+                    : of(undefined),
+            [appProvider, bookmark],
+        ),
+    );
+
+    const updateBookmark = useCallback(
+        async (updates: BookmarkUpdate) => {
+            await provider.updateBookmarkAsync(bookmarkId, updates, {
+                excludePayloadGeneration: !updatePayload,
+            });
+            // TODO: Show success message
+            // TODO: should this call onUpdated, with the updated bookmark?
+            onClose(false);
+        },
+        [onClose, provider, bookmarkId, updatePayload],
+    );
+
+    // TODO - add loading spinner
+    isLoadingBookmark;
 
     return (
         <Styled.Dialog open={isOpen}>
@@ -90,7 +129,8 @@ export const EditBookmarkModal = ({
                 </div>
                 <div>
                     <Label htmlFor="app" label="App" />
-                    <Input readOnly={true} value={current?.manifest?.displayName || ''} />
+                    {/** TODO - show ghost while loading app name  */}
+                    <Input readOnly={true} value={appName || ''} />
                 </div>
 
                 <Styled.CheckboxWrapper>
@@ -99,7 +139,7 @@ export const EditBookmarkModal = ({
                         checked={state.isShared}
                         onChange={(changeEvent: ChangeEvent<HTMLInputElement>) => {
                             if (changeEvent.target.checked) {
-                                const url = appendBookmarkIdToUrl(state.id);
+                                const url = appendBookmarkIdToUrl(bookmark?.id || '');
                                 navigator.clipboard.writeText(url);
                                 event.dispatchEvent('onBookmarkUrlCopy', { detail: { url } });
                             }
@@ -122,10 +162,7 @@ export const EditBookmarkModal = ({
                     </Button>
                     <Button
                         onClick={() => {
-                            state &&
-                                updateBookmark(state, { updatePayload }).then(() => {
-                                    onClose(false);
-                                });
+                            updateBookmark(state);
                         }}
                     >
                         Save

package/src/components/import-bookmark/ImportBookmark.tsx

@@ -1,8 +1,10 @@
 import { Button, Dialog } from '@equinor/eds-core-react';
-import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
-import { useEffect, useState } from 'react';
+import { useObservableState } from '@equinor/fusion-observable/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import styled from 'styled-components';
+import { useBookmarkComponentContext } from '../BookmarkProvider';
+import { useCurrentBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 
 const Styled = {
     Actions: styled.div`
@@ -14,15 +16,40 @@ const Styled = {
 export const ImportBookmarkModal = () => {
     const [isOpen, setIsOpen] = useState(false);
 
-    const { currentBookmark, bookmarks, addBookmarkFavorite } = useBookmark();
+    const { provider } = useBookmarkComponentContext();
+    const { value: bookmarks, complete: bookmarksLoaded } = useObservableState(
+        useMemo(() => provider.bookmarks$, [provider]),
+        { initial: [] },
+    );
+
+    const { currentBookmark } = useCurrentBookmark({ provider });
 
     useEffect(() => {
-        if (!bookmarks || !currentBookmark || bookmarks.length === 0) return;
+        if (bookmarksLoaded && currentBookmark) {
+            // TODO: this should rather use the provider.isFavorite, but the bookmark should have flag for if the bookmark is created by the user
+            const hasBookmark = bookmarks.find(({ id }) => id === currentBookmark.id);
+            if (!hasBookmark) {
+                setIsOpen(true);
+            }
+        }
+    }, [bookmarks, currentBookmark, bookmarksLoaded]);
 
-        if (bookmarks.findIndex(({ id }) => id === currentBookmark.id) === -1) {
-            setIsOpen(true);
+    const onAddBookmarkFavorite = useCallback(async () => {
+        if (currentBookmark) {
+            try {
+                // TODO: missing state for disabling button
+                await provider.addBookmarkToFavoritesAsync(currentBookmark.id);
+                // TODO: Show success message
+            } catch (error) {
+                console.error('Failed to add bookmark to favorites', error);
+                // TODO: Show error message
+            }
+            await provider.addBookmarkToFavoritesAsync(currentBookmark.id);
+        } else {
+            console.error('No bookmark to add to favorites');
+            // TODO: Show error message
         }
-    }, [bookmarks, currentBookmark]);
+    }, [provider, currentBookmark]);
 
     return (
         <Dialog style={{ width: '600px' }} open={isOpen}>
@@ -40,14 +67,7 @@ export const ImportBookmarkModal = () => {
                     >
                         No
                     </Button>
-                    <Button
-                        onClick={() => {
-                            console.log(currentBookmark?.id);
-                            currentBookmark && addBookmarkFavorite(currentBookmark.id);
-                            setIsOpen(false);
-                        }}
-                        variant="ghost"
-                    >
+                    <Button onClick={onAddBookmarkFavorite} variant="ghost">
                         Import
                     </Button>
                 </Styled.Actions>