@scripty/react-store/lib/Store.js

This lightweight global react hook store is inspired by the extjs store architecture. Share your stores through your application with only a few lines of code!

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Store = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _ = require("./");

var _Model = require("./Model");

var Store = /*#__PURE__*/function () {
  function Store(store) {
    (0, _classCallCheck2["default"])(this, Store);
    var name = store.name,
        model = store.model,
        proxy = store.proxy;
    var api = proxy.api,
        rootProperty = proxy.rootProperty;
    this.name = name;
    this.model = model;
    this.proxy = this.getProxy(api, rootProperty);
    this.data = [new _Model.Model(model)];
    this.rawData = [];
    this.filteredData = [];
    this.pagination = {
      total: 0,
      page: 0,
      results: 0
    };
    this.updated = [];
    this.removed = [];
    this.created = [];
  }

  (0, _createClass2["default"])(Store, [{
    key: "createModel",
    value: function createModel(data) {
      var model = new _Model.Model(this.model);
      model.set(data);
      return model;
    }
  }, {
    key: "getProxy",
    value: function getProxy(api, rootProperty) {
      var _this = this;

      if (api) {
        var proxy = {};
        Object.keys(api).forEach(function (key) {
          proxy[key] = /*#__PURE__*/function () {
            var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(data) {
              var response;
              return _regenerator["default"].wrap(function _callee$(_context) {
                while (1) {
                  switch (_context.prev = _context.next) {
                    case 0:
                      _context.next = 2;
                      return (0, _.request)(api[key].method, api[key].url, data);

                    case 2:
                      response = _context.sent;

                      _this.present(response, rootProperty);

                      return _context.abrupt("return", response);

                    case 5:
                    case "end":
                      return _context.stop();
                  }
                }
              }, _callee);
            }));

            return function (_x) {
              return _ref.apply(this, arguments);
            };
          }();
        });
        return proxy;
      }
    }
  }, {
    key: "getDirtyRecords",
    value: function getDirtyRecords() {
      return {
        created: this.created,
        updated: this.updated,
        removed: this.removed
      };
    }
  }, {
    key: "present",
    value: function present(response, rootProperty) {
      if (typeof response.pagination !== 'undefined') {
        this.pagination = response.pagination;
      }

      if (typeof response.updated !== 'undefined') {
        this.updatedData = this.getModelRecords(response.updated);
        this.rawUpdatedData = response.updated;
      }

      if (typeof response.destroyed !== 'undefined') {
        this.deletedData = this.getModelRecords(response.destroyed);
        this.rawDeletedData = response.destroyed;
      }

      if (rootProperty) {
        response = response[rootProperty];
      }

      if (typeof response !== 'undefined' && response.length > 0) {
        this.rawData = response;
        this.data = this.getModelRecords(response);
        this.cachedData = this.getModelRecords(response);
      } else {
        this.data = [new _Model.Model(this.model, this.callback.bind(this))];
        this.cachedData = [new _Model.Model(this.model, this.callback.bind(this))];
      }

      this.created = [];
      this.updated = [];
      this.removed = [];
      this.saveGlobalStore();
    }
  }, {
    key: "callback",
    value: function callback() {
      if (this.saveGlobalStore) {
        this.saveGlobalStore();
      }
    }
  }, {
    key: "getModelRecords",
    value: function getModelRecords(data) {
      var _this2 = this;

      return data.map(function (record) {
        var model = new _Model.Model(_this2.model, _this2.callback.bind(_this2));
        model.set(record);
        return model;
      });
    }
  }, {
    key: "getAt",
    value: function getAt(index) {
      return this.data[index];
    }
  }, {
    key: "filter",
    value: function filter(field, value) {
      this.filteredData = this.data.filter(function (record) {
        if (record[field].toString() === value) {
          return record;
        }
      });

      if (this.filteredData.length > 0) {
        this.data = this.filteredData;
        this.saveGlobalStore();
        return this.data[0];
      }

      this.data = this.cachedData;
      return this.data;
    }
  }, {
    key: "clearFilter",
    value: function clearFilter() {
      this.data = this.cachedData;
      this.saveGlobalStore();
    }
  }, {
    key: "add",
    value: function add(model) {
      var _this3 = this;

      if (typeof model === 'array') {
        model.forEach(function (record) {
          _this3.data.push(record);
        });
      }

      this.data.push(model);

      if (!this.created.some(function (data) {
        return JSON.stringify(data) === JSON.stringify(model);
      })) {
        this.created.push(model);
      }

      this.saveGlobalStore();
    }
  }, {
    key: "update",
    value: function update(model) {
      this.data = this.data.map(function (rec) {
        if (rec._id === model._id) {
          return model;
        }

        return rec;
      }).filter(function (rec) {
        return typeof rec !== 'undefined';
      });

      if (!this.updated.some(function (data) {
        return JSON.stringify(data) === JSON.stringify(model);
      })) {
        this.updated.push(model);
      }

      this.saveGlobalStore();
    }
  }, {
    key: "removeAt",
    value: function removeAt(index) {
      this.data.splice(index, 1);
      this.rawData.splice(index, 1);
      this.saveGlobalStore();
    }
  }, {
    key: "removeById",
    value: function removeById(_id) {
      var removed = this.data.find(function (rec) {
        return rec._id === _id;
      });
      this.data = this.data.filter(function (rec) {
        return rec._id !== _id;
      });

      if (removed) {
        this.removed.push(removed);
      }

      this.saveGlobalStore();
    }
  }, {
    key: "removeAll",
    value: function removeAll() {
      this.data.splice(0, this.data.length);
      this.rawData.splice(0, this.rawData.length);
      this.saveGlobalStore();
    }
  }, {
    key: "saveGlobalStore",
    value: function saveGlobalStore() {
      window.globalStorage.setStore({
        data: window.globalStorage.data
      });
    }
  }]);
  return Store;
}();

exports.Store = Store;