Show unique constraint errors on duplicates

Author: openscript

README.md

@@ -62,6 +62,7 @@ The most important features of this component are:
  - ✅ Fully compositable
  - ✅ Automatic testing with >90% coverage
  - ✅ Input validation
+ - ❌ Input transformation
  - ❌ [Material UI](https://material-ui.com/) integration
  - ❌ [ant.design](https://ant.design/) integration
 

src/DSVImport.test.tsx

@@ -61,6 +61,9 @@ describe('DSVImport', () => {
       });
     }
 
-    expect(onValidationMock).toBeCalledWith([{ column: 'email', message: 'Contains duplicates' }]);
+    expect(onValidationMock).toBeCalledWith([
+      { column: 'email', row: 0, message: 'Contains duplicates' },
+      { column: 'email', row: 1, message: 'Contains duplicates' }
+    ]);
   });
 });

src/components/previews/TablePreview.test.tsx

@@ -60,15 +60,12 @@ describe('TablePreview', () => {
         { forename: '', surname: '', email: '[email protected]' }
       ],
       validation: [
-        { column: 'email', message: 'Contains duplicates' },
+        { column: 'email', row: 0, message: 'Contains duplicates' },
+        { column: 'email', row: 1, message: 'Contains duplicates' },
         { column: 'forename', row: 1, message: 'Forename is required' }
       ]
     });
     const tableBody = container.querySelector('tbody');
-    const tableHead = container.querySelector('thead tr');
-
-    expect(tableHead?.children[2]).toHaveClass('error');
-    expect(tableHead?.children[2]).toHaveAttribute('title', 'Contains duplicates');
 
     expect(tableBody?.children[1].children[0]).toHaveClass('error');
     expect(tableBody?.children[1].children[0]).toHaveAttribute('title', 'Forename is required');

src/components/previews/TablePreview.tsx

@@ -8,29 +8,12 @@ export interface TablePreviewProps {
 export const TablePreview: React.FC<TablePreviewProps> = (props) => {
   const [context] = useDSVImport();
 
-  const getColumnValidationError = (columnKey: string) => {
-    if (context.validation) {
-      return context.validation.filter((e) => e.column === columnKey && !e.row);
-    }
-  };
-
   const getCellValidationError = (columnKey: string, rowIndex: number) => {
     if (context.validation) {
       return context.validation.filter((e) => e.column === columnKey && e.row === rowIndex);
     }
   };
 
-  const ColumnHead: React.FC<{ columnKey: string }> = (props) => {
-    const errors = getColumnValidationError(props.columnKey);
-    const messages = errors?.map((e) => e?.message).join(';');
-
-    return (
-      <th className={messages ? 'error' : ''} title={messages}>
-        {props.children}
-      </th>
-    );
-  };
-
   const Cell: React.FC<{ columnKey: string; rowIndex: number }> = (props) => {
     const errors = getCellValidationError(props.columnKey, props.rowIndex);
     const messages = errors?.map((e) => e?.message).join(';');
@@ -47,9 +30,7 @@ export const TablePreview: React.FC<TablePreviewProps> = (props) => {
       <thead>
         <tr>
           {context.columns.map((column, columnIndex) => (
-            <ColumnHead key={columnIndex} columnKey={column.key.toString()}>
-              {column.label}
-            </ColumnHead>
+            <th key={columnIndex}>{column.label}</th>
           ))}
         </tr>
       </thead>

src/index.tsx

@@ -12,3 +12,4 @@ DSVImport.TablePreview = TablePreview;
 
 export { ColumnsType } from './models/column';
 export { useDSVImport } from './features/context';
+export { Rule } from './models/rule';

src/middlewares/validatorMiddleware.test.ts

@@ -34,7 +34,10 @@ describe('validatorMiddleware', () => {
 
     expect(dispatchMock).toBeCalledWith({
       type: 'setValidation',
-      errors: [{ column: 'email', message: 'Contains duplicates' }]
+      errors: [
+        { column: 'email', row: 0, message: 'Contains duplicates' },
+        { column: 'email', row: 1, message: 'Contains duplicates' }
+      ]
     });
   });
 

src/middlewares/validatorMiddleware.ts

@@ -8,14 +8,23 @@ const onlyUniqueValues = (data: string[]) => {
   return new Set(data).size === data.length;
 };
 
+const findDuplicates = (data: string[]) => {
+  return Array.from(new Set(data.filter((item, index) => data.indexOf(item) != index)));
+};
+
 const validateColumn = <T>(key: keyof T, data: T[keyof T][], rules?: Rule[]): ValidationError<T>[] => {
   const errors: ValidationError<T>[] = [];
 
   if (rules) {
     const values = data.map((d) => new String(d).toString());
     rules.forEach((r) => {
       if ((r.constraint as UniqueConstraint).unique && !onlyUniqueValues(values)) {
-        errors.push({ column: key, message: r.message });
+        const duplicates = findDuplicates(values);
+        values.forEach((v, i) => {
+          if (duplicates.indexOf(v) !== -1) {
+            errors.push({ column: key, row: i, message: r.message });
+          }
+        });
       } else if (typeof (r.constraint as CallbackConstraint).callback === 'function') {
         const callback = (r.constraint as CallbackConstraint).callback;
         values.forEach((v, i) => {

src/models/validation.ts

@@ -1 +1 @@
-export type ValidationError<T> = { column: keyof T; row?: number; message: string };
+export type ValidationError<T> = { column: keyof T; row: number; message: string };