Catch read errors. Use component props for provider functions.

CHANGELOG.md

@@ -10,6 +10,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 ### Removed
 
+## [1.0.0-alpha.2] - 2020-02-29
+### Added
+- feat: Catch read errors
+- chore: Lint end-to-end tests react-app code
+
+### Changed
+- feat: [BREAKING CHANGE] Pass all component props to provider defined as functions, not only "query" property
+- feat: Use useRefresh in "withData", "withError" and "withLoading"
+
 ## [1.0.0-alpha.1] - 2020-02-26
 ### Added
 - feat: First pre-release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-provider/react",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "React bindings for @data-provider",
   "keywords": [
     "data-provider",
@@ -22,7 +22,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "scripts": {
-    "lint": "eslint src test test-e2e/cypress",
+    "lint": "eslint src test test-e2e/cypress test-e2e/react-app/src",
     "lint-staged": "lint-staged",
     "build": "rollup --config",
     "test": "jest",

sonar-project.properties

@@ -1,6 +1,6 @@
 sonar.organization=data-provider
 sonar.projectKey=data-provider-react
-sonar.projectVersion=1.0.0-alpha.1
+sonar.projectVersion=1.0.0-alpha.2
 
 sonar.sources=src,test
 sonar.exclusions=node_modules/**

src/useDataProvider.js

@@ -3,23 +3,30 @@ import { useSelector } from "react-redux";
 
 export const useRefresh = dataProvider => {
   useEffect(() => {
-    dataProvider.read();
-    return dataProvider.on("cleanCache", () => {
-      dataProvider.read();
-    });
+    if (dataProvider) {
+      const catchError = err => {
+        console.error(
+          `@data-provider/react: Error "${err.message}" in provider "${dataProvider.id}"`
+        );
+      };
+      dataProvider.read().catch(catchError);
+      return dataProvider.on("cleanCache", () => {
+        dataProvider.read().catch(catchError);
+      });
+    }
   }, [dataProvider]);
 };
 
 export const useData = (dataProvider, comparator) => {
-  return useSelector(() => dataProvider.state.data, comparator);
+  return useSelector(() => dataProvider && dataProvider.state.data, comparator);
 };
 
 export const useLoading = (dataProvider, comparator) => {
-  return useSelector(() => dataProvider.state.loading, comparator);
+  return useSelector(() => dataProvider && dataProvider.state.loading, comparator);
 };
 
 export const useError = (dataProvider, comparator) => {
-  return useSelector(() => dataProvider.state.error, comparator);
+  return useSelector(() => dataProvider && dataProvider.state.error, comparator);
 };
 
 export const useDataProvider = (dataProvider, comparator) => {

src/withDataProvider.js

@@ -8,13 +8,13 @@ const isFunction = provider => {
 
 const defaultKeys = ["data", "loading", "error"];
 
-const useProvider = (provider, query) => {
+const useProvider = (provider, props) => {
   return useMemo(() => {
     if (isFunction(provider)) {
-      return provider(query);
+      return provider(props);
     }
     return provider;
-  }, [provider, query]);
+  }, [provider, props]);
 };
 
 const getProp = (data, key) => {
@@ -58,7 +58,7 @@ export const withDataProviderBranch = (provider, keys) => (
   LoadingComponent,
   ErrorComponent
 ) => props => {
-  const providerToRead = useProvider(provider, props.query);
+  const providerToRead = useProvider(provider, props);
   const { dataProp, loadingProp, errorProp, loading, error } = useDataProviderCustomProps(
     providerToRead,
     keys
@@ -79,25 +79,28 @@ export const withDataProviderBranch = (provider, keys) => (
 };
 
 export const withDataProvider = (provider, keys) => Component => props => {
-  const providerToRead = useProvider(provider, props.query);
+  const providerToRead = useProvider(provider, props);
   const { dataProp, loadingProp, errorProp } = useDataProviderCustomProps(providerToRead, keys);
   return <Component {...props} {...dataProp} {...loadingProp} {...errorProp} />;
 };
 
 export const withData = (provider, key) => Component => props => {
-  const providerToRead = useProvider(provider, props.query);
+  const providerToRead = useProvider(provider, props);
+  useRefresh(providerToRead);
   const { dataProp } = useDataCustomProp(providerToRead, key);
   return <Component {...props} {...dataProp} />;
 };
 
 export const withLoading = (provider, key) => Component => props => {
-  const providerToRead = useProvider(provider, props.query);
+  const providerToRead = useProvider(provider, props);
+  useRefresh(providerToRead);
   const { loadingProp } = useLoadingCustomProp(providerToRead, key);
   return <Component {...props} {...loadingProp} />;
 };
 
 export const withError = (provider, key) => Component => props => {
-  const providerToRead = useProvider(provider, props.query);
+  const providerToRead = useProvider(provider, props);
+  useRefresh(providerToRead);
   const { errorProp } = useErrorCustomProp(providerToRead, key);
   return <Component {...props} {...errorProp} />;
 };

test-e2e/react-app/src/modules/books-search/BooksSearch.js

@@ -32,7 +32,7 @@ const BooksSearch = () => {
         placeholder="Type to search"
         onChange={handleChange}
       />
-      <BooksSearchResults search={currentSearch} query={currentSearch} />
+      <BooksSearchResults search={currentSearch} />
     </SectionContainer>
   );
 };

test-e2e/react-app/src/modules/books-search/modules/books-search-results/BooksSearchResults.js

@@ -1,17 +1,17 @@
 import React, { memo } from "react";
 import Proptypes from "prop-types";
 
-import { withData, withLoading, withRefresh } from "@data-provider/react";
+import { withData, withLoading } from "@data-provider/react";
 
 import { booksSearch } from "data/books";
 import BooksList from "modules/books-list";
 import ItemsListContainer from "components/items-list-container";
 import Loading from "components/loading";
 import NoResults from "components/no-results";
 
-const queryBooks = search => booksSearch.query({ search });
+const queryBooks = ({ search }) => booksSearch.query({ search });
 
-const ConnectedBooks = withRefresh(queryBooks)(withData(queryBooks, "books")(BooksList));
+const ConnectedBooks = withData(queryBooks, "books")(BooksList);
 
 const BooksSearchResults = ({ search, books, loading }) => {
   console.log("Rendering books search results", loading, books);
@@ -21,7 +21,7 @@ const BooksSearchResults = ({ search, books, loading }) => {
     <ItemsListContainer id="books-search-container">
       {loading && <Loading />}
       {hasNotResults && <NoResults />}
-      <ConnectedBooks query={search} />
+      <ConnectedBooks search={search} />
     </ItemsListContainer>
   );
 };
@@ -32,8 +32,8 @@ BooksSearchResults.propTypes = {
   loading: Proptypes.bool
 };
 
-const BooksSearchResultsConnected = withRefresh(queryBooks)(
-  withLoading(queryBooks)(withData(queryBooks, "books")(BooksSearchResults))
+const BooksSearchResultsConnected = withLoading(queryBooks)(
+  withData(queryBooks, "books")(BooksSearchResults)
 );
 
 export default memo(BooksSearchResultsConnected);

test-e2e/react-app/src/modules/rerenderer/Rerenderer.js

@@ -8,8 +8,7 @@ import {
   withDataProviderBranch,
   withDataProvider,
   withData,
-  withLoading,
-  withRefresh
+  withLoading
 } from "helpers/data-provider";
 
 import Loading from "./Loading";
@@ -21,9 +20,10 @@ const BooksListConnected = withDataProviderBranch(booksWithAuthorName, ["books",
 );
 
 const WrapperConnected = withDataProvider(booksWithAuthorName, ["books", "isLoading"])(Wrapper);
-const WrapperConnectedToDataAndLoading = withRefresh(booksWithAuthorName)(
-  withLoading(booksWithAuthorName, "isLoading")(withData(booksWithAuthorName, "books")(Wrapper))
-);
+const WrapperConnectedToDataAndLoading = withLoading(
+  booksWithAuthorName,
+  "isLoading"
+)(withData(booksWithAuthorName, "books")(Wrapper));
 
 const BooksSearchRerendered = () => {
   const [currentRenders, changeCurrentRenders] = useState(0);