This PR brings two big changes.

1. Introducing Social.set

Takes data object and commits it to SocialDB. It works similarly to the CommitButton by spawning the modal window prompt to save data, but it doesn't have to be triggered through the commit button component. It allows you to write more flexible code that relies on async promises and use other events and components. Overall it enables more flexibility when committing to SocialDB. For example, you can commit when Enter key pressed.

Arguments:

• data required, the data object to be committed. Similar to CommitButton, it shouldn't start with account ID.
• options optional object
  • force, whether to overwrite the data
  • onCommit - function to trigger on successful commit. Will pass the data that was written (including accountID)
  • onCancel - function to trigger if the user cancels the commit.

2. Ability to skip confirmation.

When a modal window to confirm a commit is shown, it has a toggle to select whether you want to confirm the action every time, or don't show the confirm window for the similar data. By default for the new data, the toggle is set to on, which means the user will not be prompted to confirm the data for the next time. It remembers the decision locally and will be default to this decision next time (in case the user decides to not skip). If user approves the commit with the toggle on, then the next commit with the similar data will skip the confirmation window. The permission is given per widget src.

Similar data means, the same top level keys on the data. Except for the 4 top level keys: graph, post, index and settings. For these keys, the second level key will be used. More keys can be added later, once new standards added.

For example the follow button widget uses the following keys:

{
    "graph": {
      "follow": ...
    },
    "index": {
      "graph": ...
      "notify": ...
    }
  }

If it attempts to modify something else, the confirmation modal will be shown again.

Example

Example on using CommitButton and Social.set with regular button. Note, both use force

State.init({ commitLoading: false });

const data = { experimental: { test: "test" } };

const Loading = (
  <span
    className="spinner-grow spinner-grow-sm me-1"
    role="status"
    aria-hidden="true"
  />
);

return (
  <div>
    <CommitButton force data={data}>
      CommitButton
    </CommitButton>
    <button
      disabled={state.commitLoading}
      onClick={() => {
        State.update({ commitLoading: true });
        Social.set(data, {
          force: true,
          onCommit: () => {
            State.update({ commitLoading: false });
          },
          onCancel: () => {
            State.update({ commitLoading: false });
          },
        });
      }}
    >
      {state.commitLoading && Loading}Social.set
    </button>
  </div>
);