redux-paginator-immutable 17.0.16 → 17.0.21

package/lib/util.js

@@ -1,73 +1,49 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.manageEntity = exports.manipulateItems = exports.manipulateDataItems = exports.manageDataEntity = undefined;
-
-var _immutable = require("immutable");
-
-var Immutable = _interopRequireWildcard(_immutable);
-
-var _reselect = require("reselect");
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-// simple item
-
-/* eslint-disable no-duplicate-imports */
-
-var manageEntity = function manageEntity(normalizrEntity) {
-  return function (item, state, keyID) {
-    // prevent rewrite
-    var old = state.get(String(item[keyID]));
-
-    if (typeof old === "undefined") {
-      return Immutable.Map(normalizrEntity(item));
-    }
-
-    return old;
-  };
-},
-    manipulateItems = function manipulateItems() {
-  var sortKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "ID";
-  return (0, _reselect.createSelector)(function (data) {
-    return data;
-  }, function (data) {
-    return data.sortBy(function (current) {
-      return -current.get(sortKey);
-    });
-  });
-};
-
-// data item
-
-var manageDataEntity = function manageDataEntity(normalizrEntity) {
-  return function (item, state, keyID) {
-    // prevent rewrite
-    var old = state.get(String(item[keyID]));
-
-    if (typeof old === "undefined") {
-      return Immutable.Map({
-        Data: normalizrEntity(item)
-      });
-    }
-
-    return old;
-  };
-},
-    manipulateDataItems = function manipulateDataItems() {
-  var sortKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "ID";
-  return (0, _reselect.createSelector)(function (data) {
-    return data;
-  }, function (data) {
-    return data.sortBy(function (current) {
-      return -current.getIn(["Data", sortKey]);
-    });
-  });
-};
-
-exports.manageDataEntity = manageDataEntity;
-exports.manipulateDataItems = manipulateDataItems;
-exports.manipulateItems = manipulateItems;
-exports.manageEntity = manageEntity;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.manageEntity = exports.manipulateItems = exports.manipulateDataItems = exports.manageDataEntity = void 0;
+const Immutable = __importStar(require("immutable"));
+const reselect_1 = require("reselect");
+// simple item
+const manageEntity = (normalizrEntity) => ((item, state, keyID) => {
+    // prevent rewrite
+    const old = state.get(String(item[keyID]));
+    if (typeof old === "undefined") {
+        return Immutable.Map(normalizrEntity(item));
+    }
+    return old;
+}), manipulateItems = (sortKey = "ID") => (0, reselect_1.createSelector)((data) => data, (data) => data.sortBy((current) => -current.get(sortKey))), 
+// data item
+manageDataEntity = (normalizrEntity) => ((item, state, keyID) => {
+    // prevent rewrite
+    const old = state.get(String(item[keyID]));
+    if (typeof old === "undefined") {
+        return Immutable.Map({
+            Data: normalizrEntity(item),
+        });
+    }
+    return old;
+}), manipulateDataItems = (sortKey = "ID") => ((0, reselect_1.createSelector)((data) => data, (data) => data.sortBy((current) => -current.getIn(["Data", sortKey]))));
+exports.manageEntity = manageEntity;
+exports.manipulateItems = manipulateItems;
+exports.manageDataEntity = manageDataEntity;
+exports.manipulateDataItems = manipulateDataItems;
+//# sourceMappingURL=util.js.map

package/lib/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,qDAAuC;AACvC,uCAA0C;AAI1C,cAAc;AACd,MACE,YAAY,GAAG,CAAC,eAAgC,EAAE,EAAE,CAAC,CACnD,CAAC,IAAS,EAAE,KAAU,EAAE,KAAa,EAAoB,EAAE;IACzD,kBAAkB;IAClB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAE3C,IAAI,OAAO,GAAG,KAAK,WAAW,EAAE;QAC9B,OAAO,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;KAC7C;IAED,OAAO,GAAG,CAAC;AACb,CAAC,CACF,EACD,eAAe,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,EAAE,CAAC,IAAA,yBAAc,EAClD,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,EACpB,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAa,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CACtE;AAED,YAAY;AACZ,gBAAgB,GAAG,CAAC,eAAgC,EAAE,EAAE,CAAC,CACvD,CAAC,IAAS,EAAE,KAAU,EAAE,KAAa,EAAoB,EAAE;IACzD,kBAAkB;IAClB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAE3C,IAAI,OAAO,GAAG,KAAK,WAAW,EAAE;QAC9B,OAAO,SAAS,CAAC,GAAG,CAAC;YACnB,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC;SAC5B,CAAC,CAAC;KACJ;IAED,OAAO,GAAG,CAAC;AACb,CAAC,CACF,EACD,mBAAmB,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,EAAE,CAAC,CACxC,IAAA,yBAAc,EACZ,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,EACpB,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAa,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAClF,CACF,CAAC;AAE6D,oCAAY;AAA7B,0CAAe;AAAtD,4CAAgB;AAAE,kDAAmB"}

