feat: advanced handlers

.eslintrc.js

@@ -14,9 +14,6 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   rules: {
     'react-hooks/rules-of-hooks': 'error',

.husky/_/husky.sh

@@ -1,7 +1,9 @@
 #!/bin/sh
 if [ -z "$husky_skip_init" ]; then
   debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
   }
 
   readonly hook_name="$(basename "$0")"
@@ -23,8 +25,7 @@ if [ -z "$husky_skip_init" ]; then
 
   if [ $exitCode != 0 ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
   fi
 
-  exit 0
+  exit $exitCode
 fi

.npmignore

@@ -1,11 +1,10 @@
 src
 __tests__
 coverage
-
+.husky
 tsconfig.json
 .travis.yml
 .prettierrc
-
 .eslintrc.js
 rollup.config.js
 yarn-error.log

CHANGELOG.md

@@ -2,13 +2,13 @@
 
 ## 1.0.4 / 1.0.5 (2020-07-10)
 
-#### Tests
+### Tests
 
 - added tests
 
 ## 1.0.0 / 1.0.1 / 1.0.2 / 1.0.3 (2020-05-25)
 
-#### New Feature
+### New Feature
 
-- added `ShortenUrlProvider`
-- added `useShortenUrl` hook
+- added the `ShortenUrlProvider`
+- added the `useShortenUrl` hook

README.md

@@ -4,12 +4,12 @@
 [![NPM downloads](https://img.shields.io/npm/dm/react-shorten-url?style=flat-square)](https://www.npmjs.com/package/react-shorten-url)
 [![NPM license](https://img.shields.io/npm/l/react-shorten-url?style=flat-square)](https://www.npmjs.com/package/react-shorten-url)
 [![Codecov](https://img.shields.io/codecov/c/github/cool-hooks/react-shorten-url?style=flat-square)](https://codecov.io/gh/cool-hooks/react-shorten-url)
-[![Travis](https://img.shields.io/travis/com/cool-hooks/react-shorten-url/main?style=flat-square)](https://travis-ci.com/cool-hooks/react-shorten-url)
+[![Travis](https://img.shields.io/travis/com/cool-hooks/react-shorten-url/main?style=flat-square)](https://app.travis-ci.com/github/cool-hooks/react-shorten-url)
 [![Bundle size](https://img.shields.io/bundlephobia/min/react-shorten-url?style=flat-square)](https://bundlephobia.com/result?p=react-shorten-url)
 
 ## About
 
-[Bitly](https://github.com/tanepiper/node-bitly/) implementation to React hook
+[Bitly](https://github.com/tanepiper/node-bitly/) implementation into the React hook
 
 ### Similar Projects
 
@@ -35,30 +35,32 @@ $ yarn add react-shorten-url
 
 #### Config Param Values
 
-| Name        | Type        | Default | Description             |
-| ----------- | ----------- | ------- | ----------------------- |
-| accessToken | string      | ` `     | Bitly access token      |
-| options     | BitlyConfig | `{}`    | Additional Bitly config |
+| Name            | Type        | Default | Description             |
+| --------------- | ----------- | ------- | ----------------------- |
+| **accessToken** | string      | ` `     | Bitly access token      |
+| **options**     | BitlyConfig | `{}`    | Additional Bitly config |
 
 ### useShortenUrl
 
 #### Options
 
-| Name | Type   | Default | Description    |
-| ---- | ------ | ------- | -------------- |
-| url  | string | ` `     | URL to shorten |
+| Name    | Type   | Default | Description    |
+| ------- | ------ | ------- | -------------- |
+| **url** | string | ` `     | URL to shorten |
 
 #### Returned Values
 
-| Name    | Type      | Description              |
-| ------- | --------- | ------------------------ |
-| loading | boolean   | Is data loading          |
-| error   | Error     | Error shortening URL     |
-| data    | BitlyLink | Data returned from Bitly |
+| Name        | Type      | Description              |
+| ----------- | --------- | ------------------------ |
+| **loading** | boolean   | Is data loading          |
+| **error**   | Error     | Error shortening URL     |
+| **data**    | BitlyLink | Data returned from Bitly |
+| **refetch**    | TODO | TODO |
+| **status**    | TODO | TODO |
 
 ## Example
 
-**• Import `ShortenUrlProvider` from library in your React app, wrap main component and set config values:**
+**• Import `ShortenUrlProvider` from the library in your React app, wrap the component and set the config values:**
 
 ```js
 // index.js
@@ -77,7 +79,7 @@ ReactDOM.render(
 );
 ```
 
-**• Then use `useShortenUrl` Hook:**
+**• Then use the `useShortenUrl` Hook:**
 
 ```js
 // App.js

__tests__/useShortenUrl.test.tsx

@@ -3,17 +3,13 @@ import { renderHook } from '@testing-library/react-hooks';
 import { BitlyConfig } from 'bitly/dist/types';
 
 import { ShortenUrlProvider, useShortenUrl } from '../src';
-
-interface Config {
-  accessToken: string;
-  options?: BitlyConfig;
-}
+import { Config } from '../src/context';
 
 jest.mock('bitly', () => ({
   BitlyClient: (accessToken: string, _?: BitlyConfig) => ({
     shorten: () => {
       if (accessToken) {
-        return jest.fn().mockReturnValueOnce('https://bit.ly/2BN8vLY');
+        return jest.fn().mockReturnValueOnce('https://bit.ly/3DlLL0o');
       } else {
         throw new Error();
       }
@@ -22,13 +18,14 @@ jest.mock('bitly', () => ({
 }));
 
 describe('useShortenUrl', () => {
-  const makeWrapper = (config: Config): React.FC => ({ children }) => (
-    <ShortenUrlProvider config={config}>{children}</ShortenUrlProvider>
-  );
+  const makeWrapper =
+    (config: Config): React.FC =>
+    ({ children }) =>
+      <ShortenUrlProvider config={config}>{children}</ShortenUrlProvider>;
 
-  it('should return shorten URL', async () => {
+  it('should return a shortened URL', async () => {
     const { result, waitForNextUpdate } = renderHook(
-      () => useShortenUrl('http://example.com/'),
+      () => useShortenUrl('https://example.com/'),
       {
         wrapper: makeWrapper({ accessToken: 'q1w2e3r4t5y6' }),
       }
@@ -42,11 +39,11 @@ describe('useShortenUrl', () => {
 
     expect(result.current.loading).toBe(false);
     expect(result.current.error).toBe(null);
-    expect(result.current.data).toBe('https://bit.ly/2BN8vLY');
+    expect(result.current.data).toBe('https://bit.ly/3DlLL0o');
   });
 
   it('should throw an error', async () => {
-    const { result } = renderHook(() => useShortenUrl('http://example.com/'), {
+    const { result } = renderHook(() => useShortenUrl('https://example.com/'), {
       wrapper: makeWrapper({
         accessToken: '',
         options: {

package.json

@@ -1,16 +1,17 @@
 {
   "name": "react-shorten-url",
   "version": "1.0.5",
-  "description": "Bitly implementation to React hook",
+  "description": "Bitly implementation into the React hook",
   "author": "Jakub Biesiada",
   "license": "MIT",
   "main": "lib/react-shorten-url.cjs.js",
   "module": "lib/react-shorten-url.esm.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "prepack": "npm run clean && npm run prettier && npm run lint && npm run build",
+    "prepack": "npm run prettier && npm run lint && npm run build",
     "clean": "rimraf lib/*",
     "build": "rollup -c",
+    "prebuild": "npm run clean",
     "test": "jest --coverage",
     "watch": "npm run build -- --watch",
     "watch:test": "npm run test -- --watch",
@@ -26,12 +27,12 @@
     "url": "https://github.com/cool-hooks/react-shorten-url.git"
   },
   "keywords": [
-    "bitly",
+    "react",
     "url",
-    "shorten",
     "hooks",
-    "react",
-    "library"
+    "library",
+    "bitly",
+    "shorten"
   ],
   "bugs": {
     "url": "https://github.com/cool-hooks/react-shorten-url/issues"
@@ -40,32 +41,32 @@
   "dependencies": {
     "bitly": "^7.1.2",
     "react-group-state": "^1.0.0-beta.3",
-    "react-safe-context-hooks": "^1.0.0"
+    "react-safe-context-hooks": "^1.0.1"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@testing-library/react-hooks": "^5.1.1",
-    "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "@typescript-eslint/parser": "^4.20.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.38",
+    "@typescript-eslint/parser": "^5.8.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "jest": "^27.4.5",
+    "lint-staged": "^12.1.4",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
     "react-test-renderer": "^17.0.2",
+    "rollup": "^2.62.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "semantic-release": "^17.4.2",
-    "ts-jest": "^26.5.4",
-    "typescript": "^4.2.3"
+    "rollup-plugin-typescript2": "^0.31.1",
+    "semantic-release": "^18.0.1",
+    "ts-jest": "^27.1.2",
+    "typescript": "^4.5.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

src/context.tsx

@@ -1,27 +1,33 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { BitlyClient } from 'bitly';
 import { BitlyConfig } from 'bitly/dist/types';
 
-interface Config {
-  accessToken: string;
-  options?: BitlyConfig;
+export interface Config {
+  readonly accessToken: string;
+  readonly options?: BitlyConfig;
 }
 
-export const ShortenUrlContext = React.createContext<{
-  readonly bitly: BitlyClient;
-}>({
-  bitly: {} as BitlyClient,
-});
+export const ShortenUrlContext = React.createContext<
+  | {
+      readonly bitly: BitlyClient;
+    }
+  | undefined
+>(undefined);
 
 ShortenUrlContext.displayName = 'ShortenUrlContext';
 
-export const ShortenUrlProvider: React.FC<{ readonly config: Config }> = ({
-  children,
-  config,
-}) => {
+interface Props {
+  readonly config: Config;
+  readonly children: React.ReactNode;
+}
+
+export const ShortenUrlProvider = ({ children, config }: Props) => {
   const { accessToken, options = {} } = config;
 
-  const bitly = new BitlyClient(accessToken, options);
+  const bitly = useMemo(
+    () => new BitlyClient(accessToken, options),
+    [accessToken, options]
+  );
 
   return (
     <ShortenUrlContext.Provider value={{ bitly }}>