React MVVM example

BindingHook.js

function BindingHook({ dataContext, path, mode }) {
  const [data, setData] = useState(dataContext[path]);
  
  useEffect(() => {
    onPropertyChanged = (newData) => {
      setData(newData);
    };
    
    dataContext.subscribeOnPropertyChanged(path, onPropertyChanged);
    
    return () => { dataContext.unsubscribeOnPropertyChanged(path, onPropertyChanged); }
  });
  
  return mode.onWay 
    ? data 
    : {
        onChange: (event) => {
        dataContext[path] = event.target.value;    
      },
      value: data
    };
}

FriendViewModel.js

class FriendViewModel extends ViewModelBase {
  _personalId;
  _friend;
  
  constructor(personalId, friend) {
    this._personalId = personalId;
    this._friend = friend;
  }
  
  delete() {
    personalService.removePresonalFriend(this.personalId, this._friend)
  }
  
  get name () {
    return this._friends.name;
  }
}

PersonalView.jsx

export default ({ id }) => {
  const viewModel = new PersonalViewModel(id);

  useEffect(() => {
    viewModel.onLoad();
  });
  
  return (<div>
    <h1>
      { 
        Binding({
          dataContext: viewModel,
          path: "fullName",
          mode: ViewModelMode.OneWay
        })
      }
    </h1>
    <input {...Binding({dataContext: viewModel, path: "age", mode: ViewModelMode.TwoWay})}
    <table>
     {
        viewModel.friends.Map(tableFriendLineBuilder)
     }
    </table>
           
  </div>);
}

function tableFriendLineBuilder(friendViewModel) {
  return (<tr>
            <td>{Binding({dataContext: viewModel, path: "name", mode: ViewModelMode.OneWay})}</td>
            <td><button onclick={friendViewModel.delete}></td>
          <tr>);
}

PersonalViewModel.js

class PersonalViewModel extends ViewModelBase {
  _id;
  _data;
  _friends;
  
  constructor(id) {
    this._id = id
  }
  
  onLoad() {
    this._data = personalService.find(this.id);
    this._friends = this._data.friends.map(friend => new FriendViewModel(friend));
  }
  
  get fullName () { return this._data && `${this._data.firstName} ${this._data.lastName}`; }
  
  get age () {
    return this._data.age;
  }
  
  set age (value) {
    this._data.age = value;
    this.raisePropertyChanged("age");
    this.raisePropertyChanged("isMajor");
  }
  
  get isMajor() {
    return this._data.age > 17;
  }
  
  get friends () {
    return this._friends;
  }
}

ViewModeBase.js

class ViewModelBase {
  handlers;
  
  subscribeOnPropertyChanged(path, handler) {
    if(!this.handlers[path]) {
      this.handlers[path] = [];
    }
    this.handlers[path].push(handler);
  }
  
  unsubscribeOnPropertyChanged(path, handler) {
    this.handlers[path].splice(this.handlers[path].indexOf(handler), 1);
  }
  
  raisePropertyChanged(path) {
    data = this[path];
    
    this.handlers[path].forEach(handler => handler(data));
  }
}