package/lib/words.d.ts

@@ -0,0 +1,9 @@
+declare const words: {
+    ThereWasAProblem: string;
+    Showing: string;
+    All: string;
+    Of: string;
+    LoadingData: string;
+    LoadMore: string;
+};
+export default words;

package/lib/words.js

@@ -1,15 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var words = {
-  ThereWasAProblem: "There was a problem. Try again",
-  Showing: "Showing",
-  All: "all",
-  Of: "of",
-  LoadingData: "Loading data...",
-  LoadMore: "Load more"
-};
-
-exports.default = words;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const words = {
+    ThereWasAProblem: "There was a problem. Try again",
+    Showing: "Showing",
+    All: "all",
+    Of: "of",
+    LoadingData: "Loading data...",
+    LoadMore: "Load more",
+};
+exports.default = words;
+//# sourceMappingURL=words.js.map

package/lib/words.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"words.js","sourceRoot":"","sources":["../src/words.ts"],"names":[],"mappings":";;AAAA,MAAM,KAAK,GAAG;IACZ,gBAAgB,EAAG,gCAAgC;IACnD,OAAO,EAAY,SAAS;IAC5B,GAAG,EAAgB,KAAK;IACxB,EAAE,EAAiB,IAAI;IACvB,WAAW,EAAQ,iBAAiB;IACpC,QAAQ,EAAW,WAAW;CAC/B,CAAC;AAEF,kBAAe,KAAK,CAAC"}

package/package.json

@@ -1,25 +1,30 @@
 {
   "name": "redux-paginator-immutable",
-  "version": "17.0.16",
+  "version": "17.0.21",
+  "types": "./lib/index.d.ts",
   "description": "redux-paginator-immutable helps you deal with paginated API by composing your existing reducers",
   "main": "./lib/index.js",
   "babel": {
+    "ignore": [
+      "**/__tests__",
+      "**/types"
+    ],
     "presets": [
-      "env",
-      "stage-0",
-      "react"
+      "@babel/env",
+      "@babel/preset-typescript",
+      "@babel/preset-react"
     ],
     "env": {
       "production": {
         "plugins": [
           "@babel/plugin-syntax-dynamic-import",
-          "transform-decorators-legacy",
-          "react-html-attrs",
-          "transform-class-properties",
-          "transform-react-constant-elements",
-          "transform-react-inline-elements",
-          "transform-react-remove-prop-types",
-          "transform-flow-strip-types"
+          "@babel/plugin-proposal-class-properties",
+          "@babel/plugin-proposal-export-default-from",
+          "@babel/plugin-transform-modules-commonjs",
+          "@babel/plugin-transform-react-constant-elements",
+          "@babel/plugin-transform-react-inline-elements",
+          "@babel/plugin-transform-typescript",
+          "transform-react-remove-prop-types"
         ]
       },
       "developmentTime": {
@@ -31,18 +36,19 @@
     }
   },
   "scripts": {
-    "build:lib": "babel src --out-dir lib",
+    "build:lib": "@babel src --extensions .ts,.tsx  --out-dir lib",
     "build:umd": "cross-env NODE_ENV=development webpack src/index.js dist/redux-paginator-immutable.js",
     "build:umd:min": "cross-env NODE_ENV=production webpack src/index.js dist/redux-paginator-immutable.min.js",
     "build": "npm run build:lib",
     "clean": "rimraf dist lib",
     "check": "npm-check -u -i babel-jest -i jest --specials=bin,eslint,babel,webpack",
-    "eslint": "eslint --ext .jsx,.js src --fix",
-    "load": "npm run test && npm run eslint && npm run clean && npm run build && npm publish",
-    "test": "mocha --require babel-core/register --recursive --recursive \"src/**/__tests__/*\" --require src/__tests__/setup.js",
+    "eslint": "eslint --ext .jsx,.js,.ts,.tsx src --fix",
+    "load": "npm run test && npm run clean && npm run eslint && npm run ts && npm publish",
+    "test": "ts-mocha src/__tests__/*.spec.js",
     "test:watch": "npm test -- --watch",
     "test:cov": "babel-node ./node_modules/isparta/bin/isparta cover ./node_modules/mocha/bin/_mocha -- --recursive \"src/**/__tests__/*\" --require src/__tests__/setup.js",
-    "test:codecov": "cat ./coverage/coverage.json | ./node_modules/.bin/codecov"
+    "test:codecov": "cat ./coverage/coverage.json | ./node_modules/.bin/codecov",
+    "ts": "tsc --declaration"
   },
   "repository": {
     "type": "git",
@@ -70,7 +76,12 @@
   },
   "homepage": "https://github.com/cristian-sima/redux-paginator-immutable#readme",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
+    "@babel/cli": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-typescript": "^7.16.7",
+    "@types/superagent": "^4.1.15",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
@@ -83,19 +94,22 @@
     "codecov": "^3.8.1",
     "cross-env": "^6.0.3",
     "es3ify": "^0.2.2",
-    "eslint": "^6.7.0",
+    "eslint": "^8.8.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react": "^7.23.1",
     "expect": "^24.9.0",
-    "flow-bin": "^0.148.0",
     "flux-standard-action": "^2.1.1",
     "glob": "^7.1.6",
     "isparta": "^4.1.1",
     "mocha": "^6.2.2",
     "npm-check": "^5.9.2",
     "rimraf": "^3.0.2",
-    "webpack": "^4.41.2"
+    "ts-mocha": "^9.0.2",
+    "typescript": "^4.5.5",
+    "webpack": "^5.68.0"
   },
   "dependencies": {
+    "create-subscription": "^17.0.0",
     "depcheck": "^1.4.3",
     "immutable": "*",
     "query-string": "^7.1.0",
@@ -103,6 +117,6 @@
     "redux": "^4.1.2",
     "reselect": "^4.1.5",
     "superagent": "^7.1.1",
-    "x25": "^17.0.16"
+    "x25": "^17.0.17"
   }
 }

