feat(cookbook-react-bookmark): Update cookbook to use new bookmark mo…

…dule

.changeset/great-peaches-rule.md

@@ -0,0 +1,15 @@
+---
+'@equinor/fusion-framework-cookbook-app-react-bookmark': minor
+---
+
+Updated Bookmark Handling in App Component
+
+-   Refactored `App.tsx` to use `useLayoutEffect` instead of `useEffect` for synchronizing the `payload` state with the current bookmark.
+-   Replaced `useState` and `useCallback` with `useRef` for managing the `updateData` reference.
+-   Simplified state management by removing `BookmarkState` and `init` and directly using `payload` state.
+-   Updated input change handlers to directly update the `payload` state instead of using `updateState`.
+
+Configuration Changes
+
+-   Updated `config.ts` to enable the bookmark module using `enableBookmark`.
+-   Removed unnecessary logger level settings and configuration callbacks for a cleaner setup.

cookbooks/app-react-bookmark/src/App.tsx

@@ -1,38 +1,33 @@
 import { useCurrentBookmark } from '@equinor/fusion-framework-react-app/bookmark';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
-export interface MyBookmark {
+export interface MyPayload {
     title: string;
     data: string;
 }
 
-export interface BookmarkState {
-    payload: MyBookmark;
-}
-
-export const init = {
-    payload: {
+export const App = () => {
+    const [payload, setPayload] = useState({
         title: '',
         data: '',
-    },
-};
+    });
 
-export const App = () => {
-    const [state, setState] = useState<BookmarkState>(init);
+    const updateData = useRef(payload);
 
-    const updateState = useCallback(
-        (newState: () => Partial<BookmarkState>) => {
-            setState((s) => ({ ...s, ...newState() }));
-        },
-        [setState],
-    );
-    const currentBookmark = useCurrentBookmark<MyBookmark>(
-        useCallback(() => state.payload, [state.payload]),
+    const { currentBookmark } = useCurrentBookmark<MyPayload>(
+        useCallback(() => updateData.current, [updateData]),
     );
 
-    useEffect(() => {
-        currentBookmark.currentBookmark && setState(currentBookmark.currentBookmark);
-    }, [currentBookmark.currentBookmark]);
+    useLayoutEffect(() => {
+        setPayload({
+            title: currentBookmark?.payload?.title ?? '',
+            data: currentBookmark?.payload?.data ?? '',
+        });
+    }, [currentBookmark]);
+
+    useLayoutEffect(() => {
+        updateData.current = payload;
+    }, [payload]);
 
     return (
         <div
@@ -54,28 +49,24 @@ export const App = () => {
                         id="value"
                         type="text"
                         onChange={(e) => {
-                            updateState(() => ({
-                                payload: {
-                                    ...state.payload,
-                                    title: e.target.value,
-                                },
+                            setPayload((x) => ({
+                                ...x,
+                                title: e.target.value,
                             }));
                         }}
-                        value={state.payload.title}
+                        value={payload.title}
                     />
                     <label htmlFor="value">Bookmark data:</label>
                     <input
                         id="value"
                         type="text"
                         onChange={(e) => {
-                            updateState(() => ({
-                                payload: {
-                                    ...state.payload,
-                                    data: e.target.value,
-                                },
+                            setPayload((x) => ({
+                                ...x,
+                                data: e.target.value,
                             }));
                         }}
-                        value={state.payload.data}
+                        value={payload.data}
                     />
                 </form>
                 <pre>{JSON.stringify(currentBookmark, null, 2)}</pre>

cookbooks/app-react-bookmark/src/config.ts

@@ -1,22 +1,13 @@
 import type { AppModuleInitiator } from '@equinor/fusion-framework-react-app';
 
 import { enableContext } from '@equinor/fusion-framework-module-context';
+import { enableBookmark } from '@equinor/fusion-framework-react-app/bookmark';
 
 export const configure: AppModuleInitiator = (configurator) => {
     enableContext(configurator, async (builder) => {
         builder.setContextType(['projectMaster']); // set contextType to match against
     });
-    configurator.logger.level = 0;
-
-    /** callback when configurations is created */
-    configurator.onConfigured((config) => {
-        console.log('application config created', config);
-    });
-
-    /** callback when the application modules has initialized */
-    configurator.onInitialized((instance) => {
-        console.log('application config initialized', instance);
-    });
+    enableBookmark(configurator);
 };
 
 export default configure;