Add Linter

.github/workflows/ci.yml

@@ -15,6 +15,18 @@ env:
   docker_repository: nlpsandbox/phi-deidentifier-app
 
 jobs:
+  build:
+    env:
+      working-directory: ./client
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      working-directory: ${{env.working-directory}}
+      run: npm ci
+    - name: Run ESLint
+      working-directory: ${{env.working-directory}}
+      run: npx eslint
   docker:
     # needs: [test]
     runs-on: ubuntu-latest

client/.eslintrc.yml

@@ -0,0 +1,21 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - 'plugin:react/recommended'
+  - google
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 12
+  sourceType: module
+plugins:
+  - react
+  - '@typescript-eslint'
+rules:
+  no-invalid-this: off
+  require-jsdoc: off
+  indent:
+    - error
+    - 2

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.1",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
@@ -39,5 +40,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "eslint": "^7.21.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-react": "^7.22.0"
   }
 }

client/src/App.test.js

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
+import {React} from 'react';
 import App from './App';
 
 test('renders learn react link', () => {

client/src/components/AnnotationView.js

@@ -1,39 +1,56 @@
-import { Paper, Zoom } from '@material-ui/core';
-import { DataGrid } from '@material-ui/data-grid';
+import {Paper} from '@material-ui/core';
+import {DataGrid} from '@material-ui/data-grid';
 import React from 'react';
-import { deidentificationStates } from './DeidentifiedText';
-
-export function AnnotationView(props) {
+import {deidentificationStates} from './DeidentifiedText';
+import PropTypes from 'prop-types';
 
+function AnnotationView(props) {
   const types = [
-    {type: "text_date", name: "Date", key: "textDateAnnotations"},
-    {type: "text_physical_address", name: "Physical Address", key: "textPhysicalAddressAnnotations"},
-    {type: "text_person_name", name: "Person Name", key: "textPersonNameAnnotations"}
-  ]
+    {type: 'text_date', name: 'Date', key: 'textDateAnnotations'},
+    {type: 'text_physical_address', name: 'Physical Address', key:
+    'textPhysicalAddressAnnotations'},
+    {type: 'text_person_name', name: 'Person Name', key:
+    'textPersonNameAnnotations'},
+  ];
 
   let allAnnotations;
-  if (props.annotations === deidentificationStates.EMPTY || props.annotations === deidentificationStates.LOADING || props.annotations === deidentificationStates.ERROR) {
-    allAnnotations = []
+  if (props.annotations === deidentificationStates.EMPTY ||
+      props.annotations === deidentificationStates.LOADING ||
+      props.annotations === deidentificationStates.ERROR) {
+    allAnnotations = [];
   } else {
     allAnnotations = types.map(
       (type) => props.annotations[type.key].map((annotation, index) => {
-        return {type: type.name, id: String(type.type)+'_'+String(index), ...annotation};
-      })
+        return {
+          type: type.name,
+          id: String(type.type)+'_'+String(index),
+          ...annotation,
+        };
+      }),
     ).flat();
   }
 
   const columns = [
-    {field: 'id', headerName: "ID", hide: true},
-    {field: 'type', headerName: "Type", width: 125},
-    {field: 'text', headerName: "Text", width: 130},
-    {field: 'start', headerName: "Start", width: 90},
-    {field: 'length', headerName: "Length", width: 100},
-    {field: 'confidence', headerName: "Confidence", width: 130}
-  ]
+    {field: 'id', headerName: 'ID', hide: true},
+    {field: 'type', headerName: 'Type', width: 125},
+    {field: 'text', headerName: 'Text', width: 130},
+    {field: 'start', headerName: 'Start', width: 90},
+    {field: 'length', headerName: 'Length', width: 100},
+    {field: 'confidence', headerName: 'Confidence', width: 130},
+  ];
 
   return (
-    <Paper elevation={3} style={{ height: "400px" }}>
+    <Paper elevation={3} style={{height: '400px'}}>
       <DataGrid rows={allAnnotations} columns={columns}/>
     </Paper>
   );
-}
+}
+
+AnnotationView.propTypes = {
+  annotations: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.number,
+  ]),
+};
+
+export default AnnotationView;