Adjust ESLint config and fix errors (#1980)

* package.json: enable pre-test linting

* adjust eslint config

* fix eslint errors

catalog/.eslintrc.js

@@ -48,10 +48,12 @@ module.exports = {
     'max-len': 0,
     'newline-per-chained-call': 0,
     'no-confusing-arrow': 0,
-    'no-console': 1,
+    'no-console': 2,
     'no-nested-ternary': 1,
+    'no-underscore-dangle': [2, { allow: ['_', '__'] }],
     'no-unused-vars': 2,
     'no-use-before-define': 0,
+    'prefer-arrow-callback': [2, { allowNamedFunctions: true }],
     'prefer-template': 2,
     'react-hooks/exhaustive-deps': 2,
     'react-hooks/rules-of-hooks': 2,
@@ -69,6 +71,7 @@ module.exports = {
     'react/require-extension': 0,
     'react/self-closing-comp': 0,
     'react/sort-comp': 0,
+    'react/static-property-placement': [2, 'static public field'],
     'redux-saga/no-yield-in-race': 2,
     'redux-saga/yield-effects': 2,
     'require-yield': 0,

catalog/app/components/Error/Error.js

@@ -28,13 +28,13 @@ export default composeComponent(
     headline = 'Something went wrong',
     object,
   }) => (
-    <React.Fragment>
+    <>
       <Typography variant="h4" gutterBottom>
         {headline}
       </Typography>
       <Typography variant="body1">{detail}</Typography>
       <Img height={600} mt={2} />
       {!!object && <Box component="pre">{printObject(object)}</Box>}
-    </React.Fragment>
+    </>
   ),
 )

catalog/app/components/Experiments/Experiments.js

@@ -36,12 +36,12 @@ export function ExperimentsProvider({ children }) {
       }
       return ref.current[name]
     },
-    [ref.current],
+    [ref],
   )
 
   const getSelectedVariants = React.useCallback(
     (prefix = '') => mapKeys((k) => `${prefix}${k}`)(ref.current),
-    [ref.current],
+    [ref],
   )
 
   return <Ctx.Provider value={{ get, getSelectedVariants }}>{children}</Ctx.Provider>

catalog/app/components/Intercom/Intercom.js

@@ -37,7 +37,7 @@ function APILoader({ appId, userSelector = defaultUserSelector, children, ...pro
 
   if (!window.Intercom) window.Intercom = mkPlaceholder()
 
-  const api = React.useCallback((...args) => window.Intercom(...args), [])
+  const { current: api } = React.useRef((...args) => window.Intercom(...args))
   if (!('dummy' in api)) api.dummy = false
   if (!('isAvailable' in api)) api.isAvailable = () => !!window.Intercom
 
@@ -56,6 +56,8 @@ function APILoader({ appId, userSelector = defaultUserSelector, children, ...pro
       api('shutdown')
       delete window.Intercom
     }
+    // run this only once, ignore settings changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const user = redux.useSelector(userSelector)

catalog/app/components/Pagination/Pagination.js

@@ -32,7 +32,10 @@ export const usePagination = (
 
   const pages = Math.max(1, Math.ceil(items.length / perPage))
 
-  const goToPage = React.useCallback(R.pipe(R.clamp(1, pages), setPage), [pages, setPage])
+  const goToPage = React.useMemo(() => R.pipe(R.clamp(1, pages), setPage), [
+    pages,
+    setPage,
+  ])
 
   const nextPage = React.useCallback(() => goToPage(page + 1), [goToPage, page])
 
@@ -46,7 +49,10 @@ export const usePagination = (
 
   const offset = (page - 1) * perPage
 
-  const paginate = React.useCallback(R.slice(offset, offset + perPage), [offset, perPage])
+  const paginate = React.useMemo(() => R.slice(offset, offset + perPage), [
+    offset,
+    perPage,
+  ])
   const paginated = useGetter(items, paginate)
 
   usePrevious(perPage, (prev) => {

catalog/app/components/Redirect/index.js

@@ -7,7 +7,7 @@ import Working from 'components/Working'
 export default ({ url }) => {
   React.useEffect(() => {
     redirect(url)
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return <Working />
 }

catalog/app/components/StackedAreaChart/StackedAreaChart.js

@@ -40,7 +40,7 @@ export default function MultiSparkline({
       )(data),
     [data],
   )
-  const max = React.useMemo(() => Math.max(...R.last(stacked)), [data])
+  const max = React.useMemo(() => Math.max(...R.last(stacked)), [stacked])
   const len = React.useMemo(() => Math.max(...data.map((r) => (r ? r.length : 0))), [
     data,
   ])

catalog/app/components/TalkToUs/TalkToUs.js

@@ -72,16 +72,19 @@ export function TalkToUsProvider({ children }) {
         w.show()
       })
     },
-    [calendlyP, t.track],
+    [t, cfg.calendlyLink, calendlyP],
   )
 
   return <Ctx.Provider value={showPopup}>{children}</Ctx.Provider>
 }
 
 export function useTalkToUs(extra) {
-  const show = React.useContext(Ctx)
-  const bound = React.useCallback(() => show(extra), [show])
-  return extra ? bound : show
+  const ref = React.useRef({
+    bound: (localExtra) => ref.current.show(ref.current.extra || localExtra),
+  })
+  ref.current.show = React.useContext(Ctx)
+  ref.current.extra = extra
+  return ref.current.bound
 }
 
 export { TalkToUsProvider as Provider, useTalkToUs as use }

catalog/app/containers/Admin/Roles.js

@@ -257,7 +257,7 @@ const Edit = RT.composeComponent(
             console.dir(e)
             throw new RF.SubmissionError({ _error: 'unexpected' })
           }),
-      [req, cache, close],
+      [req, cache, close, role.id],
     )
 
     return (
@@ -352,7 +352,7 @@ export default RT.composeComponent(
         icon: <Icon>add</Icon>,
         fn: React.useCallback(() => {
           dialogs.open(({ close }) => <Create {...{ close }} />)
-        }, [dialogs.open]),
+        }, [dialogs.open]), // eslint-disable-line react-hooks/exhaustive-deps
       },
     ]
 

catalog/app/containers/Admin/Table.js

@@ -14,8 +14,8 @@ export function useOrdering({ rows, ...opts }) {
   const [direction, setDirection] = React.useState(opts.direction || 'asc')
 
   const sortBy = column.sortBy || column.getValue
-  const sort = React.useCallback(
-    R.pipe(R.sortBy(sortBy), direction === 'asc' ? R.identity : R.reverse),
+  const sort = React.useMemo(
+    () => R.pipe(R.sortBy(sortBy), direction === 'asc' ? R.identity : R.reverse),
     [sortBy, direction],
   )
 
@@ -63,7 +63,6 @@ export function useSelection({ rows, getId = R.unary(I.fromJS) }) {
     getId,
   ])
 
-  // eslint-disable-next-line object-curly-newline
   return { toggle, toggleAll, clear, isSelected, selected, all: allSelected }
 }
 

catalog/app/containers/Admin/Users.js

@@ -258,7 +258,7 @@ const Edit = RT.composeComponent(
           throw new RF.SubmissionError({ _error: 'unexpected' })
         }
       },
