Contextual Save Bar

Solved
Highlighted
New Member
2 1 0

I am using the Contextual Save Bar in a React application with the Shopify app bridge. For some reason when I call 

contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE) it doesn't disappear. I want the user to be able to modify the data on a form, save it, stay on the same page and for the contextual save bar to disappear. Has anyone else had the same problem?
0 Likes
Highlighted
New Member
2 1 0

This is an accepted solution.

To get it to work in my React Functional component I had to unsubscribe the component in the cleanup phase of the useEffect. (unsubscribe the Contextual Save Bar at the beginning of each render cycle). During Render I had to create and HIDE the CSB each time whether I wanted it to be displayed or not and then conditionally display the CSB if the form is dirty. I didn't subscribe to any actions during the render phase if the CSB was hidden.

 

useEffect(() => {
    return function cleanup() {
      contextualSaveBar && contextualSaveBar.unsubscribe();
    };
  };

const contextualSaveBar = ContextualSaveBar.create(appBridgeContext, options);
contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);

  if (isDirty) {
    contextualSaveBar.subscribe(ContextualSaveBar.Action.DISCARD, () => {
      // Hide the contextual save bar and go back to home page
      contextualSaveBar.dispatch(ContextualSaveBar.Action.HIDE);
      navigateToRoot();
    });

    contextualSaveBar.subscribe(ContextualSaveBar.Action.SAVE, async () => {
      // show a loading spinner while the save action is in progress
      contextualSaveBar.set({ saveAction: { loading: true } });
      await clickHandler();
      contextualSaveBar.set({ saveAction: { loading: false } });
    });

    contextualSaveBar.dispatch(ContextualSaveBar.Action.SHOW);
  }
0 Likes