redux-paginator-immutable 17.0.16 → 17.0.21

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,
           }),
-        })
+        }),
       );
   });
 

package/src/__tests__/selectors.spec.js

@@ -5,93 +5,92 @@ import chaiImmutable from "chai-immutable";
 
 chai.use(chaiImmutable);
 
-import selectors from "../selectors";
-
-const {
-  getCurrentTotalResultsCount,
-  getAllResults,
-  getResultsUpToPage,
-  isPageFetched,
-  isPageFetching,
-  getCurrentView,
-} = selectors;
-
 import * as Immutable from "immutable";
+import selectors from "../selectors";
 
-const paginator = Immutable.Map({
-  "foo=bar": Immutable.Map({
-    page  : 3,
-    token : "foo=bar",
-    ids   : Immutable.List([
-      1,
-      2,
-      3,
-      7,
-      8,
-      9,
-    ]),
-    total    : 42,
-    view     : 2,
-    fetching : false,
-    fetched  : true,
-  }),
-  "foo=baz": Immutable.Map({
-    page  : 1,
-    token : "foo=baz",
-    ids   : Immutable.List([
-      1,
-      4,
-      6,
-    ]),
-    fetching : false,
-    fetched  : true,
-    total    : 17,
-    view     : 1,
+const
+  {
+    getCurrentTotalResultsCount,
+    getAllResults,
+    getResultsUpToPage,
+    isPageFetched,
+    isPageFetching,
+    getCurrentView,
+  } = selectors,
+  paginator = Immutable.Map({
+    "foo=bar": Immutable.Map({
+      page  : 3,
+      token : "foo=bar",
+      ids   : Immutable.List([
+        1,
+        2,
+        3,
+        7,
+        8,
+        9,
+      ]),
+      total    : 42,
+      view     : 2,
+      fetching : false,
+      fetched  : true,
+    }),
+    "foo=baz": Immutable.Map({
+      page  : 1,
+      token : "foo=baz",
+      ids   : Immutable.List([
+        1,
+        4,
+        6,
+      ]),
+      fetching : false,
+      fetched  : true,
+      total    : 17,
+      view     : 1,
+    }),
   }),
-});
 
-const items = Immutable.Map({
-  "1": Immutable.Map({
-    data : "foo1",
-    id   : 1,
-  }),
-  "2": Immutable.Map({
-    data : "foo2",
-    id   : 2,
-  }),
-  "3": Immutable.Map({
-    data : "foo3",
-    id   : 3,
-  }),
-  "4": Immutable.Map({
-    data : "foo4",
-    id   : 4,
-  }),
-  "5": Immutable.Map({
-    data : "foo5",
-    id   : 5,
-  }),
-  "6": Immutable.Map({
-    data : "foo6",
-    id   : 6,
-  }),
-  "7": Immutable.Map({
-    data : "foo7",
-    id   : 7,
-  }),
-  "8": Immutable.Map({
-    data : "foo8",
-    id   : 8,
-  }),
-  "9": Immutable.Map({
-    data : "foo9",
-    id   : 9,
-  }),
-});
+  items = Immutable.Map({
+    "1": Immutable.Map({
+      data : "foo1",
+      id   : 1,
+    }),
+    "2": Immutable.Map({
+      data : "foo2",
+      id   : 2,
+    }),
+    "3": Immutable.Map({
+      data : "foo3",
+      id   : 3,
+    }),
+    "4": Immutable.Map({
+      data : "foo4",
+      id   : 4,
+    }),
+    "5": Immutable.Map({
+      data : "foo5",
+      id   : 5,
+    }),
+    "6": Immutable.Map({
+      data : "foo6",
+      id   : 6,
+    }),
+    "7": Immutable.Map({
+      data : "foo7",
+      id   : 7,
+    }),
+    "8": Immutable.Map({
+      data : "foo8",
+      id   : 8,
+    }),
+    "9": Immutable.Map({
+      data : "foo9",
+      id   : 9,
+    }),
+  });
 
 describe("selectors", () => {
 
-  it("getAllResults shoud select all the items ids for pages with same params than the current page", () => {
+  it("getAllResults should select all the items ids for pages with same params than the current page", () => {
     expect(getAllResults(paginator, "foo=bar", items)).
       to.equal(Immutable.List([
         Immutable.Map({
@@ -121,7 +120,7 @@ describe("selectors", () => {
       ]));
   });
 
-  it("getResultsUpToPage shoud select all the items ids for pages with same params than the current page", () => {
+  it("getResultsUpToPage should select all the items ids for pages with same params than the current page", () => {
     expect(getResultsUpToPage(paginator, "foo=bar", items, 2, 2)).
       to.equal(Immutable.List([
         Immutable.Map({

package/src/{actionTypes.js → actionTypes.ts}

@@ -1,13 +1,9 @@
-// @flow
-
 export const REQUEST_PAGE = "@@redux-paginator-immutable/REQUEST_PAGE";
 export const RECEIVE_PAGE = "@@redux-paginator-immutable/RECEIVE_PAGE";
 export const RESET_VIEW = "@@redux-paginator-immutable/RESET_VIEW";
 export const CHANGE_VIEW = "@@redux-paginator-immutable/CHANGE_VIEW";
 export const CLEAR_DATA = "@@redux-paginator-immutable/CLEAR_DATA";
-
 export const FETCH_ITEM_DATA_PENDING = "@@redux-paginator-immutable/FETCH_ITEM_DATA_PENDING";
 export const FETCH_ITEM_DATA_REJECTED = "@@redux-paginator-immutable/FETCH_ITEM_DATA_REJECTED";
 export const FETCH_ITEM_DATA_FULFILLED = "@@redux-paginator-immutable/FETCH_ITEM_DATA_FULFILLED";
-
 export const FETCH_CURRENT_COMPANY_INFO_PENDING = "FETCH_CURRENT_COMPANY_INFO_PENDING";

package/src/actions.ts

@@ -0,0 +1,157 @@
+
+import agent from "superagent";
+
+import type { Action, EndPointCb } from "./types";
+
+type RequestPageArgsTypes = {
+  endpoint: string;
+  endpointCb: EndPointCb;
+  manageEntity: any;
+  resultsKey: string;
+  totalKey: string;
+  pageArgName: string;
+  idKey: string;
+  page: number;
+  token: string;
+};
+
+type ReceivePageArgsTypes = {
+  endpoint: string;
+  endpointCb: EndPointCb;
+  manageEntity: any;
+  pageArgName: string;
+  idKey: string;
+  page: number;
+  token: string;
+  items: Array<any>;
+  total: number;
+  error: boolean;
+};
+
+const requestPage = ({
+    endpoint,
+    endpointCb,
+    manageEntity,
+    resultsKey,
+    totalKey,
+    pageArgName,
+    idKey,
+    page,
+    token,
+  }: RequestPageArgsTypes): Action => ({
+    type : "@@redux-paginator-immutable/REQUEST_PAGE",
+    meta : {
+      endpoint,
+      endpointCb,
+      manageEntity,
+      resultsKey,
+      totalKey,
+      pageArgName,
+      idKey,
+    },
+    payload: {
+      page,
+      token,
+    },
+  }),
+
+  receivePage = ({
+    endpoint,
+    endpointCb,
+    manageEntity,
+    pageArgName,
+    idKey,
+    page,
+    token,
+    items,
+    error,
+    total,
+  }: ReceivePageArgsTypes): Action => ({
+    type : "@@redux-paginator-immutable/RECEIVE_PAGE",
+    meta : {
+      endpoint,
+      endpointCb,
+      manageEntity,
+      pageArgName,
+      idKey,
+    },
+    payload: {
+      page,
+      token,
+      items,
+      error,
+      total,
+    },
+  }),
+
+  resetView = (endpoint: string, token: string): Action => ({
+    type : "@@redux-paginator-immutable/RESET_VIEW",
+    meta : {
+      endpoint,
+    },
+    payload: {
+      token,
+    },
+  }),
+
+  changeView = (endpoint: string, {
+    token,
+    view,
+  }: {
+  token: string;
+  view: number;
+}): Action => ({
+    type : "@@redux-paginator-immutable/CHANGE_VIEW",
+    meta : {
+      endpoint,
+    },
+    payload: {
+      token,
+      view,
+    },
+  }),
+
+  clearData = (endpoint: string): Action => ({
+    type : "@@redux-paginator-immutable/CLEAR_DATA",
+    meta : {
+      endpoint,
+    },
+  });
+
+// data info
+type FetchDataItem = {
+  dataItemURL: string;
+  endpoint: string;
+  normalizeDataItem: any;
+  id: string;
+};
+
+const fetchDataItemRequest = ({
+  dataItemURL,
+  normalizeDataItem,
+  id,
+}: FetchDataItem): Promise<any> => (
+  new Promise((resolve, reject) => (
+    agent.
+      get(`${dataItemURL}/${id}`).
+      set("Accept", "application/json").
+      end(normalizeDataItem(resolve, reject))
+  )) as Promise<any>
+);
+
+export const fetchItem = (things: FetchDataItem): any => ({
+  type    : "@@redux-paginator-immutable/FETCH_ITEM_DATA",
+  payload : fetchDataItemRequest(things),
+  meta    : {
+    id       : things.id,
+    endpoint : things.endpoint,
+  },
+});
+
+export default {
+  clearData,
+  requestPage,
+  receivePage,
+  resetView,
+  changeView,
+};

package/src/agent.ts

@@ -0,0 +1,62 @@
+/* eslint-disable no-bitwise*/
+
+type FetchPageArgs = {
+  endpoint: string;
+  pageArgName: string;
+  page: number;
+  token: string;
+};
+
+import agent from "superagent";
+import qs from "query-string";
+
+export const
+  buildSuffix = (pageArgName: string, page: number, params: string) => {
+    const parsedParams = qs.parse(params);
+    let finalParsedParams = {},
+      startString = "";
+
+    for (const key of Object.keys(parsedParams)) {
+      if (parsedParams[key] === null) {
+        startString += key;
+      } else {
+        finalParsedParams = { ...finalParsedParams,
+          [key]: parsedParams[key],
+        };
+      }
+    }
+
+    startString = startString === "" ? "?" : `${startString}?`;
+
+    if (Object.keys(finalParsedParams).length > 0 && qs.extract(params) !== "") {
+      startString = params.replace(qs.extract(params), "");
+    }
+
+    return startString + qs.stringify({ ...finalParsedParams,
+      [pageArgName]: page,
+    }, {
+      encode: false,
+    }).replace(startString, "");
+  },
+  fetchPage = ({
+    endpoint,
+    pageArgName,
+    page,
+    token,
+  }: FetchPageArgs) => {
+    const suffix = buildSuffix(pageArgName, page, token),
+      url = endpoint + suffix,
+      promise: any = new Promise(
+        (resolve: any, reject: any) => (
+          agent.
+            get(url).
+            end((err: any, res: any) => err ? reject(err) : resolve(res))
+        ),
+      );
+
+    return promise.then((res: {
+    body: any;
+  }) => ({
+      response: res.body,
+    }));
+  };

package/src/createDataReducer.ts

@@ -0,0 +1,91 @@
+/* eslint-disable max-lines-per-function,  */
+import { createSelector } from "reselect";
+import * as Immutable from "immutable";
+import type { PaginatorSettings } from "./types";
+
+type Selector = (state : any, id : string) => any;
+type ListSelector = (state : any) => any;
+
+/*
+  Use to create a complex list where you need more information about
+  the item. For instance, if you DO need to fetch more data or to
+  manipulate it
+*/
+const
+  createDataReducer = ({ key }: PaginatorSettings) => {
+    const
+      getItems = (state: any) : any => (
+        state.getIn(["entities", key])
+      ),
+      getItem : Selector = createSelector(
+        getItems,
+        (_state : any, id : string) => id,
+        (data : any, id : string) : any => data.get(id) || Immutable.Map(),
+      ),
+      getItemsList : ListSelector = createSelector(
+        getItems,
+        (data : any) => data.map((current : any) => current.get("Data")).toList(),
+      ),
+      getItemData : Selector = createSelector(
+        getItems,
+        (_state : any, id : string) => id,
+        (data : any, id : string) : any => {
+          if (typeof data === "undefined") {
+            return Immutable.Map();
+          }
+
+          return data.getIn([id, "Data"]);
+        },
+      ),
+      getItemHasError : Selector = createSelector(
+        getItem,
+        (data : any) : boolean => {
+          if (typeof data === "undefined") {
+            return false;
+          }
+
+          return data.get("error") === true;
+        },
+      ),
+      getIsFetchingItemInfo : Selector = createSelector(
+        getItem,
+        (data : any) : boolean => {
+          if (typeof data === "undefined") {
+            return false;
+          }
+
+          return data.get("fetching");
+        },
+      ),
+      getItemIsFetched : Selector = createSelector(
+        getItem,
+        (data : any) : boolean => {
+          if (typeof data === "undefined") {
+            return false;
+          }
+
+          return data.get("fetched");
+        },
+      ),
+      getShouldFetchItemInfo : Selector = createSelector(
+        getIsFetchingItemInfo,
+        getItemIsFetched,
+        getItemHasError,
+        (isFetching : boolean, isFetched : boolean, hasError : boolean) : boolean => (
+          !isFetched && !isFetching && !hasError
+        ),
+      );
+
+    return {
+      getItems,
+      getItem,
+      getItemsList,
+      getItemData,
+      getItemHasError,
+      getIsFetchingItemInfo,
+      getItemIsFetched,
+      getShouldFetchItemInfo,
+    };
+  };
+
+export default createDataReducer;

package/src/{createItemReducer.js → createItemReducer.ts}

@@ -1,28 +1,22 @@
-// @flow
-
-import type { PaginatorSettings } from "./types";
-
 import { createSelector } from "reselect";
+import type { PaginatorSettings } from "./types";
 
 /*
   Use to create a simple list where you do not need more information about
   the item. For instance, if you do NOT need to fetch more data or
   manipulate it
 */
-const createReducer = ({ key } : PaginatorSettings) => {
+const createReducer = ({ key }: PaginatorSettings) => {
   const
-    getItems = (state : any) => state.getIn([
-      "entities",
-      key,
-    ]),
-    getItem = createSelector(
+    getItems = (state: any) => state.getIn(["entities", key]),
+    getItem : (state : any, id : string) => any = createSelector(
       getItems,
-      (state, id) => id,
-      (data, id) => data.get(id)
+      (_state : any, id : string) => id,
+      (data : any, id : string) => data.get(id),
     ),
     getItemsList = createSelector(
       getItems,
-      (data) => data.toList()
+      (data : any) => data.toList(),
     );
 
   return {