chore: add eslint checks and fix any eslint errors

.eslintrc.js

@@ -0,0 +1,10 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+  extends: [config.eslintReact],
+  rules: {
+    'import/order': ['off'],
+    'react/sort-prop-types': ['off'],
+    'max-params': ['off'],
+  },
+}

.hooks/.gitignore

@@ -0,0 +1 @@
+_

.hooks/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn d2-style check commit "$1"

.hooks/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn d2-style check --staged

.prettierrc.js

@@ -0,0 +1,11 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+  ...require(config.prettier),
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'consistent',
+  printWidth: 120,
+}

package.json

@@ -5,16 +5,19 @@
   "license": "BSD-3-Clause",
   "private": true,
   "scripts": {
+    "lint": "d2-style check",
+    "format": "d2-style apply",
     "build": "d2-app-scripts build",
     "start": "d2-app-scripts start",
     "test": "jest",
     "deploy": "d2-app-scripts deploy"
   },
   "devDependencies": {
-    "@dhis2/cli-app-scripts": "^5.5.1"
+    "@dhis2/cli-app-scripts": "^5.5.1",
+    "@dhis2/cli-style": "^9.3.1"
   },
   "dependencies": {
     "@dhis2/app-runtime": "^2.7.0",
     "@dhis2/ui": "^6.2.2"
   }
-}
+}

src/App.js

@@ -1,10 +1,9 @@
-import React, { useState, useEffect } from 'react'
 import { useDataQuery, useDataMutation } from '@dhis2/app-runtime'
-import i18n from '@dhis2/d2-i18n'
+import React, { useState, useEffect } from 'react'
 import classes from './App.module.css'
 import ConnectDataStore from './components/ConnectDataStore'
-import Loader from './components/Loader'
 import Error from './components/Error'
