@equinor/fusion-framework-react-components-bookmark 1.0.8 → 1.0.10

package/src/components/sectionList/SectionList.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@equinor/eds-core-react';
-import { useBookmarkGrouping } from '../../hooks';
-import { MenuOption, Row } from '../row/Row';
+import type { useBookmarkGrouping } from '../../hooks';
+import { type MenuOption, Row } from '../row/Row';
 import { Section } from '../section/Section';
 import { SharedIcon } from '../shared/SharedIcon';
 // TODO - export from `@equinor/fusion-framework-react-module-bookmark`
@@ -13,156 +13,150 @@ import { useBookmarkComponentContext } from '../BookmarkProvider';
 import { from } from 'rxjs';
 
 Icon.add({
-    delete_to_trash,
-    edit,
-    share,
-    close,
-    update,
+  delete_to_trash,
+  edit,
+  share,
+  close,
+  update,
 });
 
 type SectionListProps = {
-    readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
+  readonly bookmarkGroups: ReturnType<typeof useBookmarkGrouping>['bookmarkGroups'];
 };
 
 export const SectionList = ({ bookmarkGroups }: SectionListProps) => {
-    // const { deleteBookmarkById, updateBookmark, removeBookmarkFavorite } = useBookmark();
+  // const { deleteBookmarkById, updateBookmark, removeBookmarkFavorite } = useBookmark();
 
-    const { provider, currentApp, showEditBookmark, addBookmarkToClipboard } =
-        useBookmarkComponentContext();
+  const { provider, currentApp, showEditBookmark, addBookmarkToClipboard } =
+    useBookmarkComponentContext();
 
-    // TODO - should be removed when bookmark has property for isOwner
-    const user = useCurrentUser();
+  // TODO - should be removed when bookmark has property for isOwner
+  const user = useCurrentUser();
 
-    const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
+  const [isMenuByIdOpen, setIsMenuByIdOpen] = useState('');
 
-    const createMenuOptions = useCallback(
-        (bookmark: BookmarkWithoutData) => {
-            if (!provider) return [];
-            const appKey = currentApp?.appKey;
-            const bookmarkId = bookmark.id;
-            const isOwner = bookmark.createdBy.id === user?.localAccountId;
-            if (isOwner) {
-                return [
-                    {
-                        name: 'Edit',
-                        disabled: appKey !== bookmark.appKey,
-                        onClick: () => {
-                            showEditBookmark(bookmarkId);
-                        },
-                        Icon: <Icon name="edit" />,
-                    },
-                    {
-                        name: 'Update with current view',
-                        disabled: appKey !== bookmark.appKey,
-                        onClick: () => {
-                            // TODO: add success and failure message
-                            from(
-                                provider.updateBookmark(bookmark.id, undefined, {
-                                    excludePayloadGeneration: false,
-                                }),
-                            ).subscribe({
-                                error(err) {
-                                    console.error(
-                                        'Failed to update bookmark with current view',
-                                        err,
-                                    );
-                                },
-                                complete() {
-                                    console.debug('Bookmark updated with current view');
-                                },
-                            });
-                        },
-                        Icon: <Icon name="update" />,
-                    },
-                    {
-                        name: 'Remove',
-                        disabled: false,
-                        onClick: () => {
-                            // TODO: add success and failure message
-                            from(provider.deleteBookmark(bookmark.id)).subscribe({
-                                error(err) {
-                                    console.error('Failed to remove bookmark', err);
-                                },
-                                complete() {
-                                    console.debug('Bookmark removed');
-                                },
-                            });
-                        },
-                        Icon: <Icon name="delete_to_trash" />,
-                    },
-                    {
-                        name: bookmark.isShared ? 'Unshare' : 'Share',
-                        disabled: false,
-                        onClick: async () => {
-                            from(
-                                provider.updateBookmark(bookmark.id, {
-                                    isShared: !bookmark.isShared,
-                                }),
-                            ).subscribe({
-                                next(value) {
-                                    if (value.isShared) {
-                                        addBookmarkToClipboard(value.id);
-                                    }
-                                },
-                                error(err) {
-                                    console.error('Failed to update bookmark', err);
-                                },
-                                complete() {
-                                    console.debug('Bookmark updated');
-                                },
-                            });
-                        },
-                        Icon: <Icon name="share" />,
-                    },
-                ] as MenuOption[];
-            } else {
-                return [
-                    {
-                        name: 'Unfavourite',
-                        disabled: false,
-                        onClick: () => {
-                            from(provider.removeBookmarkAsFavorite(bookmark.id)).subscribe({
-                                error(err) {
-                                    console.error('Failed to remove bookmark from favorites', err);
-                                },
-                                complete() {
-                                    console.debug('Bookmark removed from favorites');
-                                },
-                            });
-                        },
-                        Icon: <Icon name="close" />,
-                    },
-                ];
-            }
-        },
-        [provider, showEditBookmark, addBookmarkToClipboard, user, currentApp?.appKey],
-    );
+  const createMenuOptions = useCallback(
+    (bookmark: BookmarkWithoutData) => {
+      if (!provider) return [];
+      const appKey = currentApp?.appKey;
+      const bookmarkId = bookmark.id;
+      const isOwner = bookmark.createdBy.id === user?.localAccountId;
+      if (isOwner) {
+        return [
+          {
+            name: 'Edit',
+            disabled: appKey !== bookmark.appKey,
+            onClick: () => {
+              showEditBookmark(bookmarkId);
+            },
+            Icon: <Icon name="edit" />,
+          },
+          {
+            name: 'Update with current view',
+            disabled: appKey !== bookmark.appKey,
+            onClick: () => {
+              // TODO: add success and failure message
+              from(
+                provider.updateBookmark(bookmark.id, undefined, {
+                  excludePayloadGeneration: false,
+                }),
+              ).subscribe({
+                error(err) {
+                  console.error('Failed to update bookmark with current view', err);
+                },
+                complete() {
+                  console.debug('Bookmark updated with current view');
+                },
+              });
+            },
+            Icon: <Icon name="update" />,
+          },
+          {
+            name: 'Remove',
+            disabled: false,
+            onClick: () => {
+              // TODO: add success and failure message
+              from(provider.deleteBookmark(bookmark.id)).subscribe({
+                error(err) {
+                  console.error('Failed to remove bookmark', err);
+                },
+                complete() {
+                  console.debug('Bookmark removed');
+                },
+              });
+            },
+            Icon: <Icon name="delete_to_trash" />,
+          },
+          {
+            name: bookmark.isShared ? 'Unshare' : 'Share',
+            disabled: false,
+            onClick: async () => {
+              from(
+                provider.updateBookmark(bookmark.id, {
+                  isShared: !bookmark.isShared,
+                }),
+              ).subscribe({
+                next(value) {
+                  if (value.isShared) {
+                    addBookmarkToClipboard(value.id);
+                  }
+                },
+                error(err) {
+                  console.error('Failed to update bookmark', err);
+                },
+                complete() {
+                  console.debug('Bookmark updated');
+                },
+              });
+            },
+            Icon: <Icon name="share" />,
+          },
+        ] as MenuOption[];
+      } else {
+        return [
+          {
+            name: 'Unfavourite',
+            disabled: false,
+            onClick: () => {
+              from(provider.removeBookmarkAsFavorite(bookmark.id)).subscribe({
+                error(err) {
+                  console.error('Failed to remove bookmark from favorites', err);
+                },
+                complete() {
+                  console.debug('Bookmark removed from favorites');
+                },
+              });
+            },
+            Icon: <Icon name="close" />,
+          },
+        ];
+      }
+    },
+    [provider, showEditBookmark, addBookmarkToClipboard, user, currentApp?.appKey],
+  );
 
-    return (
-        <>
-            {bookmarkGroups.filter(filterEmptyGroups).map(({ groupingProperty, values }) => (
-                <Section key={groupingProperty} name={toHumanReadable(groupingProperty)}>
-                    {values.sort(sortByName).map((b) => (
-                        <Row
-                            menuOptions={createMenuOptions(b)}
-                            key={b.id}
-                            name={b.name}
-                            id={b.id}
-                            menuOpen={isMenuByIdOpen === b.id}
-                            onMenuOpen={(id: string) => {
-                                setIsMenuByIdOpen(id);
-                            }}
-                        >
-                            {b.isShared && (
-                                <SharedIcon
-                                    createdById={b.createdBy.id}
-                                    createdBy={b.createdBy.name}
-                                />
-                            )}
-                        </Row>
-                    ))}
-                </Section>
-            ))}
-        </>
-    );
+  return (
+    <>
+      {bookmarkGroups.filter(filterEmptyGroups).map(({ groupingProperty, values }) => (
+        <Section key={groupingProperty} name={toHumanReadable(groupingProperty)}>
+          {values.sort(sortByName).map((b) => (
+            <Row
+              menuOptions={createMenuOptions(b)}
+              key={b.id}
+              name={b.name}
+              id={b.id}
+              menuOpen={isMenuByIdOpen === b.id}
+              onMenuOpen={(id: string) => {
+                setIsMenuByIdOpen(id);
+              }}
+            >
+              {b.isShared && (
+                <SharedIcon createdById={b.createdBy.id} createdBy={b.createdBy.name} />
+              )}
+            </Row>
+          ))}
+        </Section>
+      ))}
+    </>
+  );
 };

