chore: enforce arrow style functions

.eslintrc.json

@@ -42,7 +42,7 @@
     "import/no-named-as-default": "off",
     "max-classes-per-file": "error",
     "no-useless-escape": "off",
-    "react/display-name": "warn",
+    "react/display-name": "error",
     "react/jsx-no-target-blank": "warn",
     // https://github.com/standard/eslint-config-standard-with-typescript/issues/248
     "react/no-deprecated": "warn",

package.json

@@ -183,6 +183,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-prefer-arrow-functions": "^3.1.4",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-sort-class-members": "^1.15.2",
     "eslint-plugin-unicorn": "^36.0.0",

src/.eslintrc.json

@@ -1,5 +1,15 @@
 {
   "rules": {
-    "no-console": "error"
-  }
+    "no-console": "error",
+    "prefer-arrow-functions/prefer-arrow-functions": [
+      "error",
+      {
+        "classPropertiesAllowed": false,
+        "disallowPrototype": false,
+        "returnStyle": "unchanged",
+        "singleReturnOnly": false
+      }
+    ]
+  },
+  "plugins": ["prefer-arrow-functions"]
 }

src/common/Error/handlers/Reloader.tsx

@@ -16,7 +16,7 @@ export const attemptReload = () => {
  * Set a sessionStorage value with a future expiry date that will prompt self-deletion
  * even if page session not closed (i.e. tab left open)
  **/
-function setWithExpiry(key: string, value: string, ttl: number) {
+const setWithExpiry = (key: string, value: string, ttl: number) => {
   const item = {
     value: value,
     expiry: new Date().getTime() + ttl,
@@ -25,7 +25,7 @@ function setWithExpiry(key: string, value: string, ttl: number) {
 }
 
 /** Get a sessionStorage value with an expiry date, returning value only if not expired */
-function getWithExpiry(key: string): string | null {
+const getWithExpiry = (key: string): string | null => {
   const itemString = window.sessionStorage.getItem(key)
   if (!itemString) return null
 

src/common/Form/Select.field.tsx

@@ -20,20 +20,16 @@ interface ISelectFieldProps extends FieldProps {
 // therefore the following two functions are used for converting to-from string values and field options
 
 // depending on select type (e.g. multi) and option selected get value
-function getValueFromSelect(
+const getValueFromSelect = (
   v: ISelectOption | ISelectOption[] | null | undefined,
-) {
-  return v ? (Array.isArray(v) ? v.map((el) => el.value) : v.value) : v
-}
+) => (v ? (Array.isArray(v) ? v.map((el) => el.value) : v.value) : v)
 
 // given current values find the relevant select options
-function getValueForSelect(
+const getValueForSelect = (
   opts: ISelectOption[] = [],
   v: string | string[] | null | undefined,
-) {
-  function findVal(optVal: string) {
-    return opts.find((o) => o.value === optVal)
-  }
+) => {
+  const findVal = (optVal: string) => opts.find((o) => o.value === optVal)
   return v
     ? Array.isArray(v)
       ? v.map((optVal) => findVal(optVal) as ISelectOption)

src/common/Form/UnsavedChangesDialog.tsx

@@ -10,7 +10,7 @@ interface IProps {
 const CONFIRM_DIALOG_MSG =
   'You have unsaved changes. Are you sure you want to leave this page?'
 
-const beforeUnload = function (e) {
+const beforeUnload = (e) => {
   e.preventDefault()
   e.returnValue = CONFIRM_DIALOG_MSG
 }

src/common/isUserVerified.ts

@@ -1,7 +1,7 @@
 import type { AggregationsStore } from 'src/stores/Aggregations/aggregations.store'
 import { useCommonStores } from '../'
 
-export const isUserVerified = function (userId: string) {
+export const isUserVerified = (userId: string) => {
   const { aggregationsStore } = useCommonStores().stores
   return isUserVerifiedWithStore(userId, aggregationsStore)
 }
@@ -11,9 +11,7 @@ export const isUserVerified = function (userId: string) {
  * are not compatible with hooks.
  * https://reactjs.org/docs/hooks-intro.html
  */
-export const isUserVerifiedWithStore = function (
+export const isUserVerifiedWithStore = (
   userId: string,
   store: AggregationsStore,
-) {
-  return store.aggregations.users_verified?.[userId]
-}
+) => store.aggregations.users_verified?.[userId]

src/config/config.ts

@@ -25,7 +25,7 @@ import type { UserRole } from '../models'
  * @param fallbackValue - optional fallback value
  * @returns string
  */
-function _c(property: ConfigurationOption, fallbackValue?: string): string {
+const _c = (property: ConfigurationOption, fallbackValue?: string): string => {
   const configurationSource = ['development', 'test'].includes(
     process.env.NODE_ENV,
   )
@@ -43,7 +43,7 @@ export const getConfigurationOption = _c
 // On dev sites user can override default role
 const devSiteRole: UserRole = localStorage.getItem('devSiteRole') as UserRole
 
-function getSiteVariant(): siteVariants {
+const getSiteVariant = (): siteVariants => {
   const devSiteVariant: siteVariants = localStorage.getItem(
     'devSiteVariant',
   ) as any

src/modules/admin/components/Table/HeadFilter.tsx

@@ -25,7 +25,7 @@ const Top = styled(Box)`
   border-bottom: 15px solid white;
 `
 
-function HeadFilter(props: Props) {
+const HeadFilter = (props: Props) => {
   const {
     field,
     filterOptions,

src/modules/admin/components/Table/Table.tsx

@@ -58,98 +58,96 @@ const getTHeadThProps: ComponentPropsGetterC = (
   }
 }
 
-function Table(props: ITableProps) {
-  return (
-    <>
-      {/* Override styles applied in global css */}
-      <Global
-        styles={css`
-          .ReactTable .rt-thead.-header {
-            box-shadow: none !important;
-          }
-        `}
-      />
-      <ReactTable
-        data-cy="reactTable"
-        style={{
-          border: 'none',
-          height: 'calc(100vh - 410px)',
-          minHeight: '500px',
-        }}
-        ThComponent={(row: IHeaderRenderProps) => {
-          const isSortAsc = row.className?.includes('-sort-asc')
-          const isSortDesc = row.className?.includes('-sort-desc')
-          const { header, className, toggleSort } = row
-          return (
-            <TableHead row={row}>
-              <Text
-                onClick={(e) => toggleSort?.(e)}
-                p={2}
-                sx={{
-                  backgroundColor: '#E2EDF7',
-                  borderRadius: '4px',
-                }}
-                className={className}
-              >
-                {header}
-              </Text>
-              {isSortAsc && <Text>⬆️</Text>}
-              {isSortDesc && <Text>⬇️</Text>}
-              {props.filterComponent && props.filterComponent({ ...row })}
-            </TableHead>
-          )
-        }}
-        TdComponent={(col) => (
-          <Box
-            sx={{
-              flex: '100 0 auto',
-              width: '50px',
-              a: {
-                color: '#67bfdf',
-                textDecoration: 'underline',
-              },
-              'a:hover': {
-                textDecoration: 'none',
-              },
-            }}
-          >
-            <props.rowComponent col={col} />
-          </Box>
-        )}
-        getTdProps={getTdProps}
-        getTheadThProps={getTHeadThProps}
-        getTrProps={() => {
-          return {
-            style: {
-              marginTop: '10px',
-              marginBottom: '10px',
-              border: '1px solid',
-              borderRadius: '10px',
-              display: 'flex',
-              alignItems: 'center',
-              padding: '10px',
-              height: '4rem',
-              backgroundColor: 'white',
+const Table = (props: ITableProps) => (
+  <>
+    {/* Override styles applied in global css */}
+    <Global
+      styles={css`
+        .ReactTable .rt-thead.-header {
+          box-shadow: none !important;
+        }
+      `}
+    />
+    <ReactTable
+      data-cy="reactTable"
+      style={{
+        border: 'none',
+        height: 'calc(100vh - 410px)',
+        minHeight: '500px',
+      }}
+      ThComponent={(row: IHeaderRenderProps) => {
+        const isSortAsc = row.className?.includes('-sort-asc')
+        const isSortDesc = row.className?.includes('-sort-desc')
+        const { header, className, toggleSort } = row
+        return (
+          <TableHead row={row}>
+            <Text
+              onClick={(e) => toggleSort?.(e)}
+              p={2}
+              sx={{
+                backgroundColor: '#E2EDF7',
+                borderRadius: '4px',
+              }}
+              className={className}
+            >
+              {header}
+            </Text>
+            {isSortAsc && <Text>⬆️</Text>}
+            {isSortDesc && <Text>⬇️</Text>}
+            {props.filterComponent && props.filterComponent({ ...row })}
+          </TableHead>
+        )
+      }}
+      TdComponent={(col) => (
+        <Box
+          sx={{
+            flex: '100 0 auto',
+            width: '50px',
+            a: {
+              color: '#67bfdf',
+              textDecoration: 'underline',
             },
-          }
-        }}
-        getPaginationProps={() => {
-          return {
-            style: {
-              marginTop: '10px',
+            'a:hover': {
+              textDecoration: 'none',
             },
-          }
-        }}
-        showPagination={true}
-        data={props.data}
-        columns={props.columns}
-        defaultPageSize={10}
-        minRows={props.data.length ? 3 : 1}
-        showPageSizeOptions={true}
-        sortable
-      />
-    </>
-  )
-}
+          }}
+        >
+          <props.rowComponent col={col} />
+        </Box>
+      )}
+      getTdProps={getTdProps}
+      getTheadThProps={getTHeadThProps}
+      getTrProps={() => {
+        return {
+          style: {
+            marginTop: '10px',
+            marginBottom: '10px',
+            border: '1px solid',
+            borderRadius: '10px',
+            display: 'flex',
+            alignItems: 'center',
+            padding: '10px',
+            height: '4rem',
+            backgroundColor: 'white',
+          },
+        }
+      }}
+      getPaginationProps={() => {
+        return {
+          style: {
+            marginTop: '10px',
+          },
+        }
+      }}
+      showPagination={true}
+      data={props.data}
+      columns={props.columns}
+      defaultPageSize={10}
+      minRows={props.data.length ? 3 : 1}
+      showPageSizeOptions={true}
+      sortable
+    />
+  </>
+)
 
 export default Table

src/modules/admin/components/Table/TableHead.tsx

@@ -6,22 +6,20 @@ interface Props {
   row: any
 }
 
-function TableHead({ children, row }: Props) {
-  return (
-    <Box
-      data-cy="tableHead"
-      sx={{
-        ...row.style,
-        textAlign: 'left',
-        height: '3rem',
-        mb: 2,
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      {children}
-    </Box>
-  )
-}
+const TableHead = ({ children, row }: Props) => (
+  <Box
+    data-cy="tableHead"
+    sx={{
+      ...row.style,
+      textAlign: 'left',
+      height: '3rem',
+      mb: 2,
+      display: 'flex',
+      alignItems: 'center',
+    }}
+  >
+    {children}
+  </Box>
+)
 
 export default TableHead

src/modules/admin/components/adminUserSearch.tsx

@@ -7,7 +7,7 @@ type Props = {
   onSearchChange: (text: string) => void
 }
 
-function AdminUserSearch({ total, onSearchChange }: Props) {
+const AdminUserSearch = ({ total, onSearchChange }: Props) => {
   const theme = useTheme()
 
   return (