chore: fix lint issues

Author: stampaaaron

.eslintignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 storybook-static/
+jest.config.js
+coverage

src/DSVImport.test.tsx

@@ -1,7 +1,7 @@
-import { ColumnType } from './models/column';
-import { DSVImport } from '.';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import { ColumnType } from './models/column';
+import { DSVImport } from '.';
 import { useDSVImport } from './features/context';
 import { ValidationError } from './models/validation';
 
@@ -11,7 +11,7 @@ describe('DSVImport', () => {
   const columns: ColumnType<TestType>[] = [
     { key: 'forename', label: 'Forename' },
     { key: 'surname', label: 'Surname' },
-    { key: 'email', label: 'Email', rules: [{ constraint: { unique: true }, message: 'Contains duplicates' }] }
+    { key: 'email', label: 'Email', rules: [{ constraint: { unique: true }, message: 'Contains duplicates' }] },
   ];
 
   interface Props<T> {
@@ -20,21 +20,22 @@ describe('DSVImport', () => {
     columns: ColumnType<T>[];
   }
 
-  const MinimalTextareaInput: React.FC = () => {
+  function MinimalTextareaInput() {
     const [, dispatch] = useDSVImport();
 
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
       dispatch({ type: 'setRaw', raw: event.target.value });
     };
 
-    return <textarea onChange={handleChange}></textarea>;
-  };
+    return <textarea onChange={handleChange} />;
+  }
 
   const renderComponent = (props: Props<TestType>) => {
     return render(
+      // eslint-disable-next-line react/jsx-props-no-spreading
       <DSVImport<TestType> {...props}>
         <MinimalTextareaInput />
-      </DSVImport>
+      </DSVImport>,
     );
   };
 
@@ -57,13 +58,13 @@ describe('DSVImport', () => {
 
     if (textarea) {
       fireEvent.change(textarea, {
-        target: { value: 'Max,Muster,[email protected]\nMoritz,Muster,[email protected]' }
+        target: { value: 'Max,Muster,[email protected]\nMoritz,Muster,[email protected]' },
       });
     }
 
     expect(onValidationMock).toBeCalledWith([
       { column: 'email', row: 0, message: 'Contains duplicates' },
-      { column: 'email', row: 1, message: 'Contains duplicates' }
+      { column: 'email', row: 1, message: 'Contains duplicates' },
     ]);
   });
 });

src/DSVImport.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useReducer, useEffect } from 'react';
+import { PropsWithChildren, useReducer, useEffect, useMemo, Dispatch } from 'react';
 import { ColumnType, GenericColumnType } from './models/column';
 import { getDSVImportContext, useDSVImport, createReducer } from './features/context';
 import { createParserMiddleware } from './middlewares/parserMiddleware';
@@ -10,29 +10,30 @@ import { createTransformerMiddleware } from './middlewares/transformerMiddleware
 import { Transformer } from './models/transformer';
 import { TextareaInput } from './components/inputs/TextareaInput';
 import { TablePreview } from './components/previews/TablePreview';
+import { Actions } from './models/actions';
 
 interface EventListenerProps<T> {
   onChange?: (value: T[]) => void;
   onValidation?: (errors: ValidationError<T>[]) => void;
 }
 
