Merge pull request #5 from openscript/develop

Enhance callback handling

Author: openscript

package.json

@@ -7,7 +7,7 @@
     "react"
   ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
@@ -25,6 +25,7 @@
     "@storybook/react": "^5.3.18",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.2",
+    "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.11.1",
     "@types/react": "^16.9.34",
@@ -40,6 +41,7 @@
     "jest": "^25.3.0",
     "prettier": "^2.0.4",
     "react-is": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
     "rollup": "^2.6.1",
     "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",

src/DSVImport.test.tsx

@@ -31,7 +31,7 @@ describe('DSVImport', () => {
       fireEvent.change(textarea, { target: { value: 'Max' } });
     }
 
-    expect(onChangeMock).toBeCalledTimes(2);
+    expect(onChangeMock).toBeCalledTimes(1);
     expect(onChangeMock).toBeCalledWith([{ email: undefined, forename: 'Max', surname: undefined }]);
   });
 });

src/DSVImport.tsx

@@ -1,21 +1,38 @@
-import React, { PropsWithChildren, useReducer } from 'react';
+import React, { PropsWithChildren, useReducer, useEffect } from 'react';
 import { ColumnsType } from './models/column';
-import { getDSVImportContext } from './features/context';
+import { getDSVImportContext, useDSVImport } from './features/context';
 import { createSimpleParserMiddleware } from './middlewares/simpleParserMiddleware';
 import { State } from './models/state';
 
+interface EventListenerProps<T> {
+  onChange?: (value: T[]) => void;
+}
+
+const EventListener = <T extends { [key: string]: string }>(props: EventListenerProps<T>) => {
+  const [context] = useDSVImport<T>();
+
+  useEffect(() => {
+    if (context.parsed && props.onChange) {
+      props.onChange(context.parsed);
+    }
+  });
+
+  return null;
+};
+
 export interface Props<T> {
   onChange?: (value: T[]) => void;
   columns: ColumnsType<T>;
 }
 
 export const DSVImport = <T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) => {
   const DSVImportContext = getDSVImportContext<T>();
-  const middleware = createSimpleParserMiddleware<T>(props.onChange);
+  const middleware = createSimpleParserMiddleware<T>();
   const initialValues: State<T> = { columns: props.columns };
 
   return (
     <DSVImportContext.Provider value={useReducer(middleware, initialValues)}>
+      <EventListener<T> onChange={props.onChange} />
       {props.children}
     </DSVImportContext.Provider>
   );

src/features/context.test.ts

@@ -1,24 +1,44 @@
 import { reducer, getDSVImportContext } from './context';
 import { State } from '../models/state';
+import { useContext } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
 
 describe('context', () => {
   type TestType = {};
   const defaultState: State<TestType> = { columns: [] };
 
-  it('should reduce raw data to state', () => {
+  it('should reduce raw data action to state', () => {
     const newState = reducer<TestType>(defaultState, { type: 'setRaw', raw: 'Raw data' });
     expect(newState).toStrictEqual({ ...defaultState, raw: 'Raw data' });
   });
 
-  it('should reduce parsed data to state', () => {
+  it('should reduce parsed data action to state', () => {
     const newState = reducer<TestType>(defaultState, { type: 'setParsed', parsed: ['Parsed data'] });
     expect(newState).toStrictEqual({ ...defaultState, parsed: ['Parsed data'] });
   });
 
+  it('should return state on unknown action', () => {
+    const untypedReducer = reducer as <T>(state: State<T>, action: unknown) => State<T>;
+    const newState = untypedReducer<TestType>(defaultState, { type: 'unknown' });
+    expect(newState).toStrictEqual(defaultState);
+  });
+
   it('should create the context as singleton', () => {
     const first = getDSVImportContext<TestType>();
     const second = getDSVImportContext<TestType>();
 
     expect(first).toStrictEqual(second);
   });
+
+  it('should throw an error when the context is not initialized', () => {
+    const context = getDSVImportContext<TestType>();
+    const { result } = renderHook(() => useContext(context));
+    const [, dispatch] = result.current;
+
+    const provokeError = () => {
+      dispatch({ type: 'setRaw', raw: 'fail' });
+    };
+
+    expect(provokeError).toThrowError('Not initialized');
+  });
 });

src/middlewares/simpleParserMiddleware.test.ts

@@ -34,15 +34,4 @@ describe('simpleParserMiddleware', () => {
       });
     });
   });
-
-  it('should invoke the onChange callback', () => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-    const onChangeMock = jest.fn((_value: TestType[]) => {});
-    const middlewareWithOnChange = createSimpleParserMiddleware<TestType>(onChangeMock);
-
-    middlewareWithOnChange(defaultState, { type: 'setRaw', raw: 'Max' });
-
-    expect(onChangeMock).toBeCalledTimes(1);
-    expect(onChangeMock).toBeCalledWith([{ forename: 'Max', surname: undefined, email: undefined }]);
-  });
 });

src/middlewares/simpleParserMiddleware.ts

@@ -28,16 +28,13 @@ const parseData = <T>(value: string, columns: ColumnsType<T>, delimiter: Delimit
   });
 };
 
-export const createSimpleParserMiddleware = <T>(onChange?: (value: T[]) => void) => {
+export const createSimpleParserMiddleware = <T>() => {
   return (state: State<T>, action: Actions<T>) => {
     let newState = reducer<T>(state, action);
 
     if (action.type === 'setRaw') {
       const delimiter = detectDelimiterFromValue(action.raw);
       const parsed = parseData<T>(action.raw, state.columns, delimiter);
-      if (onChange) {
-        onChange(parsed);
-      }
       newState = reducer<T>(state, { type: 'setParsed', parsed });
     }
 

yarn.lock

@@ -1042,7 +1042,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -2138,6 +2138,14 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
+"@testing-library/react-hooks@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294"
+  integrity sha512-1OB6Ksvlk6BCJA1xpj8/WWz0XVd1qRcgqdaFAq+xeC6l61Ucj0P6QpA5u+Db/x9gU4DCX8ziR5b66Mlfg0M2RA==
+  dependencies:
+    "@babel/runtime" "^7.5.4"
+    "@types/testing-library__react-hooks" "^3.0.0"
+
 "@testing-library/react@^10.0.2":
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.2.tgz#8eca7aa52d810cf7150048a2829fdc487162006d"
@@ -2312,6 +2320,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@*":
+  version "16.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz#e1c408831e8183e5ad748fdece02214a7c2ab6c5"
+  integrity sha512-4eJr1JFLIAlWhzDkBCkhrOIWOvOxcCAfQh+jiKg7l/nNZcCIL2MHl2dZhogIFKyHzedVWHaVP1Yydq/Ruu4agw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-textarea-autosize@^4.3.3":
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
@@ -2356,6 +2371,14 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/testing-library__react-hooks@^3.0.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.2.0.tgz#52f3a109bef06080e3b1e3ae7ea1c014ce859897"
+  integrity sha512-dE8iMTuR5lzB+MqnxlzORlXzXyCL0EKfzH0w/lau20OpkHD37EaWjZDz0iNG8b71iEtxT4XKGmSKAGVEqk46mw==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-test-renderer" "*"
+
 "@types/testing-library__react@^10.0.0":
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-10.0.1.tgz#92bb4a02394bf44428e35f1da2970ed77f803593"
@@ -9594,7 +9617,7 @@ react-inspector@^4.0.0:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9646,6 +9669,16 @@ react-syntax-highlighter@^11.0.2:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
+react-test-renderer@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
+  integrity sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.19.1"
+
 react-textarea-autosize@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"