@brightleaf/react-hooks - npm Package Compare versions

Comparing version 1.6.0 to 2.0.0

lib/__tests__/use-async.js

@@ -22,5 +22,7 @@ "use strict";
   expect(result.current.data).toBe(null);
-  result.current.execute();
+  (0, _reactHooks.act)(() => {
+    result.current.execute();
+  });
   await waitForNextUpdate();
   expect(result.current.data.complete).toBe(true);
 });

lib/index.js

@@ -60,2 +60,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useKeypressed", {
+  enumerable: true,
+  get: function () {
+    return _useKeypressed.default;
+  }
+});
 Object.defineProperty(exports, "useKeypress", {
@@ -115,2 +121,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "useRequest", {
+  enumerable: true,
+  get: function () {
+    return _useRequest.default;
+  }
+});
 Object.defineProperty(exports, "useScript", {
@@ -140,3 +152,3 @@ enumerable: true,
 });
-Object.defineProperty(exports, "useWebSockets", {
+Object.defineProperty(exports, "useWebSocket", {
   enumerable: true,
@@ -164,2 +176,4 @@ get: function () {
 
+var _useKeypressed = _interopRequireDefault(require("./use-keypressed"));
+
 var _useKeypress = _interopRequireDefault(require("./use-keypress"));
@@ -183,2 +197,4 @@
 
+var _useRequest = _interopRequireDefault(require("./use-request"));
+
 var _useScript = _interopRequireDefault(require("./use-script"));
@@ -194,4 +210,6 @@
 
-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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/reducer.js

@@ -6,4 +6,23 @@ "use strict";
 });
-exports.default = exports.reducer = void 0;
+exports.default = exports.reducer = exports.getError = exports.getData = void 0;
 
+const getData = obj => {
+  if (obj && obj.data && obj.data.data) return obj.data.data;
+  if (obj && obj.data) return obj.data;
+  if (obj.data === null) return null;
+  return obj;
+};
+
+exports.getData = getData;
+
+const getError = obj => {
+  if (obj && obj.error && obj.error.Error) return obj.error.Error;
+  if (obj && obj.error && obj.error.error) return obj.error.error;
+  if (obj && obj.error) return obj.error;
+  if (obj && obj.errorMessage) return obj.data;
+  return obj;
+};
+
+exports.getError = getError;
+
 const reducer = (state, action) => {
@@ -33,4 +52,5 @@ switch (action.type) {
       return { ...state,
-        data: null,
-        error: action.payload.error,
+        data: getData(action.payload),
+        error: true,
+        errorDetails: getError(action.payload),
         loading: false,
@@ -37,0 +57,0 @@ complete: true

lib/use-async.js

@@ -12,16 +12,2 @@ "use strict";
 
-/**
- * @typedef {Object} Async~State
- * @property {Object|array} data - The data returned from the function.
- * @property {boolean} error - Indicates whether the function had an error.
- * @property {boolean} loading - Indicates whether the function is executing
- * @property {function} execute - The function to call to execute the async function
- */
-
-/**
- * useAsync hook to handle executing asynchronous function
- *
- * @param {*} workflow - The async function that will be executed
- * @returns {...Async~State} - The states and results and the call to execute function
- */
 const useAsync = workflow => {
@@ -28,0 +14,0 @@ const [state, dispatch] = (0, _react.useReducer)(_reducer.reducer, {

lib/use-event-listener.js

@@ -10,9 +10,2 @@ "use strict";
 
-/**
- * useEvent Hook to allow binding to DOM events
- *
- * @param {string} eventName - The name of the event
- * @param {function} eventHandler - The handler function
- * @param {*} [target=window] - The entity to bind the event on
- */
 const useEventListener = (eventName, handler, target = window) => {
@@ -19,0 +12,0 @@ const refHandler = (0, _react.useRef)();

lib/use-event.js

@@ -10,9 +10,2 @@ "use strict";
 
-/**
- * useEvent Hook to allow binding to DOM events
- *
- * @param {string} eventName - The name of the event
- * @param {function} eventHandler - The handler function
- * @param {*} [target=window] - The entity to bind the event on
- */
 const useEvent = (eventName, eventHandler, target = window) => {
@@ -19,0 +12,0 @@ (0, _react.useEffect)(() => {

lib/use-favicon.js

@@ -10,8 +10,2 @@ "use strict";
 
-/**
- * useFavicon Hook to allow setting of the favicon of a page
- *
- * @param {string} href - The href of the favicon
- * @returns {[string, function]} - The favicon href and setFavicon function to update favicon
- */
 const useFavicon = href => {
@@ -18,0 +12,0 @@ const [favicon, setFavicon] = (0, _react.useState)(href);

lib/use-get.js

@@ -23,20 +23,19 @@ "use strict";
   referrer: 'no-referrer'
-  /**
-   * @typedef {Object} GetRequest~State
-   * @property {Object|array} data - The data returned from the function.
-   * @property {boolean} error - Indicates whether the function had an error.
-   * @property {boolean} loading - Indicates whether the function is executing
-   * @property {function} getUrl - The function to call to make the request
-   */
+};
+/**
+ * @typedef {Object} GetRequest~State
+ * @property {Object|array} data - The data returned from the function.
+ * @property {boolean} error - Indicates whether the function had an error.
+ * @property {boolean} loading - Indicates whether the function is executing
+ * @property {function} getUrl - The function to call to make the request
+ */
 
-  /**
-   * useGet hook to handle fetching data from a url
-   *
-   * @param {string} url - The url to request
-   * @param {object} config - The config object to be used with the fetch
-   * @returns {...GetRequest~State} - The states and results and the call to make the request
-   */
+/**
+ * useGet hook to handle fetching data from a url
+ *
+ * @param {string} url - The url to request
+ * @param {object} config - The config object to be used with the fetch
+ * @returns {...GetRequest~State} - The states and results and the call to make the request
+ */
 
-};
-
 const useGet = (url = '', config = {
@@ -43,0 +42,0 @@ method: 'GET'

lib/use-hover.js

@@ -10,8 +10,2 @@ "use strict";
 
-/**
- * useHover hook that returns if an element is being hovered over
- *
- * @param {*} rel - The reference to the element to be observed
- * @returns {boolean} - The current state of the element if being hovered
- */
 const useHover = rel => {
@@ -18,0 +12,0 @@ const [hovered, setHover] = (0, _react.useState)(false);

lib/use-keypress.js

@@ -10,8 +10,2 @@ "use strict";
 
-/**
- * useKeypress Hook to allow setting of the page title
- *
- * @param {string} key - The text to be used to set the page title
- * @param {HTMLElement} element - The element to listen on for the keypress
- */
 const useKeypress = (key, element = window) => {
@@ -18,0 +12,0 @@ const [pressed, setPressed] = (0, _react.useState)(false);

lib/use-local-storage.js

@@ -10,10 +10,2 @@ "use strict";
 
-/**
- * useLocalStorage - Hook to use local storage
- *
- * @param {string} key - The key to save the item in local storage
- * @param {*} initialValue - The initial value
- * @param {boolean} [raw=false] - if the object should be JSON.parsed or not
- * @returns {Array.<{value: object , setFunction: function}>} The value and the setter function
- */
 const useLocalStorage = (key, initialValue, raw = false) => {
@@ -20,0 +12,0 @@ const [state, setState] = (0, _react.useState)(() => {

lib/use-post.js

@@ -23,20 +23,19 @@ "use strict";
   referrer: 'no-referrer'
-  /**
-   * @typedef {Object} PostRequest~State
-   * @property {Object|array} data - The data returned from the function.
-   * @property {boolean} error - Indicates whether the function had an error.
-   * @property {boolean} loading - Indicates whether the function is executing
-   * @property {function} postData - The function to call to make the POST request
-   */
+};
+/**
+ * @typedef {Object} PostRequest~State
+ * @property {Object|array} data - The data returned from the function.
+ * @property {boolean} error - Indicates whether the function had an error.
+ * @property {boolean} loading - Indicates whether the function is executing
+ * @property {function} postData - The function to call to make the POST request
+ */
 
-  /**
-   * usePost hook to handle posting data to a url
-   *
-   * @param {string} url - The url to request
-   * @param {object} config - The config object to be used with the fetch
-   * @returns {...PostRequest~State} - The states and results and the call to make the request
-   */
+/**
+ * usePost hook to handle posting data to a url
+ *
+ * @param {string} url - The url to request
+ * @param {object} config - The config object to be used with the fetch
+ * @returns {...PostRequest~State} - The states and results and the call to make the request
+ */
 
-};
-
 const usePost = (url = '', config = {
@@ -43,0 +42,0 @@ method: 'POST'

lib/use-put.js

@@ -23,20 +23,19 @@ "use strict";
   referrer: 'no-referrer'
-  /**
-   * @typedef {Object} PutRequest~State
-   * @property {Object|array} data - The data returned from the function.
-   * @property {boolean} error - Indicates whether the function had an error.
-   * @property {boolean} loading - Indicates whether the function is executing
-   * @property {function} putData - The function to call to make the POST request
-   */
+};
+/**
+ * @typedef {Object} PutRequest~State
+ * @property {Object|array} data - The data returned from the function.
+ * @property {boolean} error - Indicates whether the function had an error.
+ * @property {boolean} loading - Indicates whether the function is executing
+ * @property {function} putData - The function to call to make the POST request
+ */
 
-  /**
-   * usePut hook to handle putting data to a url
-   *
-   * @param {string} url - The url to request
-   * @param {object} config - The config object to be used with the fetch
-   * @returns {...PutRequest~State} - The states and results and the call to make the request
-   */
+/**
+ * usePut hook to handle putting data to a url
+ *
+ * @param {string} url - The url to request
+ * @param {object} config - The config object to be used with the fetch
+ * @returns {...PutRequest~State} - The states and results and the call to make the request
+ */
 
-};
-
 const usePut = (url = '', config = {
@@ -43,0 +42,0 @@ method: 'PUT'

lib/use-request.js

@@ -14,2 +14,3 @@ "use strict";
 
+const JSON_CONTENT_TYPE = 'application/json';
 const defaultConfig = {
@@ -20,24 +21,23 @@ mode: 'cors',
   headers: {
-    'Content-Type': 'application/json'
+    'Content-Type': JSON_CONTENT_TYPE
   },
   redirect: 'follow',
   referrer: 'no-referrer'
-  /**
-   * @typedef {Object} Request~State
-   * @property {Object|array} data - The data returned from the function.
-   * @property {boolean} error - Indicates whether the function had an error.
-   * @property {boolean} loading - Indicates whether the function is executing
-   * @property {function} makeRequest - The function to call to make the request
-   */
+};
+/**
+ * @typedef {Object} Request~State
+ * @property {Object|array} data - The data returned from the function.
+ * @property {boolean} error - Indicates whether the function had an error.
+ * @property {boolean} loading - Indicates whether the function is executing
+ * @property {function} makeRequest - The function to call to make the request
+ */
 
-  /**
-   * useGet hook to handle fetching data from a url
-   *
-   * @param {string} url - The url to request
-   * @param {object} config - The config object to be used with the fetch
-   * @returns {...Request~State} - The states and results and the call to make the request
-   */
+/**
+ * useGet hook to handle fetching data from a url
+ *
+ * @param {string} url - The url to request
+ * @param {object} config - The config object to be used with the fetch
+ * @returns {...Request~State} - The states and results and the call to make the request
+ */
 
-};
-
 const useRequest = (url = '', config = {
@@ -49,2 +49,3 @@ method: 'GET'
     error: null,
+    errorDetails: null,
     loading: false,
@@ -65,7 +66,9 @@ complete: false
     const resp = await fetch(urlToFetch, config);
+    const ok = resp.ok;
+    const respHeader = resp.headers.get('Content-Type');
 
-    if (config.headers['Content-Type'] === 'application/json') {
+    if (config.headers['Content-Type'] === JSON_CONTENT_TYPE && respHeader === JSON_CONTENT_TYPE) {
       const result = await resp.json();
 
-      if (result && result.data) {
+      if (ok && result && result.data) {
         return dispatch({
@@ -79,2 +82,9 @@ type: 'success',
 
+      if (!ok && result) {
+        return dispatch({
+          type: 'error',
+          payload: result
+        });
+      }
+
       return dispatch({
@@ -89,2 +99,13 @@ type: 'success',
     const result = await resp.text();
+
+    if (!ok) {
+      return dispatch({
+        type: 'error',
+        payload: {
+          data: null,
+          error: result
+        }
+      });
+    }
+
     return dispatch({
@@ -91,0 +112,0 @@ type: 'success',

lib/use-title.js

@@ -10,8 +10,2 @@ "use strict";
 
-/**
- * useTitle Hook to allow setting of the page title
- *
- * @param {string} pageTitle - The text to be used to set the page title
- * @returns {[string, function]} - The title and setTitle function
- */
 const useTitle = pageTitle => {
@@ -18,0 +12,0 @@ const [title, setTitle] = (0, _react.useState)(pageTitle);

lib/use-websockets.js

@@ -30,4 +30,5 @@ "use strict";
     case 'message':
+      state.message.push(action.payload.data);
       return { ...state,
-        message: state.message + action.payload.data,
+        message: state.message,
         error: null,
@@ -56,2 +57,7 @@ loading: false
   const websocket = new WebSocket(url);
+
+  const send = message => {
+    websocket.send(message);
+  };
+
   const connectClient = (0, _react.useCallback)(() => {
@@ -86,3 +92,3 @@ dispatch({
       payload: {}
-    });
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [websocket.onclose, websocket.onmessage, websocket.onopen]);
@@ -92,3 +98,4 @@ (0, _react.useEffect)(() => {
   }, [connectClient]);
-  return { ...state
+  return { ...state,
+    sendMessage: send
   };
@@ -95,0 +102,0 @@ };

package.json

 {
   "name": "@brightleaf/react-hooks",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "Useful react hooks",
@@ -39,23 +39,23 @@ "files": [
   "dependencies": {
-    "@hapi/nes": "^11.2.0",
+    "@hapi/nes": "^11.2.2",
     "graphql-request": "^1.8.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.5.4",
+    "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
-    "@kev_nz/async-tools": "^1.2.1",
+    "@kev_nz/async-tools": "^1.2.3",
     "@kev_nz/eslint-config": "^4.0.0",
     "@kev_nz/publisher": "^4.0.1",
     "@reach/router": "^1.2.1",
-    "@testing-library/react": "^8.0.5",
-    "@testing-library/react-hooks": "^1.1.0",
+    "@testing-library/react": "^9.1.4",
+    "@testing-library/react-hooks": "^2.0.1",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^3.0.0",
-    "eslint": "^6.0.1",
-    "eslint-plugin-react-hooks": "^1.6.1",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.4.0",
+    "eslint-plugin-react-hooks": "^2.0.1",
     "hash-source": "^1.0.4",
@@ -65,19 +65,20 @@ "html-loader": "^0.5.5",
     "isom": "^1.0.0",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
+    "jest-fetch-mock": "^2.1.2",
     "jest-localstorage-mock": "^2.4.0",
     "jest-websocket-mock": "^1.5.0",
-    "markdown-loader": "^5.0.0",
-    "mock-socket": "^8.0.5",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-hot-loader": "^4.12.6",
-    "react-test-renderer": "^16.8.6",
-    "rollup": "^1.19.4",
+    "markdown-loader": "^5.1.0",
+    "mock-socket": "^9.0.0",
+    "react": ">=16.9.0",
+    "react-dom": "^16.9.0",
+    "react-hot-loader": "^4.12.13",
+    "react-test-renderer": "^16.9.0",
+    "rollup": "^1.21.4",
     "rollup-plugin-auto-external": "^2.0.0",
-    "rollup-plugin-commonjs": "^10.0.2",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.35.3",
-    "webpack-cli": "^3.3.5",
-    "webpack-dev-server": "^3.7.2"
+    "style-loader": "^1.0.0",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.8",
+    "webpack-dev-server": "^3.8.1"
   },
@@ -89,5 +90,6 @@ "peerDependencies": {
     "setupFiles": [
-      "jest-localstorage-mock"
+      "jest-localstorage-mock",
+      "./setupJest.js"
     ]
   }
 }

readme.md

@@ -12,4 +12,5 @@ # Brightleaf React Hooks
 * [`useKeypress`](#keypress-hook) - Hook to Keypress
-* [`useNes`](#nes-hook) - Hook to connect to Hapijs NES
-* [`useWebSockets`](#nes-hook) - Hook to interact with WebSockets
+* [`useKeypressed`](#key-pressed-hook) - Hook to fire a method when the keydown is triggered
+* [`useNes`](#/examples/nes) - Hook to connect to Hapijs NES
+* [`useWebSockets`](#/examples/ws) - Hook to interact with WebSockets
 * [`useLocalStorage`](#local-storage-hook) - Hook to local storage
@@ -132,2 +133,26 @@ * [`useHover`](#hover-hook) - Hook for binding to hover of an element
 
+## Key Pressed Hook
+
+```jsx
+import React, { useState } from 'react'
+import { useKeypressed } from '@brightleaf/react-hooks'
+export default () => {
+
+  const keyPressed = useKeypressed('a')
+
+  return (
+    <div className="App content">
+      <h2>Key Press?</h2>
+      {keyPressed && (
+        <div>
+          Yes, the <b>{'"a"'}</b> key has been pressed
+        </div>
+      )}
+      {!keyPressed && <div>No the <b>{'"a"'}</b> key is not been pressed yet</div>}
+    </div>
+  )
+}
+```
+
+
 ## Post Hook
@@ -259,2 +284,3 @@
 ```
+
 # NES Hook
@@ -264,3 +290,7 @@
 
+# WebSocket Hook
 
+#/examples/ws
+
+
 ### Messages
@@ -267,0 +297,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112912

increased by7.24%

Number of package files

38

increased by11.76%

Lines of code

3423

increased by7.74%

Number of lines in readme file

578

increased by5.47%

Worsened metrics

Dev dependency count

39

increased by2.63%

Number of medium supply chain risk alerts

16

increased by166.67%

Dependency changes

• Updated@hapi/nes@^11.2.2