package/src/Info.tsx

@@ -0,0 +1,29 @@
+type InfoPropTypes = {
+  shown: number;
+  total: number;
+  one: string;
+  all: string;
+};
+
+import React from "react";
+import { words as x25Words } from "x25/utility";
+import words from "./words";
+
+const
+  getNumberForm = (value: number, one: string, all: string): string => {
+    if (value === 1) {
+      return `1 ${one}`;
+    }
+
+    return `${x25Words.getNumberTense(value)} ${all}`;
+  },
+
+  Info = ({ shown, total, one, all }: InfoPropTypes) => (
+    <div className="text-muted">
+      {`${words.Showing} `}
+      {shown === total ? `${words.All} - ` : `${shown} ${words.Of}`}
+      {` ${getNumberForm(total, one, all)}`}
+    </div>
+  );
+
+export default Info;

package/src/LoadDataItem.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+type LoadDataItemPropTypes = {
+  isFetching: boolean;
+  fetched: boolean;
+  id: string;
+  hasError: boolean;
+  data: any;
+  children: React.ReactNode;
+  shouldFetch: any;
+  fetchItem: () => void;
+};
+type OwnProps = {
+  id: string;
+  settings: {
+    selectors: any;
+    dataItemURL: string;
+    endpoint: string;
+    manageEntity: any;
+    normalizeDataItem: any;
+  };
+};
+import { connect } from "react-redux";
+import { LargeErrorMessage, LoadingMessage } from "x25/Messages";
+import { fetchItem as fetchItemAction } from "./actions";
+import words from "./words";
+
+const
+  mapStateToProps = (state: any, {
+    settings: {
+      selectors,
+    },
+    id,
+  }: OwnProps) => ({
+    data        : selectors.getItem(state, id),
+    hasError    : selectors.getItemHasError(state, id),
+    fetched     : selectors.getItemIsFetched(state, id),
+    isFetching  : selectors.getIsFetchingItemInfo(state, id),
+    shouldFetch : selectors.getShouldFetchItemInfo(state, id),
+  }),
+  mapDispatchToProps = (dispatch: any, {
+    id,
+    settings,
+  }: OwnProps) => ({
+    fetchItem () {
+      dispatch(fetchItemAction({
+        ...settings,
+        id,
+      }));
+    },
+  }),
+
+  LoadDataItem = (props: LoadDataItemPropTypes) : any => {
+    const {
+      children,
+      data,
+      isFetching,
+      shouldFetch,
+      hasError,
+      fetchItem,
+    } = props;
+
+    React.useEffect(() => {
+      if (shouldFetch) {
+        fetchItem();
+      }
+    }, [shouldFetch, isFetching, hasError]);
+
+    if (isFetching) {
+      return <LoadingMessage message={words.LoadingData} />;
+    }
+
+    if (hasError) {
+      return <LargeErrorMessage message={words.ThereWasAProblem} onRetry={fetchItem} />;
+    }
+
+    if (data.size === 0) {
+      return null;
+    }
+
+    return children;
+  };
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoadDataItem);

