Merge pull request #104 from data-provider/release

Release v1.4.0

.github/workflows/check-package-version.yml

@@ -0,0 +1,44 @@
+name: check-package-version
+on:
+  pull_request:
+    branches:
+      - master
+jobs:
+  check-package-version:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Get NPM version is new
+        id: check
+        uses: EndBug/[email protected]
+        with:
+          diff-search: true
+          file-name: ./package.json
+          file-url: https://unpkg.com/@data-provider/react@latest/package.json
+          static-checking: localIsNew
+      - name: Check version is new
+        if: steps.check.outputs.changed != 'true'
+        run: |
+          echo "Version not changed"
+          exit 1
+      - name: Get NPM version
+        id: package-version
+        uses: martinbeentjes/[email protected]
+      - name: Check Changelog version
+        id: changelog_reader
+        uses: mindsers/[email protected]
+        with:
+          version: ${{ steps.package-version.outputs.current-version }}
+          path: ./CHANGELOG.md
+      - name: Read version from Sonar config
+        id: sonar-version
+        uses: christian-draeger/[email protected]
+        with:
+          path: './sonar-project.properties'
+          property: 'sonar.projectVersion'
+      - name: Check Sonar version
+        if: steps.sonar-version.outputs.value != steps.package-version.outputs.current-version
+        run: |
+          echo "Version not changed"
+          exit 1

.github/workflows/publish-to-github-registry.yml

@@ -0,0 +1,21 @@
+name: publish-to-github-registry
+on:
+  release:
+    types: [created]
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - run: npm ci
+    - run: npm run build
+    # Setup .npmrc file to publish to GitHub Packages
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+        registry-url: 'https://npm.pkg.github.com'
+        # Defaults to the user or organization that owns the workflow file
+        scope: '@data-provider'
+    - run: npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -7,9 +7,24 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [unreleased]
 ### Added
 ### Changed
-### Fixed
+### Fixed 
 ### Removed
 
