Correct way to store editable model

[R-iskey]

Hey guys,
I using MST in my react-native project, and this is the first time when I cross with MST.
I read the documentation but still can't realize the correct way to store the model in the same state tree for edit purposes.

For example, this is my state tree:

ActivitiesModel = types
    .model("ActivitiesModel", {
        // array of activities model
        data: types.array(ActivityModel),
        // this is the cloned model of self.data
        editableActivity: types.optional(types.map(ActivityModel), {})
    });

// this is activity model
ActivityModel = types
    .model('ActivityModel', {
        id: types.string,
        last_message: LastMessageModel,
        room: types.string,
        namespace: types.string,
        is_read: false,
        updated_at: types.number,
    })

as you see I using editableActivity: types.optional(types.map(ActivityModel), {}) to store the editable model, but I don't like to use types.map().
In a perfect way, editableActivity should have a null initial value, and calling action should set the activity from self.data.activities[index].

I tried to use editableActivity:types.optional(ActivityModel, {}), but in this case I need to define all properties from ActivityModel in {}.
The other way to use types.frozen() but it's not correct for that case, because I have a known model.

[EmilTholin]

Hey @R-iskey!

One way of going about it is to use a reference to the model you are editing instead of cloning it. You can then store a snapshot of the model just as you start to edit it, and revert the model back to this snapshot if you cancel the edit.

Example

import { observer } from "mobx-react-lite";
import {
  applySnapshot,
  getSnapshot,
  Instance,
  SnapshotIn,
  types
} from "mobx-state-tree";

const ActivityModel = types
  .model("ActivityModel", {
    id: types.identifier,
    room: types.string,
    namespace: types.string
  })
  .actions((self) => ({
    setRoom(room: string) {
      self.room = room;
    }
  }));
type ActivityModelInstance = Instance<typeof ActivityModel>;
type ActivityModelSnapshotIn = SnapshotIn<typeof ActivityModel>;

const ActivitiesModel = types
  .model("ActivitiesModel", {
    data: types.array(ActivityModel),
    beingEdited: types.maybeNull(types.reference(ActivityModel))
  })
  .actions((self) => {
    let activitySnapshot: ActivityModelSnapshotIn;

    return {
      edit(activity: ActivityModelInstance) {
        activitySnapshot = getSnapshot(activity);
        self.beingEdited = activity;
      },
      submit() {
        self.beingEdited = null;
      },
      cancel() {
        applySnapshot<ActivityModelSnapshotIn>(
          self.beingEdited!,
          activitySnapshot
        );
        self.beingEdited = null;
      }
    };
  });

const activities = ActivitiesModel.create({
  data: [
    {
      id: "1",
      room: "room 1",
      namespace: "namespace 1"
    },
    {
      id: "2",
      room: "room 2",
      namespace: "namespace 2"
    }
  ]
});

export default observer(function App() {
  const { data, beingEdited } = activities;

  return (
    <div>
      {data.map((activity) => (
        <div key={activity.id}>
          {beingEdited === activity ? (
            <>
              <input
                value={activity.room}
                onChange={(e) => activity.setRoom(e.target.value)}
              />
              <button onClick={activities.submit}>Save</button>
              <button onClick={activities.cancel}>Cancel</button>
            </>
          ) : (
            <>
              <span>{activity.room}</span>
              {beingEdited === null && (
                <button onClick={() => activities.edit(activity)}>Edit</button>
              )}
            </>
          )}
        </div>
      ))}
    </div>
  );
});

[R-iskey]

Thank you for the solution, can you also provide the typings for

edit(activity: any) {
        activitySnapshot = getSnapshot(activity);
        self.beingEdited = activity;
      },

I using typescript and can't find the correct types

[EmilTholin]

You're welcome!

Sure, I updated the code to TypeScript instead.