@seamly/web-ui 20.7.0 → 20.8.0-beta.1

package/src/javascripts/ui/hooks/seamly-hooks.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 
 // Import extracted hooks here for use inside this file
 import { useSeamlyApiContext } from './seamly-api-hooks'
@@ -6,10 +7,27 @@ import { useSeamlyApiContext } from './seamly-api-hooks'
 // although this is a redundant, it prevents a bazillion code changes for now.
 // TODO: Remove exports and import them from the correct files
 export {
-  useLastMessageEventId,
+  useElementFocusingById,
+  useFocusIfSeamlyContainedFocus,
+  useSeamlyContainerElement,
+  useSkiplinkTargetFocusing,
+} from 'ui/hooks/focus-helper-hooks'
+export {
+  useSeamlyAppContainerClassNames,
+  useSeamlyMessageContainerClassNames,
+} from './component-helper-hooks'
+export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'
+export { useLiveRegion, useSeamlyLiveRegionContext } from './live-region-hooks'
+export {
+  useSeamlyApiContext,
+  useSeamlyConversationUrl,
+} from './seamly-api-hooks'
+export { useOptionButton, useSeamlyOptions } from './seamly-option-hooks'
+export {
   useEntryTextLimit,
-  useSeamlyCurrentAgent,
   useEvents,
+  useLastMessageEventId,
+  useSeamlyCurrentAgent,
   useSeamlyHeaderData,
   useSeamlyIsHistoryLoaded,
   useSeamlyIsLoading,
@@ -21,35 +39,17 @@ export {
   useSeamlyUnreadCount,
   useSkiplink,
 } from './seamly-state-hooks'
-export {
-  useSeamlyApiContext,
-  useSeamlyConversationUrl,
-} from './seamly-api-hooks'
-export { default as useSeamlyDispatchContext } from './use-seamly-dispatch'
-export {
-  useSeamlyAppContainerClassNames,
-  useSeamlyMessageContainerClassNames,
-} from './component-helper-hooks'
-export { useSeamlyOptions, useOptionButton } from './seamly-option-hooks'
-export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'
-export { default as useSeamlyCommands } from './use-seamly-commands'
-export { useLiveRegion, useSeamlyLiveRegionContext } from './live-region-hooks'
 export { default as useSeamlyActivityEventHandler } from './use-seamly-activity-event-handler'
-export { useSeamlyTyping, useSeamlyEntry } from './seamly-entry-hooks'
+export { default as useSeamlyChat } from './use-seamly-chat'
+export { default as useSeamlyCommands } from './use-seamly-commands'
+export { default as useSeamlyIdleDetachCountdown } from './use-seamly-idle-detach-countdown'
+export { default as useSeamlyResumeConversationPrompt } from './use-seamly-resume-conversation-prompt'
 export {
   useForceUpdate,
   useGeneratedId,
   useStableCallback,
 } from './utility-hooks'
-export {
-  useElementFocusingById,
-  useSkiplinkTargetFocusing,
-  useFocusIfSeamlyContainedFocus,
-  useSeamlyContainerElement,
-} from './focus-helper-hooks'
-export { default as useSeamlyChat } from './use-seamly-chat'
-export { default as useSeamlyIdleDetachCountdown } from './use-seamly-idle-detach-countdown'
-export { default as useSeamlyResumeConversationPrompt } from './use-seamly-resume-conversation-prompt'
+export { useDispatch as useSeamlyDispatchContext }
 
 // This hook isn't used within the core
 // But it is used in implementations

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -1,17 +1,15 @@
+import { useI18n } from 'domains/i18n/hooks'
+import {
+  hideOption as dispatchHideOption,
+  setUserSelectedOption as dispatchUserSelectedOption,
+  setUserSelectedOptions as dispatchUserSelectedOptions,
+  showOption as dispatchShowOption,
+} from 'domains/store/slice'
 import { useCallback } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyObjectStore } from './seamly-api-hooks'