package/src/{LoadPaginator.jsx → LoadPaginator.tsx}

@@ -1,72 +1,59 @@
-// @flow
-/* eslint-disable  */
+
+import React, { Component } from "react";
+import * as Immutable from "immutable";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { LargeErrorMessage, LoadingMessage } from "x25/Messages";
+import selectors from "./selectors";
+import LoadingButton from "./LoadingButton";
+import words from "./words";
 
 type Settings = {
   key: string;
   rowsPerLoad: number;
   manipulateItems: (items: any) => void;
-  resetView: (data : any) => void;
+  resetView: (data: any) => void;
   changeView: (data: any) => void;
-  requestPage: (page: string, token : string) => any;
-}
-
+  requestPage: (page: string, token: string) => any;
+};
 type OwnProps = {
   token: string;
   settings: Settings;
 };
-
 type LoadPaginatorPropTypes = {
   token: string;
   children: any;
   settings: Settings;
   paginator: any;
-  // {
-  //   currentPage,
-  //   isFetching,
-  //   isFetched,
-  //   shouldLoadNext,
-  //   items,
-  //   hasProblems,
-  //   total,
-  // }
-
-  changeView: (info : { token: string, view: number }) => void;
-  resetView: (token : string) => void;
-
-  loadData: (page : number) => void;
-  changeFilter: (filter : string) => (event : { target : { value : string } }) => void;
+  changeView: (info: {
+    token: string;
+    view: number;
+  }) => void;
+  resetView: (token: string) => void;
+  loadData: (page: number) => void;
+  changeFilter: (filter: string) => (event: {
+    target: {
+      value: string;
+    };
+  }) => void;
 };
 