-      [close, username, req, cache, push],
+      [close, username, oldEmail, req, cache, push],
     )
 
     return (
@@ -415,7 +415,7 @@ const AdminRights = RT.composeComponent(
               throw e
             }),
         ),
-      [req, cache, push],
+      [admin, close, username, req, cache, push],
     )
 
     return (
@@ -512,6 +512,8 @@ export default RT.composeComponent(
     const req = APIConnector.use()
     const cache = Cache.use()
     const { push } = Notifications.use()
+    const dialogs = Dialogs.use()
+    const { open: openDialog } = dialogs
 
     const setRole = React.useCallback(
       (username, role) =>
@@ -638,7 +640,7 @@ export default RT.composeComponent(
             <Editable
               value={v}
               onChange={async (admin) => {
-                const res = await dialogs.open(({ close }) => (
+                const res = await openDialog(({ close }) => (
                   <AdminRights {...{ close, admin, username: u.username }} />
                 ))
                 if (res !== 'ok') throw new Error('cancelled')
@@ -656,22 +658,21 @@ export default RT.composeComponent(
           ),
         },
       ],
-      [roles],
+      [roles, openDialog, setIsActive, setRole],
     )
 
     const ordering = Table.useOrdering({ rows, column: columns[0] })
     const pagination = Pagination.use(ordering.ordered, {
       getItemId: R.prop('username'),
     })
-    const dialogs = Dialogs.use()
 
     const toolbarActions = [
       {
         title: 'Invite',
         icon: <Icon>add</Icon>,
         fn: React.useCallback(() => {
-          dialogs.open(({ close }) => <Invite {...{ close, roles }} />)
-        }, [dialogs.open]),
+          openDialog(({ close }) => <Invite {...{ close, roles }} />)
+        }, [roles, openDialog]),
       },
     ]
 

catalog/app/containers/Auth/PassChange.js

@@ -34,10 +34,11 @@ export default composeComponent(
   branch(
     R.prop('authenticated'),
     renderComponent(({ waiting }) => {
-      const doSignOut = useSignOut()
+      const signOutRef = React.useRef()
+      signOutRef.current = useSignOut()
       React.useEffect(() => {
-        if (!waiting) doSignOut()
-      }, [waiting])
+        if (!waiting) signOutRef.current()
+      }, [waiting, signOutRef])
       return (
         <Container>
           <Working style={{ textAlign: 'center' }}>

catalog/app/containers/Auth/Provider.js

@@ -7,6 +7,7 @@ import { useIntl } from 'containers/LanguageProvider'
 import { useReducer } from 'utils/ReducerInjector'
 import { useSaga } from 'utils/SagaInjector'
 import { withInitialState } from 'utils/reduxTools'
+import useConstant from 'utils/useConstant'
 
 import { REDUX_KEY } from './constants'
 import msg from './messages'
@@ -67,7 +68,7 @@ export default function AuthProvider({
    */
   latency = 20, // number
 }) {
-  const reducerWithInit = React.useMemo(() => {
+  const reducerWithInit = useConstant(() => {
     const init = fromJS(storage.load())
       .filter(Boolean)
       .update((s) =>
@@ -76,7 +77,7 @@ export default function AuthProvider({
           .set('sessionId', 0),
       )
     return withInitialState(init, reducer)
-  }, [])
+  })
   useReducer(REDUX_KEY, reducerWithInit)
 
   const handlers = {

catalog/app/containers/Auth/SSOGoogle.js

@@ -27,13 +27,14 @@ export default function SSOGoogle({ mutex, next, ...props }) {
 
   const sentry = Sentry.use()
   const dispatch = redux.useDispatch()
-  const intl = useIntl()
+  const { formatMessage } = useIntl()
   const { push: notify } = Notifications.use()
   const { urls } = NamedRoutes.use()
+  const { claim, release } = mutex
 
   const handleClick = (onClick) => (...args) => {
     if (mutex.current) return
-    mutex.claim(MUTEX_POPUP)
+    claim(MUTEX_POPUP)
     onClick(...args)
   }
 
@@ -42,7 +43,7 @@ export default function SSOGoogle({ mutex, next, ...props }) {
       const provider = 'google'
       const { id_token: token } = user.getAuthResponse()
       const result = defer()
-      mutex.claim(MUTEX_REQUEST)
+      claim(MUTEX_REQUEST)
       try {
         dispatch(actions.signIn({ provider, token }, result.resolver))
         await result.promise
@@ -53,27 +54,27 @@ export default function SSOGoogle({ mutex, next, ...props }) {
             // dont release mutex on redirect
             return
           }
-          notify(intl.formatMessage(msg.ssoGoogleNotFound))
+          notify(formatMessage(msg.ssoGoogleNotFound))
         } else {
-          notify(intl.formatMessage(msg.ssoGoogleErrorUnexpected))
+          notify(formatMessage(msg.ssoGoogleErrorUnexpected))
           sentry('captureException', e)
         }
-        mutex.release(MUTEX_REQUEST)
+        release(MUTEX_REQUEST)
       }
     },
-    [dispatch, mutex.claim, mutex.release, sentry, notify],
+    [dispatch, claim, release, sentry, notify, formatMessage, cfg.ssoAuth, next, urls],
   )
 
   const handleFailure = React.useCallback(
     ({ error: code, details }) => {
       if (code !== 'popup_closed_by_user') {
-        notify(intl.formatMessage(msg.ssoGoogleError, { details }))
+        notify(formatMessage(msg.ssoGoogleError, { details }))
         const e = new errors.SSOError({ provider: 'google', code, details })
         sentry('captureException', e)
       }
-      mutex.release(MUTEX_POPUP)
+      release(MUTEX_POPUP)
     },
-    [mutex.release, sentry],
+    [release, sentry, formatMessage, notify],
   )
 
   return (

catalog/app/containers/Auth/SSOOkta.js

@@ -30,7 +30,7 @@ export default function SSOOkta({ mutex, next, ...props }) {
 
   const sentry = Sentry.use()
   const dispatch = redux.useDispatch()
-  const intl = useIntl()
+  const { formatMessage } = useIntl()
   const { push: notify } = Notifications.use()
   const { urls } = NamedRoutes.use()
 
@@ -53,26 +53,36 @@ export default function SSOOkta({ mutex, next, ...props }) {
             // dont release mutex on redirect
             return
           }
-          notify(intl.formatMessage(msg.ssoOktaNotFound))
+          notify(formatMessage(msg.ssoOktaNotFound))
         } else {
-          notify(intl.formatMessage(msg.ssoOktaErrorUnexpected))
+          notify(formatMessage(msg.ssoOktaErrorUnexpected))
           sentry('captureException', e)
         }
         mutex.release(MUTEX_REQUEST)
       }
     } catch (e) {
       if (e instanceof Okta.OktaError) {
         if (e.code !== 'popup_closed_by_user') {
-          notify(intl.formatMessage(msg.ssoOktaError, { details: e.details }))
+          notify(formatMessage(msg.ssoOktaError, { details: e.details }))
           sentry('captureException', e)
         }
       } else {
-        notify(intl.formatMessage(msg.ssoOktaErrorUnexpected))
+        notify(formatMessage(msg.ssoOktaErrorUnexpected))
         sentry('captureException', e)
       }
       mutex.release(MUTEX_POPUP)
     }
-  }, [authenticate, dispatch, mutex.claim, mutex.release, sentry, notify])
+  }, [
+    authenticate,
+    dispatch,
+    mutex,
+    sentry,
+    notify,
+    cfg.ssoAuth,
+    formatMessage,
+    next,
+    urls,
+  ])
 
   return (
     <M.Button

catalog/app/containers/Auth/SSOSignUp.js

@@ -78,7 +78,7 @@ export default ({ location: { search } }) => {
         throw new SubmissionError({ _error: 'unexpected' })
       }
     },
-    [provider, token, next, urls, dispatch],
+    [provider, token, next, urls, dispatch, sentry],
   )
 
   if (authenticated) {