-import { useElementFocusingById } from './focus-helper-hooks'
-
-const {
-  SET_USER_SELECTED_OPTION,
-  SET_USER_SELECTED_OPTIONS,
-  SHOW_OPTION,
-  HIDE_OPTION,
-} = seamlyActions
+import { useDispatch } from 'react-redux'
+import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
+import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 
 export const useSeamlyOptions = () => {
   const { t } = useI18n()
@@ -35,17 +33,17 @@ export const useSeamlyOptions = () => {
 
   const allowOptionSelection = cobrowsing || sendTranscript
 
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const { get, set } = useSeamlyObjectStore()
 
   const initUserSelectedOptions = useCallback(() => {
     const storedOptions = get('options') || {}
-    dispatch({ type: SET_USER_SELECTED_OPTIONS, options: storedOptions })
+    dispatch(dispatchUserSelectedOptions(storedOptions))
   }, [get, dispatch])
 
   const setUserSelectedOptions = useCallback(
     (optionValues) => {
-      dispatch({ type: SET_USER_SELECTED_OPTIONS, options: optionValues })
+      dispatch(dispatchUserSelectedOptions(optionValues))
       set('options', optionValues)
     },
     [set, dispatch],
@@ -58,17 +56,17 @@ export const useSeamlyOptions = () => {
         ...storedOptions,
         [option]: value,
       })
-      dispatch({ type: SET_USER_SELECTED_OPTION, option, value })
+      dispatch(dispatchUserSelectedOption({ option, value }))
     },
     [dispatch, get, set],
   )
 
   const showOption = (optionName) => {
-    dispatch({ type: SHOW_OPTION, optionName })
+    dispatch(dispatchShowOption(optionName))
   }
 
   const hideOption = () => {
-    dispatch({ type: HIDE_OPTION })
+    dispatch(dispatchHideOption())
   }
 
   return {

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -1,23 +1,23 @@
-import { createSelector } from 'reselect'
-import { useSelector } from 'domains/redux'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import * as ConfigSelectors from 'domains/config/selectors'
-import * as AppSelectors from 'domains/app/selectors'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
+import { createSelector } from '@reduxjs/toolkit'
+import { selectUserHasResponded } from 'domains/app/selectors'
 import { useConfig } from 'domains/config/hooks'
+import { useSelector } from 'react-redux'
 
-export const selectState = (state) => state.state
+export const selectState = ({ state }) => state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
 export const selectEventsWithSuggestion = createSelector(
   selectState,
   ConfigSelectors.selectConfig,
-  AppSelectors.selectUserHasResponded,
-  ({ events, serviceData }, config, userHasResponded) => {
+  selectUserHasResponded,
+  ({ events, serviceData }, config, hasUserResponded) => {
     if (
-      userHasResponded ||
+      hasUserResponded ||
       config.layoutMode === 'inline' ||
-      !serviceData.suggestion ||
-      !serviceData.suggestion?.body.length
+      !serviceData?.suggestion ||
+      !serviceData?.suggestion?.body.length
     ) {
       return events
     }
@@ -63,7 +63,13 @@ export const selectEvents = createSelector(
     return mappedEvents
   },
 )
-export const useEvents = () => useSelector(selectEvents, [])
+export const useEvents = () => useSelector(selectEvents)
+
+export const selectEventIds = createSelector(selectEvents, (events) => {
+  return events.map((event) => event.payload.id)
+})
+
+export const useEventsIds = () => useSelector(selectEventIds)
 
 export const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading
 
@@ -96,8 +102,9 @@ export const useSeamlyCurrentAgent = () => {
   return currentAgent ? participants[currentAgent] : null
 }
 
-export const useSeamlyServiceData = (key) =>
-  useSeamlyStateContext().serviceData[key]
+export const useSeamlyServiceData = (key) => {
+  return useSeamlyStateContext().serviceData[key]
+}
 
 export const useEntryTextLimit = () => {
   const {

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -1,23 +1,21 @@
+import { useI18n } from 'domains/i18n/hooks'
+import { setIsLoading } from 'domains/store/slice'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { useCallback, useEffect, useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useVisibility, visibilityStates } from 'domains/visibility'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useDispatch, useSelector } from 'react-redux'
+import { selectShowInlineView } from '../../domains/visibility/selectors'
+import { useLiveRegion } from './live-region-hooks'
+import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useSeamlyHasConversation } from './seamly-api-hooks'
-import { useLiveRegion } from './live-region-hooks'
-import { useSelector } from '../../domains/redux/hooks'
-import { selectShowInlineView } from '../../domains/visibility/selectors'
-
-const { SET_IS_LOADING } = seamlyActions
 
 const useSeamlyChat = () => {
   const { t } = useI18n()
   const { isInline, isWindow } = useSeamlyLayoutMode()
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const showInlineView = useSelector(selectShowInlineView)
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const events = useEvents()
   const spinnerTimeout = useRef(null)
   const { start, connect, apiConfigReady, apiConnected } = useSeamlyCommands()
@@ -60,20 +58,14 @@ const useSeamlyChat = () => {
     // This delays the start of the loading inidicator we set when we initialise
     // the application. This is done to only avoid BSOD on initial load if DCX is slow.
     spinnerTimeout.current = setTimeout(() => {
-      dispatch({
-        type: SET_IS_LOADING,
-        isLoading: true,
-      })
+      dispatch(setIsLoading(true))
     }, 500)
   }, [dispatch])
 
   useEffect(() => {
     if (hasEvents) {
       clearTimeout(spinnerTimeout.current)
-      dispatch({
-        type: SET_IS_LOADING,
-        isLoading: false,
-      })
+      dispatch(setIsLoading(false))
     }
   }, [hasEvents, dispatch])
 
@@ -106,21 +98,19 @@ const useSeamlyChat = () => {
     if (
       !apiConfigReady ||
       startCalled.current ||
-      (isWindow && !isOpen && !hasConversation) ||
+      (isWindow && !isOpen && !hasConversation()) ||
       (isInline && !showInlineView)
     ) {
       return
     }
 
-    if (hasConversation && isOpen) {
+    if (hasConversation() && isOpen) {
       // We deactivate the extra startup loading spinner when a conversation is available
       // We also stop setting the loading indicator in the first place to avoid a flash.
       clearTimeout(spinnerTimeout.current)
-      dispatch({
-        type: SET_IS_LOADING,
-        isLoading: false,
-      })
+      dispatch(setIsLoading(false))
     }
+
     connectAndStart()
   }, [
     apiConfigReady,

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -1,30 +1,30 @@
-import { useCallback, useContext } from 'preact/hooks'
-import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
-import { randomId } from 'lib/id'
 import { userParticipantId } from 'config'
-import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import { Actions as InterruptActions } from 'domains/interrupt'
-import { useConfig } from 'domains/config'
-import * as AppActions from 'domains/app/actions'
 import { useUserHasResponded } from 'domains/app/hooks'
-import { useVisibility, visibilityStates } from 'domains/visibility'
-import { useStableCallback } from './utility-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
+import * as AppActions from 'domains/app/actions'
+import { setHasResponded } from 'domains/app/slice'
+import { useConfig } from 'domains/config/hooks'
+import { setInterrupt } from 'domains/interrupt/slice'
+import { addEvent, setInitialState } from 'domains/store/slice'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
+
+import { randomId } from 'lib/id'
+import { useCallback, useContext } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
-
-const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()
   const appConfig = useConfig()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const eventBus = useContext(SeamlyEventBusContext)
-
-  const hasResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
   const { visible: visibility, setVisibility } = useVisibility()
   const unreadMessageCount = useSeamlyUnreadCount()
@@ -36,34 +36,34 @@ const useSeamlyCommands = () => {
     [eventBus],
   )
 
-  const start = useStableCallback(() => {
+  const start = useCallback(() => {
     api.sendContext(appConfig.context || {})
     emitEvent('ui.beforeStart', {
       visibility,
-      hasConversation,
-      hasResponded,
+      hasConversation: hasConversation(),
+      hasResponded: userHasResponded,
       unreadMessageCount,
     })
 
     api.send('start')
     emitEvent('ui.start', {
       visibility,
-      hasConversation,
-      hasResponded,
+      hasConversation: hasConversation(),
+      hasResponded: userHasResponded,
       unreadMessageCount,
     })
   }, [
     api,
-    appConfig,
+    appConfig.context,
     emitEvent,
-    hasResponded,
     hasConversation,
-    visibility,
+    userHasResponded,
     unreadMessageCount,
+    visibility,
   ])
 
   const reset = useCallback(async () => {
-    dispatch(AppActions.reset())
+    dispatch(AppActions.resetApp())
   }, [dispatch])
 
   const getMessageBase = useCallback(
@@ -106,35 +106,30 @@ const useSeamlyCommands = () => {
 
       api.send('message', message)
       emitEvent('message', message)
-      dispatch({
-        type: ADD_EVENT,
-        event: {
+      dispatch(
+        addEvent({
           type: 'message',
           payload: {
             ...message,
             optimisticallyInjected: true,
           },
-        },
-      })
+        }),
+      )
     },
     [api, dispatch, emitEvent, getTextMessageBase],
   )
 
   const addMessageBubble = useCallback(
     (text) => {
-      dispatch({
-        type: ADD_EVENT,
-        event: { type: 'message', payload: getTextMessageBase(text) },
-      })
+      dispatch(addEvent({ type: 'message', payload: getTextMessageBase(text) }))
     },
     [dispatch, getTextMessageBase],
   )
 
   const addUploadBubble = useCallback(
     (id, transactionId, occurredAt, contentType, filename, filesize, url) => {
-      dispatch({
-        type: ADD_EVENT,
-        event: {
+      dispatch(
+        addEvent({
           type: 'message',
           payload: {
             type: 'upload',
@@ -146,8 +141,8 @@ const useSeamlyCommands = () => {
             meta: {},
             body: { contentType, filename, filesize, url },
           },
-        },
-      })
+        }),
+      )
     },
     [dispatch],
   )
@@ -163,10 +158,7 @@ const useSeamlyCommands = () => {
         type: 'divider',
       }
 
-      dispatch({
-        type: ADD_EVENT,
-        event: { type: 'info', payload },
-      })
+      dispatch(addEvent({ type: 'info', payload }))
     },
     [dispatch],
   )
@@ -203,15 +195,23 @@ const useSeamlyCommands = () => {
       .connect()
       .then((initialState) => {
         if (initialState) {
-          dispatch({ type: SET_INITIAL_STATE, initialState })
+          dispatch(setInitialState(initialState))
           if (initialState.userResponded) {
-            dispatch(AppActions.setHasResponded(initialState.userResponded))
+            dispatch(setHasResponded(initialState.userResponded))
             setVisibility(visibilityStates.open)
           }
         }
       })
       .catch((error) => {
-        dispatch(InterruptActions.set(error))
+        dispatch(
+          setInterrupt({
+            name: error.name,
+            message: error.message,
+            langKey: error.langKey,
+            originalEvent: error.originalEvent,
+            originalError: error.originalError,
+          }),
+        )
       })
   }, [api, dispatch, setVisibility])
 

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -1,26 +1,25 @@
+import { screenReaderDebounceDelaySeconds } from 'config'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import {
+  clearIdleDetachCountdown,
+  decrementIdleDetachCountdownCounter,
+  initIdleDetachCountdown,
+  stopIdleDetachCountdownCounter,
+} from 'domains/store/slice'
 import { useCallback, useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useDispatch } from 'react-redux'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
 } from 'ui/utils/general-utils'
-import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import { screenReaderDebounceDelaySeconds } from 'config'
-import { useVisibility } from 'domains/visibility'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import { useLiveRegion } from './live-region-hooks'
-import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-
-const {
-  CLEAR_IDLE_DETACH_COUNTDOWN,
-  INIT_IDLE_DETACH_COUNTDOWN,
-  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
-  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,
-} = seamlyActions
+import useSeamlyCommands from './use-seamly-commands'
 
 const useSeamlyIdleDetachCountdown = () => {
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
 
   const { idleDetachCountdown } = useSeamlyStateContext()
 
@@ -65,11 +64,12 @@ const useSeamlyIdleDetachCountdown = () => {
       const delaySeconds = millisecondsToSeconds(milliseconds)
       const delayTime = getTimeFromSeconds(delaySeconds)
 
-      dispatch({
-        type: INIT_IDLE_DETACH_COUNTDOWN,
-        delaySeconds,
-        delayTime,
-      })
+      dispatch(
+        initIdleDetachCountdown({
+          delaySeconds,
+          delayTime,
+        }),
+      )
       emitEvent('idleTimer.start')
       sendAssertiveIfOpen(
         `${t('idleDetachWarning.countdownTitle')} ${t(
@@ -98,7 +98,7 @@ const useSeamlyIdleDetachCountdown = () => {
         emitEvent('idleTimer.stop')
       }
 
-      dispatch({ type: CLEAR_IDLE_DETACH_COUNTDOWN })
+      dispatch(clearIdleDetachCountdown())
     },
     [dispatch, sendAction, emitEvent, sendAssertiveIfOpen, t],
   )
@@ -120,9 +120,7 @@ const useSeamlyIdleDetachCountdown = () => {
       )
     }
 
-    dispatch({
-      type: DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
-    })
+    dispatch(decrementIdleDetachCountdownCounter())
   }, [dispatch, sendAssertiveIfOpen, t])
 
   const stopCountdown = useCallback(() => {
@@ -131,7 +129,7 @@ const useSeamlyIdleDetachCountdown = () => {
       return
     }
 
-    dispatch({ type: STOP_IDLE_DETACH_COUNTDOWN_COUNTER })
+    dispatch(stopIdleDetachCountdownCounter())
 
     if (remaining) {
       emitEvent('idleTimer.stop')

package/src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js

@@ -1,14 +1,13 @@
-import { useI18n } from 'domains/i18n'
-import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useI18n } from 'domains/i18n/hooks'
+import { clearResumeConversationPrompt } from 'domains/store/slice'
+import { useDispatch } from 'react-redux'
+import { actionTypes, dismissTypes } from 'ui/utils/seamly-utils'
+import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useLiveRegion } from './live-region-hooks'
-
-const { CLEAR_RESUME_CONVERSATION_PROMPT } = seamlyActions
 
 const useSeamlyResumeConversationPrompt = () => {
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const hasPrompt = useSeamlyStateContext().resumeConversationPrompt
   const { sendAction } = useSeamlyCommands()
   const { t } = useI18n()
@@ -19,13 +18,13 @@ const useSeamlyResumeConversationPrompt = () => {
       type: actionTypes.dismiss,
       body: { type: dismissTypes.resumeConversationPrompt },
     })
-    dispatch({ type: CLEAR_RESUME_CONVERSATION_PROMPT })
+    dispatch(clearResumeConversationPrompt())
   }
 
   const restartChat = () => {
     sendAssertive(t('resumeConversationPrompt.srNotifyRestartText'))
     sendAction({ type: actionTypes.detachService })
-    dispatch({ type: CLEAR_RESUME_CONVERSATION_PROMPT })
+    dispatch(clearResumeConversationPrompt())
   }
 
   return { continueChat, hasPrompt, restartChat }

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,12 +1,10 @@
-import { Selectors } from 'domains/forms'
-import { useSelectorWithProps } from 'domains/redux'
+import { getControlValueByName } from 'domains/forms/selectors'
+import { useSelector } from 'react-redux'
 import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {
-  const fileList = useSelectorWithProps(
-    Selectors.getControlValueByName,
-    { formId, name },
-    [formId, name],
+  const fileList = useSelector((store) =>
+    getControlValueByName(store, { formId, name }),
   )
   // This hook acts as a helper as the data model is built to handle multiple
   // file uploads but currently Seamly only supports single file uploads.

package/src/javascripts/ui/hooks/utility-hooks.js

@@ -1,17 +1,17 @@
+import { randomId } from 'lib/id'
 import {
   useCallback,
+  useMemo,
   useReducer,
   useRef,
   useState,
-  useMemo,
 } from 'preact/hooks'
-import { randomId } from 'lib/id'
 
 export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:
   // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   /* eslint-disable-next-line no-unused-vars */
-  const [ignored, forceUpdate] = useReducer((x) => x + 1, 0)
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0)
 
   return useCallback(() => {
     setTimeout(() => {
@@ -26,7 +26,7 @@ export const useGeneratedId = () => {
 }
 
 export const useStableCallback = (callback) => {
-  const callbackRef = useRef()
+  const callbackRef = useRef(null)
   callbackRef.current = callback
   const isFunction = typeof callback === 'function'
   return useMemo(() => {