Show errors in preview

Author: openscript

package.json

@@ -14,6 +14,8 @@
   "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.9.6",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@rollup/plugin-typescript": "^4.1.1",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-docs": "^5.3.18",

src/DSVImport.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { DSVImport, ColumnsType } from './';
 import { action } from '@storybook/addon-actions';
+import styled from '@emotion/styled';
 
 export default { title: 'Usage' };
 
@@ -50,6 +51,12 @@ export const UsingOnChangeCallback = () => {
 };
 UsingOnChangeCallback.story = { name: 'Using on change callback' };
 
+const CustomTablePreview = styled(DSVImport.TablePreview)`
+  .error {
+    border: 1px solid red;
+  }
+`;
+
 export const UsingOnValidationCallback = () => {
   const columns: ColumnsType<BasicType> = [
     { key: 'forename', label: 'Forename' },
@@ -62,7 +69,7 @@ export const UsingOnValidationCallback = () => {
   return (
     <DSVImport<BasicType> columns={columns} onChange={onChangeAction} onValidation={onValidationAction}>
       <DSVImport.TextareaInput />
-      <DSVImport.TablePreview />
+      <CustomTablePreview />
     </DSVImport>
   );
 };

src/components/previews/TablePreview.test.tsx

@@ -40,15 +40,37 @@ describe('TablePreview', () => {
     const { container } = renderComponent({
       ...defaultState,
       parsed: [
-        { forename: 'Max', surname: 'Muster', email: 'max@example.com' },
-        { forename: '', surname: '', email: 'unknown@example.com' }
+        { forename: 'Max', surname: 'Muster', email: 'example@example.com' },
+        { forename: '', surname: '', email: 'example@example.com' }
       ]
     });
     const tableBody = container.querySelector('tbody');
 
     expect(tableBody?.childElementCount).toBe(2);
 
     expect(tableBody?.children[0].children[0]).toHaveTextContent('Max');
-    expect(tableBody?.children[1].children[2]).toHaveTextContent('[email protected]');
+    expect(tableBody?.children[1].children[2]).toHaveTextContent('[email protected]');
+  });
+
+  it('should render the parsed content in the table body', () => {
+    const { container } = renderComponent({
+      ...defaultState,
+      parsed: [
+        { forename: 'Max', surname: 'Muster', email: '[email protected]' },
+        { forename: '', surname: '', email: '[email protected]' }
+      ],
+      validation: [
+        { column: 'email', 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

@@ -1,15 +1,55 @@
 import React from 'react';
 import { useDSVImport } from '../../features/context';
 
-export const TablePreview: React.FC = () => {
+interface Props {
+  className?: string;
+}
+
+export const TablePreview: React.FC<Props> = (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(';');
+
+    return (
+      <td className={messages ? 'error' : ''} title={messages}>
+        {props.children}
+      </td>
+    );
+  };
+
   return (
-    <table>
+    <table className={props.className}>
       <thead>
         <tr>
           {context.columns.map((column, columnIndex) => (
-            <th key={columnIndex}>{column.label}</th>
+            <ColumnHead key={columnIndex} columnKey={column.key.toString()}>
+              {column.label}
+            </ColumnHead>
           ))}
         </tr>
       </thead>
@@ -18,7 +58,11 @@ export const TablePreview: React.FC = () => {
           ? context.parsed.map((row, rowIndex) => (
               <tr key={rowIndex}>
                 {context.columns.map((column, columnIndex) => {
-                  return <td key={columnIndex}>{row[column.key]}</td>;
+                  return (
+                    <Cell key={columnIndex} columnKey={column.key.toString()} rowIndex={rowIndex}>
+                      {row[column.key]}
+                    </Cell>
+                  );
                 })}
               </tr>
             ))

yarn.lock

@@ -1122,7 +1122,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@^10.0.20":
+"@emotion/core@^10.0.20", "@emotion/core@^10.0.28":
   version "10.0.28"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
   integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
@@ -1186,7 +1186,7 @@
     "@emotion/serialize" "^0.11.15"
     "@emotion/utils" "0.11.3"
 
-"@emotion/styled@^10.0.17":
+"@emotion/styled@^10.0.17", "@emotion/styled@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
   integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==