package/src/components/shared/SharedIcon.tsx

@@ -5,12 +5,12 @@ import { useFramework } from '@equinor/fusion-framework-react';
 import styled from 'styled-components';
 
 const Styled = {
-    Row: styled.div`
+  Row: styled.div`
         display: flex;
         align-items: center;
         gap: 0.2em;
     `,
-    CreatedBy: styled.p`
+  CreatedBy: styled.p`
         font-size: 12px;
         font-weight: 500;
         line-height: 16px;
@@ -20,26 +20,26 @@ const Styled = {
 };
 
 type SharedIconProps = {
-    readonly createdBy: string;
-    readonly createdById: string;
+  readonly createdBy: string;
+  readonly createdById: string;
 };
 
 export const SharedIcon = ({ createdBy, createdById }: SharedIconProps) => {
-    const myId = useFramework().modules.auth.defaultAccount?.localAccountId;
+  const myId = useFramework().modules.auth.defaultAccount?.localAccountId;
 
-    const isMe = createdById === myId;
+  const isMe = createdById === myId;
 
-    return (
-        <Styled.Row>
-            {!isMe && <Styled.CreatedBy>shared by {createdBy}</Styled.CreatedBy>}
-            <Icon
-                name="share"
-                color={
-                    isMe
-                        ? tokens.colors.interactive.primary__resting.hex
-                        : tokens.colors.interactive.disabled__border.hex
-                }
-            />
-        </Styled.Row>
-    );
+  return (
+    <Styled.Row>
+      {!isMe && <Styled.CreatedBy>shared by {createdBy}</Styled.CreatedBy>}
+      <Icon
+        name="share"
+        color={
+          isMe
+            ? tokens.colors.interactive.primary__resting.hex
+            : tokens.colors.interactive.disabled__border.hex
+        }
+      />
+    </Styled.Row>
+  );
 };

package/src/hooks/useBookmarkGrouping.ts

@@ -1,54 +1,54 @@
-import { Bookmarks, BookmarkWithoutData } from '@equinor/fusion-framework-module-bookmark';
+import type { 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: 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',
+  '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?: Bookmarks) => {
-    const [searchText, setSearchText] = useState<string | null>(null);
+  const [searchText, setSearchText] = useState<string | null>(null);
 
-    const [groupByKey, setGroupBy] = useState<keyof typeof groupingModes>('Group by app');
+  const [groupByKey, setGroupBy] = useState<keyof typeof groupingModes>('Group by app');
 
-    const bookmarkGroups = groupBy(bookmarks || [], groupingModes[groupByKey], searchText, 'name');
+  const bookmarkGroups = groupBy(bookmarks || [], groupingModes[groupByKey], searchText, 'name');
 
-    return {
-        setGroupBy,
-        setSearchText,
-        searchText,
-        bookmarkGroups,
-        groupingModes,
-        groupByKey,
-    };
+  return {
+    setGroupBy,
+    setSearchText,
+    searchText,
+    bookmarkGroups,
+    groupingModes,
+    groupByKey,
+  };
 };
 
 const groupBy = <T>(
-    array: T[],
-    getKey: (item: T) => string,
-    searchText: string | null,
-    field: keyof T,
+  array: T[],
+  getKey: (item: T) => string,
+  searchText: string | null,
+  field: keyof T,
 ) => {
-    return (
-        array
-            ?.map(getKey)
-            .filter((v, i, a) => a.indexOf(v) === i)
-            .map((groupingProperty) => ({
-                groupingProperty,
-                values: array
-                    .filter((s) => getKey(s) === groupingProperty)
-                    .filter((s) => {
-                        const fieldData = s[field];
-                        if (typeof fieldData === 'string' && searchText) {
-                            return fieldData.includes(searchText);
-                        }
-
-                        return true;
-                    }),
-            })) ?? []
-    );
+  return (
+    array
+      ?.map(getKey)
+      .filter((v, i, a) => a.indexOf(v) === i)
+      .map((groupingProperty) => ({
+        groupingProperty,
+        values: array
+          .filter((s) => getKey(s) === groupingProperty)
+          .filter((s) => {
+            const fieldData = s[field];
+            if (typeof fieldData === 'string' && searchText) {
+              return fieldData.includes(searchText);
+            }
+
+            return true;
+          }),
+      })) ?? []
+  );
 };

package/src/utils/append-bookmark-to-uri.ts

@@ -1,5 +1,5 @@
 export const appendBookmarkIdToUrl = (id: string): string => {
-    const url = new URL(window.location.toString());
-    url.searchParams.set('bookmarkId', id);
-    return url.toString();
+  const url = new URL(window.location.toString());
+  url.searchParams.set('bookmarkId', id);
+  return url.toString();
 };

package/src/utils/utils.ts

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

package/src/version.ts

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