Implement middleware api

Author: openscript

src/DSVImport.stories.tsx

@@ -6,15 +6,14 @@ export default { title: 'Usage' };
 
 type BasicType = { forename: string; surname: string; email: string };
 
-const columns: ColumnsType<BasicType> = [
-  { key: 'forename', label: 'Forename' },
-  { key: 'surname', label: 'Surname' },
-  { key: 'email', label: 'Email' }
-];
-
-const onChangeAction = action('Parsed value has changed');
-
 export const BasicUsage = () => {
+  const columns: ColumnsType<BasicType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email' }
+  ];
+  const onChangeAction = action('Parsed value has changed');
+
   return (
     <DSVImport<BasicType> columns={columns} onChange={onChangeAction}>
       <DSVImport.TextareaInput />
@@ -25,6 +24,12 @@ export const BasicUsage = () => {
 BasicUsage.story = { name: 'Basic usage' };
 
 export const UsingCallbacks = () => {
+  const columns: ColumnsType<BasicType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email' }
+  ];
+  const onChangeAction = action('Parsed value has changed');
   const [state, setState] = useState<BasicType[]>([]);
 
   const handleOnChange = (value: BasicType[]) => {
@@ -43,4 +48,20 @@ export const UsingCallbacks = () => {
     </>
   );
 };
-UsingCallbacks.story = { name: 'Using callbacks with states' };
+UsingCallbacks.story = { name: 'Using callbacks a state' };
+
+export const UsingValidation = () => {
+  const columns: ColumnsType<BasicType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email', rules: [{ constraint: { unique: true }, message: 'Must be unique' }] }
+  ];
+  const onChangeAction = action('Parsed value has changed');
+
+  return (
+    <DSVImport<BasicType> columns={columns} onChange={onChangeAction}>
+      <DSVImport.TextareaInput />
+      <DSVImport.TablePreview />
+    </DSVImport>
+  );
+};

src/DSVImport.tsx

@@ -1,8 +1,10 @@
 import React, { PropsWithChildren, useReducer, useEffect } from 'react';
 import { ColumnsType } from './models/column';
-import { getDSVImportContext, useDSVImport } from './features/context';
+import { getDSVImportContext, useDSVImport, createReducer } from './features/context';
 import { createParserMiddleware } from './middlewares/parserMiddleware';
 import { State } from './models/state';
+import { applyMiddlewares } from './middlewares/middleware';
+import { createValidatorMiddleware } from './middlewares/validatorMiddleware';
 
 interface EventListenerProps<T> {
   onChange?: (value: T[]) => void;
@@ -27,11 +29,12 @@ export interface Props<T> {
 
 export const DSVImport = <T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) => {
   const DSVImportContext = getDSVImportContext<T>();
-  const middleware = createParserMiddleware<T>();
   const initialValues: State<T> = { columns: props.columns };
+  const [state, dispatch] = useReducer(createReducer<T>(), initialValues);
+  const enhancedDispatch = applyMiddlewares(state, dispatch, createParserMiddleware(), createValidatorMiddleware());
 
   return (
-    <DSVImportContext.Provider value={useReducer(middleware, initialValues)}>
+    <DSVImportContext.Provider value={[state, enhancedDispatch]}>
       <EventListener<T> onChange={props.onChange} />
       {props.children}
     </DSVImportContext.Provider>

src/features/context.ts

@@ -14,6 +14,12 @@ export const reducer = <T>(state: State<T>, action: Actions<T>) => {
   }
 };
 
+export const createReducer = <T>() => {
+  return (state: State<T>, action: Actions<T>) => {
+    return reducer(state, action);
+  };
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let contextSingleton: React.Context<[State<any>, Dispatch<Actions<any>>]>;
 export const getDSVImportContext = <T>() => {

src/middlewares/middleware.ts

@@ -0,0 +1,22 @@
+import { Dispatch } from 'react';
+import { Actions } from '../features/context';
+import { State } from '../models/state';
+
+type Middleware = <T>(state: State<T>, dispatch: Dispatch<Actions<T>>, action: Actions<T>) => void;
+
+export const applyMiddlewares = <T>(state: State<T>, dispatch: Dispatch<Actions<T>>, ...middlewares: Middleware[]) => (
+  action: Actions<T>
+) => {
+  const without = (i: number) => {
+    return middlewares.filter((_, filterIndex) => i !== filterIndex);
+  };
+
+  const next = (nextMiddlewares: Middleware[]) => (value: Actions<T>) => {
+    dispatch(value);
+    nextMiddlewares.forEach((m, i) => {
+      m(state, next(without(i)), value);
+    });
+  };
+
+  middlewares.forEach((m, i) => m(state, next(without(i)), action));
+};

src/middlewares/parserMiddleware.test.ts

@@ -16,28 +16,44 @@ describe('parserMiddleware', () => {
   const rawData = '[email protected]\[email protected]';
 
   it('should set new parsed data when raw data is set', () => {
-    const newState = middleware(defaultState, { type: 'setRaw', raw: 'Max' });
+    const dispatchMock = jest.fn();
+    middleware(defaultState, dispatchMock, { type: 'setRaw', raw: 'Max' });
 
-    expect(newState.parsed).toStrictEqual([{ forename: 'Max', surname: undefined, email: undefined }]);
+    expect(dispatchMock).toBeCalledTimes(1);
+    expect(dispatchMock).toBeCalledWith({
+      type: 'setParsed',
+      parsed: [{ forename: 'Max', surname: undefined, email: undefined }]
+    });
   });
 
   it('should set parsed data to an empty array if there is no raw data', () => {
-    middleware(defaultState, { type: 'setRaw', raw: 'Max' });
-    const newState = middleware(defaultState, { type: 'setRaw', raw: '' });
-
-    expect(newState.parsed).toStrictEqual([]);
+    const dispatchMock = jest.fn();
+    const stateWithRawData = {
+      ...defaultState,
+      raw: 'Max',
+      parsed: [{ forename: 'Max', surname: '', email: '' }]
+    };
+    middleware(stateWithRawData, dispatchMock, { type: 'setRaw', raw: '' });
+
+    expect(dispatchMock).toBeCalledTimes(1);
+    expect(dispatchMock).toBeCalledWith({
+      type: 'setParsed',
+      parsed: []
+    });
   });
 
   it('should detect the correct delimiter from raw data', () => {
     Object.values(Delimiter).forEach((d) => {
-      const newState = middleware(defaultState, { type: 'setRaw', raw: rawData.replace(/!/g, d) });
-
-      expect(newState.parsed?.length).toBe(2);
-      expect(newState.parsed?.[0]).toStrictEqual({ forename: 'Max', surname: 'Muster', email: '[email protected]' });
-      expect(newState.parsed?.[1]).toStrictEqual({
-        forename: '',
-        surname: '',
-        email: '[email protected]'
+      const dispatchMock = jest.fn();
+      middleware(defaultState, dispatchMock, { type: 'setRaw', raw: rawData.replace(/!/g, d) });
+
+      expect(dispatchMock).toBeCalledTimes(1);
+      expect(dispatchMock).toBeCalledWith({
+        type: 'setParsed',
+        parsed: [
+          { forename: 'Max', surname: 'Muster', email: '[email protected]' },
+          { forename: '', surname: '', email: '[email protected]' }
+        ]
       });
     });
   });

src/middlewares/parserMiddleware.ts

@@ -1,7 +1,8 @@
 import { State } from '../models/state';
-import { Actions, reducer } from '../features/context';
+import { Actions } from '../features/context';
 import { Delimiter } from '../models/delimiter';
 import { ColumnsType } from '../models/column';
+import { Dispatch } from 'react';
 
 const detectDelimiterFromValue = (value: string, defaultDelimiter = Delimiter.COMMA) => {
   let currentDelimiter = defaultDelimiter;
@@ -29,9 +30,7 @@ const parseData = <T>(value: string, columns: ColumnsType<T>, delimiter: Delimit
 };
 
 export const createParserMiddleware = <T>() => {
-  return (state: State<T>, action: Actions<T>) => {
-    let newState = reducer<T>(state, action);
-
+  return (state: State<T>, next: Dispatch<Actions<T>>, action: Actions<T>) => {
     if (action.type === 'setRaw') {
       const delimiter = detectDelimiterFromValue(action.raw);
 
@@ -40,9 +39,7 @@ export const createParserMiddleware = <T>() => {
         parsed = parseData<T>(action.raw, state.columns, delimiter);
       }
 
-      newState = reducer<T>(state, { type: 'setParsed', parsed });
+      next({ type: 'setParsed', parsed });
     }
-
-    return newState;
   };
 };

src/middlewares/validatorMiddleware.ts

@@ -0,0 +1,10 @@
+import { State } from '../models/state';
+import { Actions } from '../features/context';
+import { Dispatch } from 'react';
+
+export const createValidatorMiddleware = <T>() => {
+  return (state: State<T>, next: Dispatch<Actions<T>>, action: Actions<T>) => {
+    if (action.type === 'setParsed') {
+    }
+  };
+};

src/models/column.ts

@@ -1 +1,3 @@
-export type ColumnsType<T> = { key: keyof T; label: string }[];
+import { Rule } from './rule';
+
+export type ColumnsType<T> = { key: keyof T; label: string; rules?: Rule[] }[];

src/models/rule.ts

@@ -0,0 +1,4 @@
+export type Rule = {
+  message: string;
+  constraint: { unique: boolean } | { callback: (value: string) => boolean };
+};