-import React, { Component } from "react";
-import * as Immutable from "immutable";
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
-
-import selectors from "./selectors";
-
-import LoadingButton from "./LoadingButton";
-
-import { LargeErrorMessage, LoadingMessage } from "x25/Messages";
-import words from "./words";
-
-const mapStateToProps = (state, { token, settings } : OwnProps) => {
-
-    const { list, entities } = selectors.getPaginators(state, settings.key);
-
+const
+  mapStateToProps = (state : any, { token, settings }: OwnProps) => {
     const
+      { list, entities } = selectors.getPaginators(state, settings.key),
       currentPage = selectors.getCurrentView(list, token),
       isFetching = selectors.isPageFetching(list, token, currentPage),
       isFetched = selectors.isPageFetched(list, token, currentPage),
       isNextFetching = selectors.isPageFetching(list, token, currentPage + 1),
       isNextFetched = selectors.isPageFetched(list, token, currentPage + 1),
-      resultsUpTo = (
-        selectors.getResultsUpToPage(list, token, entities, currentPage, settings.rowsPerLoad)
-      ),
+      // eslint-disable-next-line max-len
+      resultsUpTo = selectors.getResultsUpToPage(list, token, entities, currentPage, settings.rowsPerLoad),
       items = settings.manipulateItems(resultsUpTo),
       total = selectors.getCurrentTotalResultsCount(list, token),
-      hasProblems = selectors.hasPageProblems(list, token, currentPage);
-
-    const shouldLoadNext = !isNextFetched && !isNextFetching;
+      // currentPage was previously given to the following function
+      hasProblems = selectors.hasPageProblems(list, token),
+      shouldLoadNext = !isNextFetched && !isNextFetching;
 
     return {
       paginator: Immutable.Map({
@@ -80,27 +67,59 @@ const mapStateToProps = (state, { token, settings } : OwnProps) => {
       }),
     };
   },
-  mapDispatchToProps = (dispatch, { token, settings } : OwnProps) => ({
+  mapDispatchToProps = (dispatch : any, {
+    token,
+    settings,
+  }: OwnProps) => ({
     ...bindActionCreators({
       resetView  : settings.resetView,
       changeView : settings.changeView,
     }, dispatch),
-    loadData (page) {
+    loadData (page : any) {
       dispatch(settings.requestPage(page, token));
     },
   });
 
+
+// new
+
+/* eslint-disable */
 class LoadPaginator extends Component<LoadPaginatorPropTypes> {
 
-  handleLoadMoreClick: () => void;
+  handleLoadMoreClick: () => any;
+
+  componentDidMount () {
+    const
+      { paginator, loadData } = this.props,
+      isFetched = paginator.get("isFetched"),
+      isFetching = paginator.get("isFetching"),
+      currentPage = paginator.get("currentPage"),
+      shouldFetch = !isFetched && !isFetching;
+
+    if (shouldFetch) {
+      loadData(currentPage);
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps (nextProps : LoadPaginatorPropTypes) {
+    const
+      { loadData, paginator } = nextProps,
+      isFetched = paginator.get("isFetched"),
+      isFetching = paginator.get("isFetching"),
+      currentPage = paginator.get("currentPage"),
+      shouldFetch = !isFetched && !isFetching;
 
-  constructor (props : LoadPaginatorPropTypes) {
+    if (shouldFetch) {
+      loadData(currentPage);
+    }
+  }
+
+  constructor (props: LoadPaginatorPropTypes) {
     super(props);
 
     this.handleLoadMoreClick = () => {
-      const { paginator, token, changeView, loadData } = this.props;
-
       const
+        { paginator, token, changeView, loadData } = this.props,
         currentPage = paginator.get("currentPage"),
         hasProblems = paginator.get("hasProblems"),
         shouldLoadNext = paginator.get("shouldLoadNext");
@@ -120,40 +139,8 @@ class LoadPaginator extends Component<LoadPaginatorPropTypes> {
     };
   }
 
-  UNSAFE_componentWillMount () {
-    const { paginator, loadData } = this.props;
-
-    const
-      isFetched = paginator.get("isFetched"),
-      isFetching = paginator.get("isFetching"),
-      currentPage = paginator.get("currentPage");
-
-    const shouldFetch = !isFetched && !isFetching;
-
-    if (shouldFetch) {
-      loadData(currentPage);
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    const { loadData, paginator } = nextProps;
-
-    const
-      isFetched = paginator.get("isFetched"),
-      isFetching = paginator.get("isFetching"),
-      currentPage = paginator.get("currentPage");
-
-    const shouldFetch = !isFetched && !isFetching;
-
-    if (shouldFetch) {
-      loadData(currentPage);
-    }
-  }
-
-  shouldComponentUpdate (nextProps : LoadPaginatorPropTypes) {
-    return (
-      this.props.paginator !== nextProps.paginator
-    );
+  shouldComponentUpdate (nextProps: LoadPaginatorPropTypes) {
+    return this.props.paginator !== nextProps.paginator;
   }
 
   componentWillUnmount () {
@@ -161,23 +148,18 @@ class LoadPaginator extends Component<LoadPaginatorPropTypes> {
   }
 
   render () {
-    const { paginator } = this.props;
-
     const
+      { paginator } = this.props,
       items = paginator.get("items"),
       hasProblems = paginator.get("hasProblems"),
       currentPage = paginator.get("currentPage"),
       isFetching = paginator.get("isFetching"),
-      total = paginator.get("total");
-
-    const
+      total = paginator.get("total"),
       isEmpty = items.size === 0,
       showLoading = total !== items.size;
 
     if (isEmpty && isFetching) {
-      return (
-        <LoadingMessage message={words.LoadingData} />
-      );
+      return <LoadingMessage message={words.LoadingData} />;
     }
 
     if (hasProblems && currentPage === 1) {
@@ -190,7 +172,7 @@ class LoadPaginator extends Component<LoadPaginatorPropTypes> {
     }
 
     return (
-      <React.Fragment>
+      <>
         {React.cloneElement(this.props.children, this.props)}
         {
           showLoading ? (
@@ -201,9 +183,10 @@ class LoadPaginator extends Component<LoadPaginatorPropTypes> {
             />
           ) : null
         }
-      </React.Fragment>
+      </>
     );
   }
+
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(LoadPaginator);