Enhance typing

Author: openscript

package.json

@@ -7,7 +7,7 @@
     "react"
   ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",

src/DSVImport.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DSVImport, ColumnsType, TablePreview, TextareaInput } from './';
+import { action } from '@storybook/addon-actions';
 
 export default { title: 'Usage' };
 
@@ -11,9 +12,11 @@ const columns: ColumnsType<BasicType> = [
   { key: 'email', label: 'Email' }
 ];
 
+const onChangeAction = action('Parsed value has changed');
+
 export const BasicUsage = () => {
   return (
-    <DSVImport<BasicType> columns={columns}>
+    <DSVImport<BasicType> columns={columns} onChange={onChangeAction}>
       <TextareaInput />
       <TablePreview />
     </DSVImport>

src/DSVImport.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useReducer } from 'react';
 import { ColumnsType } from './models/column';
-import { DSVImportContext } from './features/context';
-import { SimpleParserMiddleware } from './middlewares/simpleParserMiddleware';
+import { getDSVImportContext } from './features/context';
+import { createSimpleParserMiddleware } from './middlewares/simpleParserMiddleware';
 import { State } from './models/state';
 
 interface Props<T> {
@@ -10,10 +10,12 @@ interface Props<T> {
 }
 
 export const DSVImport = <T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) => {
-  const initialValues: State = { columns: props.columns as ColumnsType<{ [key: string]: string }> };
+  const DSVImportContext = getDSVImportContext<T>();
+  const middleware = createSimpleParserMiddleware<T>(props.onChange);
+  const initialValues: State<T> = { columns: props.columns };
 
   return (
-    <DSVImportContext.Provider value={useReducer(SimpleParserMiddleware, initialValues)}>
+    <DSVImportContext.Provider value={useReducer(middleware, initialValues)}>
       {props.children}
     </DSVImportContext.Provider>
   );

src/features/context.ts

@@ -3,7 +3,7 @@ import { createContext, Dispatch, useContext } from 'react';
 
 export type Actions = { type: 'setRaw'; raw: string };
 
-export const reducer = (state: State, action: Actions) => {
+export const reducer = <T>(state: State<T>, action: Actions) => {
   switch (action.type) {
     case 'setRaw':
       return { ...state, raw: action.raw };
@@ -12,10 +12,17 @@ export const reducer = (state: State, action: Actions) => {
   }
 };
 
-export const DSVImportContext = createContext<[State, Dispatch<Actions>]>([
-  emptyState,
-  () => {
-    throw new Error('Not initialized');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let contextSingleton: React.Context<[State<any>, Dispatch<Actions>]>;
+export const getDSVImportContext = <T>() => {
+  if (!contextSingleton) {
+    contextSingleton = createContext<[State<T>, Dispatch<Actions>]>([
+      (emptyState as unknown) as State<T>,
+      () => {
+        throw new Error('Not initialized');
+      }
+    ]);
   }
-]);
-export const useDSVImport = () => useContext(DSVImportContext);
+  return contextSingleton as React.Context<[State<T>, Dispatch<Actions>]>;
+};
+export const useDSVImport = <T = { [key: string]: string }>() => useContext(getDSVImportContext<T>());

src/middlewares/simpleParserMiddleware.ts

@@ -1,5 +1,5 @@
 import { State } from '../models/state';
-import { Actions } from '../features/context';
+import { Actions, reducer } from '../features/context';
 import { Delimiter } from '../models/delimiter';
 import { ColumnsType } from '../models/column';
 
@@ -16,29 +16,31 @@ const detectDelimiterFromValue = (value: string, defaultDelimiter = Delimiter.CO
   return currentDelimiter;
 };
 
-const parseData = <T extends { [key: string]: string }>(
-  value: string,
-  columns: ColumnsType<T>,
-  delimiter: Delimiter
-) => {
+const parseData = <T>(value: string, columns: ColumnsType<T>, delimiter: Delimiter) => {
   const lines = value.split('\n');
   return lines.map((line) => {
     const lineValues = line.split(delimiter);
     const parsedLine: T = {} as T;
     columns.forEach((column, columnIndex) => {
-      parsedLine[column.key] = lineValues[columnIndex] as T[keyof T];
+      parsedLine[column.key] = (lineValues[columnIndex] as unknown) as T[keyof T];
     });
     return parsedLine;
   });
 };
 
-export const SimpleParserMiddleware = <T extends { [key: string]: string }>(state: State<T>, action: Actions) => {
-  let newState = state;
+export const createSimpleParserMiddleware = <T>(onChange?: (value: T[]) => void) => {
+  return (state: State<T>, action: Actions) => {
+    let newState = reducer<T>(state, action);
 
-  if (action.type === 'setRaw') {
-    const delimiter = detectDelimiterFromValue(action.raw);
-    newState = { ...newState, parsed: parseData<T>(action.raw, state.columns, delimiter) };
-  }
+    if (action.type === 'setRaw') {
+      const delimiter = detectDelimiterFromValue(action.raw);
+      const parsed = parseData<T>(action.raw, state.columns, delimiter);
+      if (onChange) {
+        onChange(parsed);
+      }
+      newState = { ...newState, parsed };
+    }
 
-  return newState;
+    return newState;
+  };
 };

src/models/state.ts

@@ -1,11 +1,11 @@
 import { ColumnsType } from './column';
 
-export interface State<T = { [key: string]: string }> {
+export interface State<T> {
   raw?: string;
   parsed?: T[];
   columns: ColumnsType<T>;
 }
 
-export const emptyState: State = {
+export const emptyState: State<{ [key: string]: string }> = {
   columns: []
 };