+## [1.4.0] - 2020-11-09
+### Added
+- feat(hocs): Add withDataLoadedError, withDataLoadingError, withDataLoadingErrorComponents, withDataLoadedErrorComponents
+- feat(hooks): Add useDataLoadedError, useDataLoadingError
+- chore(ci-cd): Check package version on PRs to master
+- chore(release): Publish releases to github packages repository
+
+### Changed
+- feat(hocs): Deprecate withDataProvider in favour of withDataLoadingError
+- feat(hocs): Deprecate withDataProviderBranch in favour of withDataLoadingErrorComponents
+- feat(hooks): Deprecate useDataProvider in favour of useDataLoadingError
+
+### Fixed
+- fix(#101): Add hoist-non-react-statics to HOCs 
+
 ## [1.3.0] - 2020-10-31
 
 ### Added

README.md

@@ -16,7 +16,8 @@ npm i --save @data-provider/react
 
 ## Available hooks
 
-* [useDataProvider](#usedataproviderprovider-equalityfn)
+* [useDataLoadingError](#usedataloadingerrorprovider-equalityfn)
+* [useDataLoadedError](#usedataloadederrorprovider-equalityfn)
 * [useData](#usedataprovider-equalityfn)
 * [useLoading](#useloadingprovider)
 * [useLoaded](#useloadedprovider)
@@ -25,17 +26,19 @@ npm i --save @data-provider/react
 
 ## Available HOCs
 
-* [withDataProvider](#withdataproviderprovider-custompropertiesnamescomponent)
+* [withDataLoadingError](#withdataloadingerrorprovider-custompropertiesnamescomponent)
+* [withDataLoadedError](#withdataloadederrorprovider-custompropertiesnamescomponent)
 * [withData](#withdataprovider-custompropnamecomponent)
 * [withLoading](#withloadingprovider-custompropnamecomponent)
 * [withLoaded](#withloadedprovider-custompropnamecomponent)
 * [withError](#witherrorprovider-custompropnamecomponent)
 * [withPolling](#withpollingprovider-intervalcomponent)
-* [withDataProviderBranch](#withdataproviderbranchprovider-custompropertiesnamescomponent-loadingcomponent-errorcomponent)
+* [withDataLoadingErrorComponents](#withdataloadingerrorcomponentsprovider-custompropertiesnamescomponent-loadingcomponent-errorcomponent)
+* [withDataLoadedErrorComponents](#withdataloadederrorcomponentsprovider-custompropertiesnamescomponent-notloadedcomponent-errorcomponent)
 
 ## Hooks
 
-### `useDataProvider(provider, [equalityFn])`
+### `useDataLoadingError(provider, [equalityFn])`
 
 Triggers the provider `read` method and gives you the `data`, `loading` and `error` properties from the state of the provider or selector. When the provider cache is cleaned, it automatically triggers `read` again.
 
@@ -53,12 +56,37 @@ Use this hook only when you need all mentioned properties, because your componen
 #### Example
 
 ```jsx
-import { useDataProvider } from "@data-provider/react";
+import { useDataLoadingError } from "@data-provider/react";
 
 import { books } from "../data/books";
 
 const BooksList = () => {
-  const [data, loading, error] = useDataProvider(books);
+  const [data, loading, error] = useDataLoadingError(books);
+  // Do your stuff here
+};
+```
+
+### `useDataLoadedError(provider, [equalityFn])`
+
+This hook has the same behavior and interface than the described for the [`useDataLoadingError`](#usedataloadingerrorprovider-equalityfn) one, but it returns the `data`, `loaded` and `error` properties from the state of the provider or selector.
+
+Use this hook only when you don't want to rerender a Component each time the provider is loading. It will return `loaded` as `true` once the provider has loaded for the first time, and it will not change again. This is useful to avoid rerenders in scenarios having "pollings", for example, as it will avoid to render a "loading" each time the data is refreshed.
+
+Take into account that the `loaded` property will not be set as `true` until a success read has finished, so the error may have a value, even when `loaded` is `false`. 
+
+#### Returns
+
+* _(Array)_ - Array containing `data`, `loaded` and `error` properties, in that order.
+
+#### Example
+
+```jsx
+import { useDataLoadedError } from "@data-provider/react";
+
+import { books } from "../data/books";
+
+const BooksList = () => {
+  const [data, loaded, error] = useDataLoadedError(books);
   // Do your stuff here
 };
 ```
@@ -67,7 +95,7 @@ const BooksList = () => {
 
 Triggers `read` and gives you only the `data` property from the state of the provider or selector. When the provider cache is cleaned, it automatically triggers `read` again.
 
-Arguments are the same than described for the [`useDataProvider` hook](#usedataproviderprovider-equalityfn).
+Arguments are the same than described for the [`useDataLoadingError` hook](#usedataloadingerrorprovider-equalityfn).
 
 #### Returns
 
@@ -189,7 +217,7 @@ const BooksList = () => {
 
 ## HOCs
 
-### `withDataProvider(provider, [customPropertiesNames])(Component)`
+### `withDataLoadingError(provider, [customPropertiesNames])(Component)`
 
 This High Order Component triggers the read method of the provider and gives to the component the `data`, `loading` and `error` properties from its state. It will trigger the `read` method each time the provider cache is cleaned.
 
@@ -205,15 +233,15 @@ Use this HOC only when you need all mentioned properties, because your component
 Using a provider:
 
 ```jsx
-import { withDataProvider } from "@data-provider/react";
+import { withDataLoadingError } from "@data-provider/react";
 
 import { books } from "../data/books";
 
 const BooksList = ({ data, loading, error }) => {
   // Do your stuff here
 };
 
-export default withDataProvider(books)(BooksList);
+export default withDataLoadingError(books)(BooksList);
 ```
 
 With custom properties:
@@ -223,7 +251,7 @@ const BooksList = ({ booksData, booksLoading, booksError }) => {
   // Do your stuff here
 };
 
-export default withDataProvider(books, ["booksData", "booksLoading", "booksError"])(BooksList);
+export default withDataLoadingError(books, ["booksData", "booksLoading", "booksError"])(BooksList);
 ```
 
 Using a function:
@@ -233,7 +261,41 @@ const BookDetail = ({ data, loading, error }) => {
   // Do your stuff here
 };
 
-export default withDataProvider(({ id }) => books.query({ urlParam: { id }}))(BookDetail);
+export default withDataLoadingError(({ id }) => books.query({ urlParam: { id }}))(BookDetail);
+```
+
+### `withDataLoadedError(provider, [customPropertiesNames])(Component)`
+
+This hoc has the same behavior and interface than the described for the [`withDataLoadingError`](#withdataloadingerrorprovider-custompropertiesnamescomponent) one, but it provides the `data`, `loaded` and `error` properties from the state.
+
+Use this hook only when you don't want to rerender a Component each time the provider is loading. It will return `loaded` as `true` once the provider has loaded for the first time, and it will not change again. This is useful to avoid rerenders in scenarios having "pollings", for example, as it will avoid to render a "loading" each time the data is refreshed.
+
+Take into account that the `loaded` property will not be set as `true` until a success read has finished, so the error may have a value, even when `loaded` is `false`.
+
+#### Examples
+
+Using a provider:
+
+```jsx
+import { withDataLoadedError } from "@data-provider/react";
+
+import { books } from "../data/books";
+
+const BooksList = ({ data, loaded, error }) => {
+  // Do your stuff here
+};
+
+export default withDataLoadedError(books)(BooksList);
+```
+
+With custom properties:
+
+```jsx
+const BooksList = ({ booksData, booksAreLoaded, booksError }) => {
+  // Do your stuff here
+};
+
+export default withDataLoadedError(books, ["booksData", "booksAreLoaded", "booksError"])(BooksList);
 ```
 
 ### `withData(provider, customPropName)(Component)`
@@ -242,7 +304,7 @@ This High Order Component triggers the read method of the provider and gives to
 
 #### Arguments
 
-* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent)
+* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataLoadingError HOC docs](#withdataloadingerrorprovider-custompropertiesnamescomponent)
 * `customPropName` _(String)_: By default, the HOC will pass to the component a `data` property. You can change that prop passing a new property name as second argument.
 
 #### Examples
@@ -275,7 +337,7 @@ This High Order Component triggers the read method of the provider and gives to
 
 #### Arguments
 
-* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent)
+* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataLoadingError HOC docs](#withdataloadingerrorprovider-custompropertiesnamescomponent)
 * `customPropName` _(String)_: By default, the HOC will pass to the component a `loading` property. You can change that prop passing a new property name as second argument.
 
 #### Examples
@@ -308,7 +370,7 @@ This High Order Component triggers the read method of the provider and gives to
 
 #### Arguments
 
-* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent)
+* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataLoadingError HOC docs](#withdataloadingerrorprovider-custompropertiesnamescomponent)
 * `customPropName` _(String)_: By default, the HOC will pass to the component a `loaded` property. You can change that prop passing a new property name as second argument.
 
 #### Examples
@@ -341,7 +403,7 @@ This High Order Component triggers the read method of the provider and gives to
 
 #### Arguments
 
-* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent)
+* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataLoadingError HOC docs](#withdataloadingerrorprovider-custompropertiesnamescomponent)
 * `customPropName` _(String)_: By default, the HOC will pass to the component an `error` property. You can change that prop passing a new property name as second argument.
 
 #### Examples
@@ -374,7 +436,7 @@ This High Order Component works as the hook `usePolling` described above.
 
 #### Arguments
 
-* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent)
+* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataLoadingError HOC docs](#withdataloadingerrorprovider-custompropertiesnamescomponent)
 * `interval` _(Object)_: Interval in miliseconds to clean the provider dependencies cache. Default is 5000.
 
 #### Example
@@ -393,14 +455,14 @@ export default withPolling(books, 3000)(withData(books)(BooksList));
 
 #### Arguments
 
-* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent)
+* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataLoadingError HOC docs](#withdataloadingerrorprovider-custompropertiesnamescomponent)
 
-### `withDataProviderBranch(provider, [customPropertiesNames])(Component, LoadingComponent, ErrorComponent)`
+### `withDataLoadingErrorComponents(provider, [customPropertiesNames])(Component, LoadingComponent, ErrorComponent)`
 
-This HOC works as the already described [`withDataProvider`](#withdataproviderprovider-custompropertiesnamescomponent), but it will render one component or another depending of the result. If the provider is loading, it will render `LoadingComponent`, if it has an error, it will render `ErrorComponent` (passing the `error` property to it), or `Component` when there is no error and it is not loading (passing the `data` property to it).
+This HOC works as the already described [`withDataLoadingError`](#withdataloadingerrorprovider-custompropertiesnamescomponent), but it will render one component or another depending of the result. If the provider is loading, it will render `LoadingComponent`, if it has an error, it will render `ErrorComponent` (passing the `error` property to it), or it will render `Component` when there is no error and it is not loading (passing the `data` property to it).
 
 ```jsx
-import { withDataProviderBranch } from "@data-provider/react";
+import { withDataLoadingErrorComponents } from "@data-provider/react";
 
 import { books } from "../data/books";
 
@@ -416,7 +478,31 @@ const BooksError = ({ error }) => {
   // Do your stuff here
 };
 
-export default withDataProviderBranch(books)(BooksList, BooksLoading, BooksError);
+export default withDataLoadingErrorComponents(books)(BooksList, BooksLoading, BooksError);
+```
+
+### `withDataLoadedErrorComponents(provider, [customPropertiesNames])(Component, NotLoadedComponent, ErrorComponent)`
+
+This HOC works as the already described [`withDataLoadedError`](#withdataloadederrorprovider-custompropertiesnamescomponent), but it will render one component or another depending of the result. If the provider has an error, it will render `ErrorComponent` (passing the `error` property to it), if it has not loaded, it will render `NotLoadedComponent`, or it will render `Component` when there is no error and it has loaded (passing the `data` property to it).
+
+```jsx
+import { withDataLoadedErrorComponents } from "@data-provider/react";
+
+import { books } from "../data/books";
+
+const BooksList = ({ data }) => {
+  // Do your stuff here
+};
+
+const BooksNotLoaded = () => {
+  // Do your stuff here
+};
+
+const BooksError = ({ error }) => {
+  // Do your stuff here
+};
+
+export default withDataLoadedErrorComponents(books)(BooksList, BooksNotLoaded, BooksError);
 ```
 
 ## Contributing

jest.config.js

@@ -29,7 +29,7 @@ module.exports = {
 
   // The glob patterns Jest uses to detect test files
   testMatch: ["**/test/**/?(*.)+(spec|test).js?(x)"],
-  // testMatch: ["**/test/withPolling.spec.js"],
+  // testMatch: ["**/test/hocs.spec.js"],
 
   transform: {
     ".js$": "babel-jest",