-const EventListener = <T extends GenericColumnType>(props: EventListenerProps<T>) => {
+function EventListener<T extends GenericColumnType>({ onChange, onValidation }: EventListenerProps<T>) {
   const [context] = useDSVImport<T>();
 
   useEffect(() => {
-    if (context.parsed && props.onChange) {
-      props.onChange(context.parsed);
+    if (context.parsed && onChange) {
+      onChange(context.parsed);
     }
   }, [context.parsed]);
 
   useEffect(() => {
-    if (context.validation && props.onValidation) {
-      props.onValidation(context.validation);
+    if (context.validation && onValidation) {
+      onValidation(context.validation);
     }
   }, [context.validation]);
 
   return null;
-};
+}
 
 export type Props<T> = {
   /**
@@ -56,22 +57,30 @@ export type Props<T> = {
 /**
  * This is the main component, which creates a context for it's children. All children can access the information of the `DSVImport`.
  */
-export function DSVImport<T extends GenericColumnType>(props: PropsWithChildren<Props<T>>) {
+export function DSVImport<T extends GenericColumnType>({
+  columns,
+  onChange,
+  onValidation,
+  transformers,
+  children,
+}: PropsWithChildren<Props<T>>) {
   const DSVImportContext = getDSVImportContext<T>();
-  const initialValues: State<T> = { columns: props.columns, transformers: props.transformers };
+  const initialValues: State<T> = { columns, transformers };
   const [state, dispatch] = useReducer(createReducer<T>(), initialValues);
   const enhancedDispatch = applyMiddlewares(
     state,
     dispatch,
     createParserMiddleware(),
     createTransformerMiddleware(),
-    createValidatorMiddleware()
+    createValidatorMiddleware(),
   );
 
+  const value = useMemo<[State<T>, Dispatch<Actions<T>>]>(() => [state, enhancedDispatch], [state]);
+
   return (
-    <DSVImportContext.Provider value={[state, enhancedDispatch]}>
-      <EventListener<T> onChange={props.onChange} onValidation={props.onValidation} />
-      {props.children}
+    <DSVImportContext.Provider value={value}>
+      <EventListener<T> onChange={onChange} onValidation={onValidation} />
+      {children}
     </DSVImportContext.Provider>
   );
 }

src/components/inputs/TextareaInput.test.tsx

@@ -1,6 +1,5 @@
 import { render, fireEvent } from '@testing-library/react';
 import { TextareaInput } from './TextareaInput';
-import React from 'react';
 import { ColumnType } from '../../models/column';
 import { getDSVImportContext } from '../../features/context';
 import { State } from '../../models/state';
@@ -15,9 +14,10 @@ describe('TextareaInput', () => {
 
   const renderComponent = () => {
     return render(
+      // eslint-disable-next-line react/jsx-no-constructed-context-values
       <Context.Provider value={[state, dispatchMock]}>
         <TextareaInput />
-      </Context.Provider>
+      </Context.Provider>,
     );
   };
 

src/components/inputs/TextareaInput.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useDSVImport } from '../../features/context';
 
-export const TextareaInput: React.FC = () => {
+export function TextareaInput() {
   const [, dispatch] = useDSVImport();
 
   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     dispatch({ type: 'setRaw', raw: event.target.value });
   };
 
-  return <textarea onChange={handleChange}></textarea>;
-};
+  return <textarea onChange={handleChange} />;
+}

src/components/previews/TablePreview.test.tsx

@@ -1,5 +1,4 @@
 import { render } from '@testing-library/react';
-import React from 'react';
 import { ColumnType } from '../../models/column';
 import { TablePreview } from './TablePreview';
 import { State } from '../../models/state';
@@ -10,7 +9,7 @@ describe('TablePreview', () => {
   const columns: ColumnType<TestType>[] = [
     { key: 'forename', label: 'Forename' },
     { key: 'surname', label: 'Surname' },
-    { key: 'email', label: 'Email' }
+    { key: 'email', label: 'Email' },
   ];
   const defaultState: State<TestType> = { columns };
   const Context = getDSVImportContext<TestType>();
@@ -19,9 +18,10 @@ describe('TablePreview', () => {
 
   const renderComponent = (state = defaultState) => {
     return render(
+      // eslint-disable-next-line react/jsx-no-constructed-context-values
       <Context.Provider value={[state, dispatchMock]}>
         <TablePreview />
-      </Context.Provider>
+      </Context.Provider>,
     );
   };
 
@@ -41,8 +41,8 @@ describe('TablePreview', () => {
       ...defaultState,
       parsed: [
         { forename: 'Max', surname: 'Muster', email: '[email protected]' },
-        { forename: '', surname: '', email: '[email protected]' }
-      ]
+        { forename: '', surname: '', email: '[email protected]' },
+      ],
     });
     const tableBody = container.querySelector('tbody');
 
@@ -57,22 +57,19 @@ describe('TablePreview', () => {
       ...defaultState,
       parsed: [
         { forename: 'Max', surname: 'Muster', email: '[email protected]' },
-        { forename: '', surname: '', email: '[email protected]' }
+        { forename: '', surname: '', email: '[email protected]' },
       ],
       validation: [
         { column: 'email', row: 0, message: 'Contains duplicates' },
         { column: 'email', row: 1, message: 'Contains duplicates' },
         { column: 'email', row: 1, message: 'No example address, please' },
-        { column: 'forename', row: 1, message: 'Forename is required' }
-      ]
+        { column: 'forename', row: 1, message: 'Forename is required' },
+      ],
     });
     const tableBody = container.querySelector('tbody');
 
     expect(tableBody?.children[1].children[0]).toHaveClass('error');
     expect(tableBody?.children[1].children[0]).toHaveAttribute('title', 'Forename is required');
-    expect(tableBody?.children[1].children[2]).toHaveAttribute(
-      'title',
-      'Contains duplicates;No example address, please'
-    );
+    expect(tableBody?.children[1].children[2]).toHaveAttribute('title', 'Contains duplicates;No example address, please');
   });
 });

src/components/previews/TablePreview.tsx

@@ -1,46 +1,43 @@
-import React from 'react';
+import { PropsWithChildren } from 'react';
 import { useDSVImport } from '../../features/context';
 
+function Cell({ columnKey, rowIndex, children }: PropsWithChildren<{ columnKey: string; rowIndex: number }>) {
+  const [context] = useDSVImport();
+
+  const errors = context.validation?.filter((e) => e.column === columnKey && e.row === rowIndex);
+  const messages = errors?.map((e) => e.message).join(';');
+
+  return (
+    <td className={messages ? 'error' : ''} title={messages}>
+      {children}
+    </td>
+  );
+}
+
 export interface TablePreviewProps {
   className?: string;
 }
 
-export const TablePreview: React.FC<TablePreviewProps> = (props) => {
+export function TablePreview({ className }: TablePreviewProps) {
   const [context] = useDSVImport();
 
-  const getCellValidationError = (columnKey: string, rowIndex: number) => {
-    if (context.validation) {
-      return context.validation.filter((e) => e.column === columnKey && e.row === rowIndex);
-    }
-  };
-
-  const Cell: React.FC<{ columnKey: string; rowIndex: number }> = (props) => {
-    const errors = getCellValidationError(props.columnKey, props.rowIndex);
-    const messages = errors?.map((e) => e.message).join(';');
-
-    return (
-      <td className={messages ? 'error' : ''} title={messages}>
-        {props.children}
-      </td>
-    );
-  };
-
   return (
-    <table className={props.className}>
+    <table className={className}>
       <thead>
         <tr>
-          {context.columns.map((column, columnIndex) => (
-            <th key={columnIndex}>{column.label}</th>
+          {context.columns.map((column) => (
+            <th key={column.key}>{column.label}</th>
           ))}
         </tr>
       </thead>
       <tbody>
         {context.parsed
           ? context.parsed.map((row, rowIndex) => (
+              // eslint-disable-next-line react/no-array-index-key
               <tr key={rowIndex}>
-                {context.columns.map((column, columnIndex) => {
+                {context.columns.map((column) => {
                   return (
-                    <Cell key={columnIndex} columnKey={column.key.toString()} rowIndex={rowIndex}>
+                    <Cell key={column.key} columnKey={column.key.toString()} rowIndex={rowIndex}>
                       {row[column.key]}
                     </Cell>
                   );
@@ -51,4 +48,4 @@ export const TablePreview: React.FC<TablePreviewProps> = (props) => {
       </tbody>
     </table>
   );
-};
+}

src/features/context.test.ts

@@ -1,7 +1,7 @@
-import { reducer, getDSVImportContext } from './context';
-import { State } from '../models/state';
 import { useContext } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
+import { reducer, getDSVImportContext } from './context';
+import { State } from '../models/state';
 
 describe('context', () => {
   type TestType = unknown;

src/features/context.ts

@@ -1,5 +1,5 @@
-import { State, emptyState } from '../models/state';
 import { createContext, Dispatch, useContext } from 'react';
+import { State, emptyState } from '../models/state';
 import { Actions } from '../models/actions';
 import { GenericColumnType } from '../models/column';
 
@@ -27,10 +27,10 @@ let contextSingleton: React.Context<[State<any>, Dispatch<Actions<any>>]>;
 export const getDSVImportContext = <T>() => {
   if (!contextSingleton) {
     contextSingleton = createContext<[State<T>, Dispatch<Actions<T>>]>([
-      (emptyState as unknown) as State<T>,
+      emptyState as unknown as State<T>,
       () => {
         throw new Error('Not initialized');
-      }
+      },
     ]);
   }
   return contextSingleton as React.Context<[State<T>, Dispatch<Actions<T>>]>;