suivi-cqrs-react v1.0.5

What is Suivi CQRS Library ?

Suivi CQRS library is a convenience package that contains all packages needed to build a CQRS write side with DDD concepts. It groups together other lightweight libraries:

• Domain Driven - contains Domain Driven Design (DDD) components/concepts.
• Command Stack - contains components for handling commands.
• Event Stack - contains components for handling events.

Tech

This library is written in typescript and therefore will always support typescript

Installation

$ npm install suivi-cqrs-react --save

Features

• Manage commands
• Manage events
• Mange undo / redo commands

Usage

import React from "react";
import {
  UndoManager,
  RedoManager,
  dataStore,
  DataStoreContext,
  UndosContext,
  RedosContext,
  IStore,
  ICommand
} from "suivi-cqrs-react";

import BoardDetails from "./containers/Board";

interface State {
  store: IStore;
  undos: ICommand<any>[];
  redos: ICommand<any>[];
}

class App extends React.PureComponent<{}, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      undos: UndoManager.undos,
      redos: RedoManager.redos,
      store: dataStore.getStore()
    };
    this.setStore = this.setStore.bind(this);
    this.setUndos = this.setUndos.bind(this);
    this.setRedos = this.setRedos.bind(this);
    dataStore.onStoreUpdate = this.setStore;
    UndoManager.onUndosChanged = this.setUndos;
    RedoManager.onRedosChanged = this.setRedos;
  }

  public componentDidMount(): void {
    const storeStorage: string = localStorage.getItem("store");
    if (storeStorage) {
      const store: IStore = JSON.parse(storeStorage);
      if (this.state.store.board.id === store.board.id) {
        const undosStorage: string = localStorage.getItem("undos");
        const redosStorage: string = localStorage.getItem("redos");
        const undosCommandsStorage: string = localStorage.getItem(
          "undosCommands"
        );
        dataStore.init(JSON.parse(storeStorage));
        if (undosStorage)
          UndoManager.setUndos(
            JSON.parse(undosStorage),
            JSON.parse(undosCommandsStorage)
          );
        if (redosStorage) RedoManager.setRedos(JSON.parse(redosStorage));
      }
    }
  }

  public componentDidUpdate(_: any, { store, undos, redos }: State): void {
    if (undos !== this.state.undos) {
      localStorage.setItem("undos", JSON.stringify(this.state.undos));
      localStorage.setItem(
        "undosCommands",
        JSON.stringify(UndoManager.undosCommands)
      );
    }
    if (redos !== this.state.redos)
      localStorage.setItem("redos", JSON.stringify(this.state.redos));
    if (store !== this.state.store)
      localStorage.setItem("store", JSON.stringify(this.state.store));
  }

  public setStore(store: IStore): void {
    this.setState({ store });
  }

  public setUndos(undos: ICommand<any>[]): void {
    this.setState({ undos });
  }

  public setRedos(redos: ICommand<any>[]): void {
    this.setState({ redos });
  }

  public render(): JSX.Element {
    const { store, undos, redos } = this.state;
    return (
      <DataStoreContext.Provider value={store}>
        <UndosContext.Provider value={undos}>
          <RedosContext.Provider value={redos}>
            <BoardDetails />
          </RedosContext.Provider>
        </UndosContext.Provider>
      </DataStoreContext.Provider>
    );
  }
}

export default App;

License

MIT © HamzaMhadbi