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

package/src/components/row/Row.tsx

@@ -1,11 +1,11 @@
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
 import { useOutsideClick } from '@equinor/eds-utils';
-import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import { MutableRefObject, ReactNode, useRef } from 'react';
 import { MoreMenu } from './MoreMenu';
 
 import styled from 'styled-components';
+import { useBookmarkComponentContext } from '../BookmarkProvider';
 
 export type MenuOption = {
     name: string;
@@ -48,7 +48,7 @@ const Styled = {
 
 export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => {
     const pRef = useRef<HTMLElement | null>(null);
-    const { setCurrentBookmark } = useBookmark();
+    const { provider } = useBookmarkComponentContext();
 
     useOutsideClick(pRef.current, () => onMenuOpen(''));
 
@@ -59,7 +59,7 @@ export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: R
             onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                setCurrentBookmark(id);
+                provider.setCurrentBookmarkAsync(id);
             }}
         >
             <Typography>{name}</Typography>

package/src/components/sectionList/SectionList.tsx

@@ -4,14 +4,15 @@ import { Row } from '../row/Row';
 import { Section } from '../section/Section';
 import { SharedIcon } from '../shared/SharedIcon';
 // TODO - export from `@equinor/fusion-framework-react-module-bookmark`
-import type { Bookmark } from '@equinor/fusion-framework-module-bookmark';
-import { useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+import type { BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
 import { useCallback, useState } from 'react';
 import { delete_to_trash, share, edit, close, update } from '@equinor/eds-icons';
 import { useFramework } from '@equinor/fusion-framework-react';
 import { appendBookmarkIdToUrl } from '../../utils/append-bookmark-to-uri';
 import { filterEmptyGroups, sortByName, toHumanReadable } from '../../utils/utils';
+import { AppModule } from '@equinor/fusion-framework-module-app';
+import { useBookmarkComponentContext } from '../BookmarkProvider';
 
 Icon.add({
     delete_to_trash,
@@ -26,52 +27,90 @@ type SectionListProps = {
 };
 
 export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
-    const { deleteBookmarkById, getCurrentAppKey, updateBookmark, removeBookmarkFavorite } =
-        useBookmark();
+    // const { deleteBookmarkById, updateBookmark, removeBookmarkFavorite } = useBookmark();
 
+    const { provider: bookmarkProvider, currentApp } = useBookmarkComponentContext();
+
+    // TODO - should be removed when bookmark has property for isOwner
     const user = useCurrentUser();
+
     const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
 
-    const { event } = useFramework().modules;
+    const { event: eventProvider } = useFramework<[AppModule]>().modules;
 
-    const editBookmark = useCallback(
-        (bookmarkId: string) => {
-            event.dispatchEvent('onBookmarkEdit', { detail: { bookmarkId } });
-        },
-        [event],
-    );
+    const createMenuOptions = useCallback(
+        (bookmark: BookmarkWithoutData) => {
+            const appKey = currentApp?.appKey;
+            const bookmarkId = bookmark.id;
+            const isOwner = bookmark.createdBy.azureUniqueId === user?.localAccountId;
+            if (isOwner) {
+                return [
+                    {
+                        name: 'Edit',
+                        disabled: appKey !== bookmark.appKey,
+                        onClick: () => {
+                            eventProvider.dispatchEvent('onBookmarkEdit', {
+                                detail: { bookmarkId },
+                            });
+                        },
+                        Icon: <Icon name="edit" />,
+                    },
+                    {
+                        name: 'Update with current view',
+                        disabled: appKey !== bookmark.appKey,
+                        onClick: () => {
+                            bookmarkProvider.updateBookmarkAsync(bookmark.id);
+                            // TODO: add success and failure message
+                        },
+                        Icon: <Icon name="update" />,
+                    },
+                    {
+                        name: 'Remove',
+                        disabled: false,
+                        onClick: () => {
+                            bookmarkProvider.deleteBookmarkAsync(bookmark.id);
+                            // TODO: add success and failure message
+                        },
+                        Icon: <Icon name="delete_to_trash" />,
+                    },
+                    {
+                        name: bookmark.isShared ? 'Unshare' : 'Share',
+                        disabled: false,
+                        onClick: () => {
+                            if (!bookmark.isShared) {
+                                const url = appendBookmarkIdToUrl(bookmark.id);
+                                navigator.clipboard.writeText(url);
+                                eventProvider.dispatchEvent('onBookmarkUrlCopy', {
+                                    detail: { url },
+                                });
+                            }
 
-    const shareBookmark = useCallback(
-        (bookmark: Bookmark) => {
-            if (!bookmark.isShared) {
-                const url = appendBookmarkIdToUrl(bookmark.id);
-                navigator.clipboard.writeText(url);
-                event.dispatchEvent('onBookmarkUrlCopy', { detail: { url } });
+                            // TODO - this flag should only be set by backend when sharing is successful
+                            bookmarkProvider.updateBookmarkAsync(
+                                bookmark.id,
+                                { isShared: !bookmark.isShared },
+                                { excludePayloadGeneration: true },
+                            );
+                        },
+                        Icon: <Icon name="share" />,
+                    },
+                ];
+            } else {
+                return [
+                    {
+                        name: 'Unfavourite',
+                        disabled: false,
+                        onClick: () => {
+                            bookmarkProvider.deleteBookmarkAsync(bookmark.id);
+                        },
+                        Icon: <Icon name="close" />,
+                    },
+                ];
             }
-            updateBookmark({ ...bookmark, isShared: !bookmark.isShared });
         },
-        [event, updateBookmark],
+        [eventProvider, bookmarkProvider, user, currentApp?.appKey],
     );
 
-    const updateBookmarkWithCurrentView = useCallback(
-        (bookmark: Bookmark) => {
-            updateBookmark({ ...bookmark }, { updatePayload: true });
-        },
-        [updateBookmark],
-    );
-
-    const createMenuOptions = (bookmark: Bookmark) =>
-        createBookmarkActions(
-            bookmark,
-            deleteBookmarkById,
-            editBookmark,
-            shareBookmark,
-            removeBookmarkFavorite,
-            updateBookmarkWithCurrentView,
-            getCurrentAppKey(),
-            user?.localAccountId,
-        );
-
     return (
         <>
             {bookmarkGroups.filter(filterEmptyGroups).map(({ groupingProperty, values }) => (
@@ -100,62 +139,3 @@ export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
         </>
     );
 };
-
-function createBookmarkActions(
-    bookmark: Bookmark,
-    deleteBookmarkById: (bookmarkId: string) => Promise<string | undefined>,
-    editBookmark: (bookmark: string) => void,
-    shareBookmark: (bookmark: Bookmark) => void,
-    removeBookmarkFavorite: (bookmarkId: string) => void,
-    updateBookmarkWithCurrentView: (bookmark: Bookmark) => void,
-    appKey?: string,
-    localAccountId?: string,
-) {
-    if (bookmark.createdBy.azureUniqueId === localAccountId) {
-        return [
-            {
-                name: 'Edit',
-                disabled: appKey !== bookmark.appKey,
-                onClick: () => {
-                    editBookmark(bookmark.id);
-                },
-                Icon: <Icon name="edit" />,
-            },
-            {
-                name: 'Update with current view',
-                disabled: appKey !== bookmark.appKey,
-                onClick: () => {
-                    updateBookmarkWithCurrentView(bookmark);
-                },
-                Icon: <Icon name="update" />,
-            },
-            {
-                name: 'Remove',
-                disabled: false,
-                onClick: () => {
-                    deleteBookmarkById(bookmark.id);
-                },
-                Icon: <Icon name="delete_to_trash" />,
-            },
-            {
-                name: bookmark.isShared ? 'Unshare' : 'Share',
-                disabled: false,
-                onClick: () => {
-                    shareBookmark(bookmark);
-                },
-                Icon: <Icon name="share" />,
-            },
-        ];
-    } else {
-        return [
-            {
-                name: 'Unfavourite',
-                disabled: false,
-                onClick: () => {
-                    removeBookmarkFavorite(bookmark.id);
-                },
-                Icon: <Icon name="close" />,
-            },
-        ];
-    }
-}

package/src/hooks/useBookmarkGrouping.ts

@@ -1,16 +1,16 @@
-import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 
 import { useState } from 'react';
 
 export type GroupingKeys = 'Group by app' | 'Created by' | 'Group by Context';
 
-const groupingModes: Record<GroupingKeys, (_item: Bookmark) => string> = {
-    'Group by app': (item: Bookmark) => item.appKey,
-    'Created by': (item: Bookmark) => item.createdBy.name,
-    'Group by Context': (item: Bookmark) => item?.context?.name ?? 'Unknown',
+const groupingModes: Record<GroupingKeys, (_item: BookmarkWithoutData) => string> = {
+    'Group by app': (item: BookmarkWithoutData) => item.appKey,
+    'Created by': (item: BookmarkWithoutData) => item.createdBy.name,
+    'Group by Context': (item: BookmarkWithoutData) => item?.context?.name ?? 'Unknown',
 } as const;
 
-export const useBookmarkGrouping = (bookmarks?: Bookmark[]) => {
+export const useBookmarkGrouping = (bookmarks?: Bookmarks) => {
     const [searchText, setSearchText] = useState<string | null>(null);
 
     const [groupByKey, setGroupBy] = useState<keyof typeof groupingModes>('Group by app');

package/src/utils/utils.ts

@@ -1,8 +1,9 @@
-import { Bookmark } from '@equinor/fusion-framework-module-bookmark';
+import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
 
 /** Helpers.. */
-export const filterEmptyGroups = (i: { values: Bookmark[] }) => i.values.length;
-export const sortByName = (a: Bookmark, b: Bookmark) => a.name.localeCompare(b.name);
+export const filterEmptyGroups = (i: { values: Bookmarks }) => i.values.length;
+export const sortByName = (a: BookmarkWithoutData, b: BookmarkWithoutData) =>
+    a.name.localeCompare(b.name);
 // const extractNameFromMail = (mail: string) => mail.split('@')[0].toLowerCase();
 
 export const toHumanReadable = (val: string) =>

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.5.3';
+export const version = '1.0.0';