Refactor onChange callback handling

Author: openscript

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/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 });
     }