feat(ErrorLogger): migrate error logger and refactor as functional co…

…mponent

Signed-off-by: Diana Lease <[email protected]>

package.json

@@ -24,6 +24,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-table": "^6.10.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.86.0",
     "styled-components": "^4.2.0"
@@ -82,4 +83,4 @@
       "./src/utilities/test/jestEnzyme"
     ]
   }
-}
+}

src/ErrorLogger/README.md

@@ -0,0 +1,19 @@
+## Cicero-UI - ErrorLogger
+
+### Usage
+
+```
+npm install @accordproject/cicero-ui
+```
+
+```
+import { ErrorLogger } from '@accordproject/cicero-ui';
+
+const ErrorContainer = props => (
+  <ErrorComponent errors={props.errors}/>
+);
+```
+
+### Props
+
+- `error` : An `array` which contains error objects.

src/ErrorLogger/index.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import 'react-table/react-table.css';
+import ReactTable from 'react-table';
+
+/**
+ * @param {object} d
+ * @param {string} key
+ */
+function buildMessage(d, key) {
+  let result = 'Unknown';
+
+  if (d.fileLocation) {
+    result = '';
+    if (d.fileLocation[key].line) {
+      result += `Line: ${d.fileLocation[key].line}`;
+    }
+
+    if (d.fileLocation[key].column) {
+      result += ` Col: ${d.fileLocation[key].column}`;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * @param {object} d
+ */
+function buildStartLocation(d) {
+  return buildMessage(d, 'start');
+}
+
+/**
+ * @param {object} d
+ */
+function buildEndLocation(d) {
+  return buildMessage(d, 'end');
+}
+
+
+const columns = [{
+  Header: 'Type',
+  accessor: 'type',
+  width: 100,
+},
+{
+  Header: 'Name',
+  accessor: 'name',
+  width: 200,
+},
+{
+  Header: 'File',
+  accessor: 'fileName',
+  width: 100,
+},
+{
+  id: 'startLocation',
+  Header: 'Start Location',
+  accessor: d => buildStartLocation(d),
+  width: 100,
+},
+{
+  id: 'endLocation',
+  Header: 'End Location',
+  accessor: d => buildEndLocation(d),
+  width: 100,
+},
+{
+  Header: 'Message',
+  accessor: 'shortMessage',
+  width: 600,
+},
+];
+
+const ErrorLogger = props => (
+  <ReactTable
+    data={props.errors}
+    pageSize={5}
+    columns={columns}
+  />
+);
+
+ErrorLogger.propTypes = {
+  errors: PropTypes.array.isRequired,
+};
+
+export default ErrorLogger;

src/index.js

@@ -1,6 +1,12 @@
-import TemplateLibrary from './TemplateLibrary';
 import ContractEditor from './ContractEditor';
+import ErrorLogger from './ErrorLogger';
+import TemplateLibrary from './TemplateLibrary';
 import Tile from './Tile';
 import 'semantic-ui-css/semantic.min.css';
 
-export { ContractEditor, TemplateLibrary, Tile };
+export {
+  ContractEditor,
+  ErrorLogger,
+  TemplateLibrary,
+  Tile,
+};