+import Loader from './components/Loader'
 import { config } from './consts'
 
 const query = {

src/calculateInds.js

@@ -1,6 +1,6 @@
-import { makeUid, orderCos } from './utils'
 import { config } from './consts'
 import { MappingGenerationError } from './Errors'
+import { makeUid, orderCos } from './utils'
 
 class PiCalculationError extends Error {
   constructor(message) {
@@ -10,7 +10,7 @@ class PiCalculationError extends Error {
 }
 
 function getByUid(uid, metadata) {
-  const matches = metadata.filter((metaItem) => metaItem.id === uid)
+  const matches = metadata.filter(metaItem => metaItem.id === uid)
   if (matches.length === 0) {
     throw new PiCalculationError(`Could not find PI with UID ${uid} in metadata`)
   }
@@ -33,7 +33,7 @@ function getFilters(metaItem, coMaps) {
         'option combos in the admin app before attempting to generate the mapping again'
     )
   }
-  const cocs = rawCocs.map((coc) => orderCos(coc))
+  const cocs = rawCocs.map(coc => orderCos(coc))
   const result = []
   for (const coc of cocs) {
     let cocFilter = ''
@@ -44,7 +44,9 @@ function getFilters(metaItem, coMaps) {
         continue
       } else if (!(co.id in coMaps)) {
         throw new MappingGenerationError(
-          'Found a category option combo which cannot be constructed from the assigned categories, this typically means the COCs on the data element or data set need updating to align with the categories'
+          'Found a category option combo which cannot be constructed from the assigned ' +
+            'categories, this typically means the COCs on the data element or data set need ' +
+            'updating to align with the categories'
         )
       } else if (coMaps[co.id].filter === '') {
         console.log(`Skipping coc ${coc.name} because co filter ${co.name} is blank`)
@@ -73,8 +75,8 @@ function combineFilters(baseFilter, dsFilters, deFilters) {
     const { cocUid: aocUid, filter: dsFilter, suffix: dsSuffix } = dsFilterInfo
     for (const deFilterInfo of deFilters) {
       const { cocUid, filter: deFilter, suffix: deSuffix } = deFilterInfo
-      const newFilterArr = [baseFilter, dsFilter, deFilter].filter((arrItem) => arrItem !== '')
-      const newSuffixArr = [dsSuffix, deSuffix].filter((suffix) => suffix !== '(default)')
+      const newFilterArr = [baseFilter, dsFilter, deFilter].filter(arrItem => arrItem !== '')
+      const newSuffixArr = [dsSuffix, deSuffix].filter(suffix => suffix !== '(default)')
       result.push({
         cocUid,
         aocUid,
@@ -121,7 +123,7 @@ function calculatePis(rowId, dsUid, deUid, piUid, coMaps, metadata, generatedPis
     ...metadata.dataElements,
     ...metadata.programIndicators,
   }
-  const deleteOldPis = generatedPis.filter((pi) => pi.description.includes(rowId))
+  const deleteOldPis = generatedPis.filter(pi => pi.description.includes(rowId))
   const combinedUid = `${dsUid.slice(0, 3)}-${deUid.slice(0, 3)}-${piUid.slice(0, 3)}`
   const baseFilter = getBaseFilter(piUid, programIndicators)
   const ds = getByUid(dsUid, dataSets)
@@ -135,11 +137,11 @@ function calculatePis(rowId, dsUid, deUid, piUid, coMaps, metadata, generatedPis
   return piUpdates
 }
 
-function getMappingAttr(attributeValues) {
-  const attrVal = attributeValues.filter((attrVal) => attrVal.attribute.id === config.indCustomAttr.id)
+function getMappingAttr(piUid, attributeValues) {
+  const attrVal = attributeValues.filter(attrVal => attrVal.attribute.id === config.indCustomAttr.id)
   if (attrVal.length === 0) {
-    throw ValueError(
-      `Program indicator ${piSource.id} does not have de mapping attribute value for custom attribute ${config.indCustomAttr.id}`
+    throw new MappingGenerationError(
+      `Program indicator ${piUid.id} does not have de mapping attribute value for custom attribute ${config.indCustomAttr.id}`
     )
   } else {
     return attrVal[0].value
@@ -161,7 +163,7 @@ function generateInd(indUid, piSource, indTypeUid) {
     indicatorType: { id: indTypeUid },
     attributeValues: [
       {
-        value: getMappingAttr(piSource.attributeValues),
+        value: getMappingAttr(piSource.id, piSource.attributeValues),
         attribute: {
           id: config.indCustomAttr.id,
         },
@@ -171,7 +173,7 @@ function generateInd(indUid, piSource, indTypeUid) {
 }
 
 function calculateIndGroup(rowId, generatedIndGroups, createUpdateInds) {
-  const IndGroups = generatedIndGroups.filter((indGroup) => indGroup.name.includes(`indMappingGroup-${rowId}`))
+  const IndGroups = generatedIndGroups.filter(indGroup => indGroup.name.includes(`indMappingGroup-${rowId}`))
   let indGroup
   if (IndGroups.length) {
     indGroup = IndGroups[0]
@@ -182,7 +184,7 @@ function calculateIndGroup(rowId, generatedIndGroups, createUpdateInds) {
       id: uid,
     }
   }
-  indGroup.indicators = createUpdateInds.map((ind) => ({ id: ind.id }))
+  indGroup.indicators = createUpdateInds.map(ind => ({ id: ind.id }))
   return indGroup
 }
 
@@ -191,7 +193,7 @@ function calculateInds(createUpdatePis, deletePis, generatedInds, indTypes) {
   const deleteInds = []
   const indTypeUid = indTypes[0].id
   for (const pi of createUpdatePis) {
-    const existingInd = generatedInds.filter((ind) => ind.description === pi.description)
+    const existingInd = generatedInds.filter(ind => ind.description === pi.description)
     let indUid
     if (existingInd.length === 0) {
       indUid = makeUid()
@@ -201,7 +203,7 @@ function calculateInds(createUpdatePis, deletePis, generatedInds, indTypes) {
     createUpdateInds.push(generateInd(indUid, pi, indTypeUid))
   }
   for (const pi of deletePis) {
-    const existingInd = generatedInds.filter((ind) => ind.description === pi.description)
+    const existingInd = generatedInds.filter(ind => ind.description === pi.description)
     if (existingInd.length) {
       deleteInds.push({ id: existingInd[0].id })
     }

src/components/ActionButtons.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { Button, ButtonStrip } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 import classes from '../App.module.css'
 
 const ActionButtons = ({ addRow, generateSelected }) => {

src/components/CoFilters.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { Table, TableHead, TableRowHead, TableCellHead, TableBody } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 import RowCatFilter from './RowCatFilter'
 
 const noCoStyle = {
@@ -53,6 +53,7 @@ CoFilters.propTypes = {
     deName: PropTypes.string.isRequired,
     dsName: PropTypes.string.isRequired,
     piName: PropTypes.string.isRequired,
+    coFilters: PropTypes.shape({ name: PropTypes.string.isRequired, id: PropTypes.string.isRequired }),
   }).isRequired,
   setRowData: PropTypes.func.isRequired,
   coMappings: PropTypes.objectOf(

src/components/ConnectDataStore.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { useDataQuery } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { config } from '../consts'
-import Loader from './Loader'
 import Error from './Error'
+import Loader from './Loader'
 import Page from './Page'
 
 const dataStoreQuery = {

src/components/Error.js

@@ -1,7 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const Error = (props) => {
-  return <span>{props.children}</span>
+const Error = ({ children }) => {
+  return <span>{children}</span>
+}
+
+Error.propTypes = {
+  children: PropTypes.node,
 }
 
 export default Error

src/components/ImportSummary.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const ImportSummary = ({ handleClose, importResults }) => {
   const { success, message } = importResults

src/components/Loader.js

@@ -1,7 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const Loader = (props) => {
-  return <span>{props.children}</span>
+const Loader = ({ children }) => {
+  return <span>{children}</span>
+}
+
+Loader.propTypes = {
+  children: PropTypes.node,
 }
 
 export default Loader

src/components/Mapping.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState, useEffect } from 'react'
 import { getCosFromRow } from '../utils'
-import RowFieldSelect from './RowFieldSelect'
 import CoFilters from './CoFilters'
+import RowFieldSelect from './RowFieldSelect'
 
 const Mapping = ({ coMaps, rowDataIn, metadata, handleClose, handleUpdate }) => {
   const [rowData, setRowData] = useState(rowDataIn)
@@ -15,13 +15,13 @@ const Mapping = ({ coMaps, rowDataIn, metadata, handleClose, handleUpdate }) =>
     setCoMappings(getCosFromRow(rowData.dsUid, rowData.deUid, metadata, coMaps))
   }, [rowData.deUid, rowData.dsUid])
 
-  const handleDsSelect = (rowData) => {
+  const handleDsSelect = rowData => {
     const dss = metadata.dataSets.dataSets
     const des = metadata.dataElements.dataElements
-    const ds = dss.filter((ds) => ds.id === rowData.dsUid)[0]
-    const selectedDe = des.filter((de) => de.id === rowData.deUid)[0]
-    const filteredDeUids = ds.dataSetElements.map((dse) => dse.dataElement.id)
-    const deOpts = des.filter((de) => filteredDeUids.includes(de.id))
+    const ds = dss.filter(ds => ds.id === rowData.dsUid)[0]
+    const selectedDe = des.filter(de => de.id === rowData.deUid)[0]
+    const filteredDeUids = ds.dataSetElements.map(dse => dse.dataElement.id)
+    const deOpts = des.filter(de => filteredDeUids.includes(de.id))
     if (selectedDe && !filteredDeUids.includes(selectedDe.id)) {
       rowData.deUid = ''
       rowData.deName = ''
@@ -64,7 +64,7 @@ const Mapping = ({ coMaps, rowDataIn, metadata, handleClose, handleUpdate }) =>
       <ModalActions>
         <ButtonStrip>
           <Button onClick={handleClose}>Close</Button>
-          <Button primary disabled={disableSave} onClick={(e) => handleUpdate(rowData, coMappings)}>
+          <Button primary disabled={disableSave} onClick={() => handleUpdate(rowData, coMappings)}>
             Save
           </Button>
         </ButtonStrip>