redux-paginator-immutable 17.0.16 → 17.0.18

package/lib/__tests__/createPaginator.spec.js

@@ -22,8 +22,8 @@ describe("createPaginator", function () {
       idKey: "id_field",
       resultsKey: "results",
       totalKey: "count"
-    });
-    var action = paginator.requestPage(42, "foo=bar");
+    }),
+        action = paginator.requestPage(42, "foo=bar");
 
     (0, _expect2.default)(action).toEqual(requestPage({
       endpoint: "some/api/endpoint",

package/lib/__tests__/reducers.spec.js

@@ -36,9 +36,8 @@ var requestPageAction = requestPage({
   idKey: "id",
   page: 2,
   token: "foo=bar"
-});
-
-var receivePageAction = receivePage({
+}),
+    receivePageAction = receivePage({
   endpoint: "some/api/endpoint/",
   pageArgName: "p",
   idKey: "id",

package/lib/__tests__/selectors.spec.js

@@ -8,14 +8,14 @@ var _chaiImmutable = require("chai-immutable");
 
 var _chaiImmutable2 = _interopRequireDefault(_chaiImmutable);
 
-var _selectors = require("../selectors");
-
-var _selectors2 = _interopRequireDefault(_selectors);
-
 var _immutable = require("immutable");
 
 var Immutable = _interopRequireWildcard(_immutable);
 
+var _selectors = require("../selectors");
+
+var _selectors2 = _interopRequireDefault(_selectors);
+
 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; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,10 +29,8 @@ var getCurrentTotalResultsCount = _selectors2.default.getCurrentTotalResultsCoun
     getResultsUpToPage = _selectors2.default.getResultsUpToPage,
     isPageFetched = _selectors2.default.isPageFetched,
     isPageFetching = _selectors2.default.isPageFetching,
-    getCurrentView = _selectors2.default.getCurrentView;
-
-
-var paginator = Immutable.Map({
+    getCurrentView = _selectors2.default.getCurrentView,
+    paginator = Immutable.Map({
   "foo=bar": Immutable.Map({
     page: 3,
     token: "foo=bar",
@@ -51,9 +49,8 @@ var paginator = Immutable.Map({
     total: 17,
     view: 1
   })
-});
-
-var items = Immutable.Map({
+}),
+    items = Immutable.Map({
   "1": Immutable.Map({
     data: "foo1",
     id: 1
@@ -92,9 +89,10 @@ var items = Immutable.Map({
   })
 });
 
+
 describe("selectors", function () {
 
-  it("getAllResults shoud select all the items ids for pages with same params than the current page", function () {
+  it("getAllResults should select all the items ids for pages with same params than the current page", function () {
     (0, _chai.expect)(getAllResults(paginator, "foo=bar", items)).to.equal(Immutable.List([Immutable.Map({
       data: "foo1",
       id: 1
@@ -116,7 +114,7 @@ describe("selectors", function () {
     })]));
   });
 
-  it("getResultsUpToPage shoud select all the items ids for pages with same params than the current page", function () {
+  it("getResultsUpToPage should select all the items ids for pages with same params than the current page", function () {
     (0, _chai.expect)(getResultsUpToPage(paginator, "foo=bar", items, 2, 2)).to.equal(Immutable.List([Immutable.Map({
       data: "foo1",
       id: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-paginator-immutable",
-  "version": "17.0.16",
+  "version": "17.0.18",
   "description": "redux-paginator-immutable helps you deal with paginated API by composing your existing reducers",
   "main": "./lib/index.js",
   "babel": {
@@ -37,12 +37,13 @@
     "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 ts && npm run eslint && npm run clean && npm run build && 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  --build --clean"
   },
   "repository": {
     "type": "git",
@@ -70,6 +71,9 @@
   },
   "homepage": "https://github.com/cristian-sima/redux-paginator-immutable#readme",
   "devDependencies": {
+    "@types/superagent": "^4.1.15",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
@@ -83,19 +87,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",
+    "ts-mocha": "^9.0.2",
+    "typescript": "^4.5.5",
     "webpack": "^4.41.2"
   },
   "dependencies": {
+    "create-subscription": "^17.0.0",
     "depcheck": "^1.4.3",
     "immutable": "*",
     "query-string": "^7.1.0",

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);

package/src/LoadingButton.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { ErrorMessage, LoadingMessage } from "x25/Messages";
+
+type LoadingButtonPropTypes = {
+  isFetching: boolean;
+  hasProblems: boolean;
+  onLoadMoreClick: () => void;
+};
+import words from "./words";
+
+class LoadingButton extends React.Component<LoadingButtonPropTypes> {
+
+  shouldComponentUpdate (nextProps: LoadingButtonPropTypes) {
+    const { hasProblems, isFetching } = this.props;
+
+    return hasProblems !== nextProps.hasProblems || isFetching !== nextProps.isFetching;
+  }
+
+  render () {
+    const { isFetching, hasProblems, onLoadMoreClick } = this.props;
+
+    return (
+      <div className="text-center my-2">
+        {hasProblems ? <ErrorMessage message={words.ThereWasAProblem} /> : null}
+        {isFetching ? <LoadingMessage message={words.LoadingData} sm /> : (
+          <button
+            className="btn btn-outline-info d-print-none"
+            disabled={isFetching}
+            onClick={onLoadMoreClick}
+            type="button">
+            {isFetching ? words.LoadingData : words.LoadMore}
+          </button>
+        )}
+      </div>
+    );
+  }
+
+}
+
+export default LoadingButton;

package/src/__tests__/createPaginator.spec.js

@@ -16,12 +16,12 @@ describe("createPaginator", () => {
 
   it("should create correct request action creator", () => {
     const paginator = createPaginator("some/api/endpoint", {
-      pageArgName : "p",
-      idKey       : "id_field",
-      resultsKey  : "results",
-      totalKey    : "count",
-    });
-    const action = paginator.requestPage(42, "foo=bar");
+        pageArgName : "p",
+        idKey       : "id_field",
+        resultsKey  : "results",
+        totalKey    : "count",
+      }),
+      action = paginator.requestPage(42, "foo=bar");
 
     expect(action).
       toEqual(requestPage({

package/src/__tests__/reducers.spec.js

@@ -20,33 +20,33 @@ import {
 } from "../reducers";
 
 const requestPageAction = requestPage({
-  endpoint    : "some/api/endpoint",
-  resultsKey  : "results",
-  totalKey    : "total",
-  pageArgName : "p",
-  idKey       : "id",
-  page        : 2,
-  token       : "foo=bar",
-});
-
-const receivePageAction = receivePage({
-  endpoint    : "some/api/endpoint/",
-  pageArgName : "p",
-  idKey       : "id",
-  page        : 2,
-  token       : "foo=bar",
-  items       : [
-    {
-      id       : "baz",
-      fooField : "bazValue",
-    },
-    {
-      id       : "bar",
-      fooField : "barValue",
-    },
-  ],
-  total: 2,
-});
+    endpoint    : "some/api/endpoint",
+    resultsKey  : "results",
+    totalKey    : "total",
+    pageArgName : "p",
+    idKey       : "id",
+    page        : 2,
+    token       : "foo=bar",
+  }),
+
+  receivePageAction = receivePage({
+    endpoint    : "some/api/endpoint/",
+    pageArgName : "p",
+    idKey       : "id",
+    page        : 2,
+    token       : "foo=bar",
+    items       : [
+      {
+        id       : "baz",
+        fooField : "bazValue",
+      },
+      {
+        id       : "bar",
+        fooField : "barValue",
+      },
+    ],
+    total: 2,
+  });
 
 describe("pages reducer", () => {
 
@@ -76,7 +76,7 @@ describe("pages reducer", () => {
             view     : 1,
             fetched  : false,
           }),
-        })
+        }),
       );
   });