fix: update hooks to respect react-hooks/exhaustive-deps (#979)

apps/storefront/.eslintrc.json

@@ -21,14 +21,6 @@
         "import/no-cycle": 0
       }
     },
-    {
-      "files": [
-        "src/hooks/*.ts"
-      ],
-      "rules": {
-        "react-hooks/exhaustive-deps": 0
-      }
-    },
     {
       "files": ["src/components/**/*.{ts,tsx}", "src/pages/**/*.{ts,tsx}"],
       "rules": {

apps/storefront/src/App.tsx

@@ -5,8 +5,8 @@ import { useB3AppOpen } from '@b3/hooks'
 import GlobalDialog from '@/components/extraTip/GlobalDialog'
 import B3RenderRouter from '@/components/layout/B3RenderRouter'
 import showPageMask from '@/components/loadding/B3showPageMask'
+import { useSetOpen } from '@/hooks'
 import useDomHooks from '@/hooks/dom/useDomHooks'
-import useSetOpen from '@/hooks/useSetOpen'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { gotoAllowedAppPage } from '@/shared/routes'

apps/storefront/src/components/ThemeFrame.tsx

@@ -57,7 +57,7 @@ interface ThemeFramePortalProps {
   children: ReactNode
   isSetupComplete: boolean
   emotionCache?: EmotionCache
-  iframeDocument?: Document | null
+  iframeDocument?: HTMLIFrameElement['contentDocument']
   bodyRef?: RefObject<HTMLBodyElement>
 }
 

apps/storefront/src/components/captcha/Captcha.tsx

@@ -23,9 +23,11 @@ export interface CaptchaProps {
   onExpired?: () => void
 }
 
-export function loadCaptchaScript(iframeDocument: Document) {
+export function loadCaptchaScript(
+  iframeDocument: HTMLIFrameElement['contentDocument']
+) {
   if (
-    iframeDocument.head.querySelector(`script[src="${CAPTCHA_URL}"]`) === null
+    iframeDocument?.head.querySelector(`script[src="${CAPTCHA_URL}"]`) === null
   ) {
     const captchaScript = iframeDocument.createElement('script')
     captchaScript.src = CAPTCHA_URL
@@ -34,9 +36,11 @@ export function loadCaptchaScript(iframeDocument: Document) {
 }
 
 export function loadCaptchaWidgetHandlers(
-  iframeDocument: Document,
+  iframeDocument: HTMLIFrameElement['contentDocument'],
   widgetId: string
 ) {
+  if (!iframeDocument) return
+
   let code = FRAME_HANDLER_CODE
 
   CAPTCHA_VARIABLES.PREFIX = widgetId

apps/storefront/src/hooks/useGetCountry.ts

@@ -31,7 +31,9 @@ const useSetCountry = () => {
       }
     }
     init()
-  }, [])
+    // ignore dispatch, it's not affecting any value from this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [countriesList])
 }
 
 interface FormFieldsProps extends Record<string, any> {
@@ -65,65 +67,74 @@ const useGetCountry = ({
     state: { countriesList },
   } = useContext(GlobaledContext)
 
-  const country = useWatch({
+  const countryCode = useWatch({
     control,
     name: 'country',
   })
 
-  const handleCountryChange = (countryCode: string) => {
-    if (countriesList && countriesList.length && countryCode) {
-      const stateList =
-        countriesList.find(
-          (country: Country) => country.countryCode === countryCode
-        )?.states || []
-      const stateFields = addresses.find(
-        (formFields: FormFieldsProps) => formFields.name === 'state'
-      )
-      if (stateFields) {
-        if (stateList.length > 0) {
-          stateFields.fieldType = 'dropdown'
-          stateFields.options = stateList
-        } else {
-          stateFields.fieldType = 'text'
-          stateFields.options = []
-        }
-      }
-
-      const stateVal = getValues('state')
-
-      setValue(
-        'state',
-        stateVal &&
-          countryCode &&
-          (stateList.find((state: State) => state.stateName === stateVal) ||
-            stateList.length === 0)
-          ? stateVal
-          : ''
-      )
-
-      setAddress([...addresses])
-    }
-  }
-
+  // Populate country array
   useEffect(() => {
-    const countryFields = addresses.find(
+    const countriesFieldIndex = addresses.findIndex(
       (formFields: FormFieldsProps) => formFields.name === 'country'
     )
-    if (
-      countriesList?.length &&
-      countryFields &&
-      !countryFields?.options?.length
-    ) {
-      countryFields.options = countriesList
-      setAddress([...addresses])
+    if (countriesList?.length && countriesFieldIndex !== -1) {
+      setAddress(
+        addresses.map((addressField, addressFieldIndex) => {
+          if (countriesFieldIndex === addressFieldIndex) {
+            return { ...addressField, options: countriesList }
+          }
+          return addressField
+        })
+      )
     }
+    // ignore addresses cause it will trigger loop array
+    // ignore setAddress due it's no affecting any logic
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [countriesList])
 
+  // Populate state array when the user change selected country
   useEffect(() => {
-    if (countriesList && countriesList.length) {
-      handleCountryChange(country)
+    if (!countryCode || !countriesList?.length) return
+    const stateList =
+      countriesList.find(
+        (country: Country) => country.countryCode === countryCode
+      )?.states || []
+    const stateFieldIndex = addresses.findIndex(
+      (formFields: FormFieldsProps) => formFields.name === 'state'
+    )
+    if (stateFieldIndex !== -1) {
+      setAddress(
+        addresses.map((addressField, addressFieldIndex) => {
+          if (stateFieldIndex === addressFieldIndex) {
+            if (stateList.length > 0) {
+              return {
+                ...addressField,
+                fieldType: 'dropdown',
+                options: stateList,
+              }
+            }
+            return { ...addressField, fieldType: 'text', options: [] }
+          }
+          return addressField
+        })
+      )
     }
-  }, [country])
+
+    const stateVal = getValues('state')
+
+    setValue(
+      'state',
+      stateVal &&
+        countryCode &&
+        (stateList.find((state: State) => state.stateName === stateVal) ||
+          stateList.length === 0)
+        ? stateVal
+        : ''
+    )
+    // ignore addresses cause it will trigger loop array
+    // ignore setAddress, getValues and setValue due they're not affecting any value from this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [countryCode, countriesList])
 }
 
 export { useGetCountry, useSetCountry }

apps/storefront/src/hooks/useScrollBar.ts

@@ -1,14 +1,15 @@
 import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 
-import { themeFrameSelector, useAppSelector } from '@/store'
+import { updateOverflowStyle } from '@/store'
 
 const useScrollBar = (open: boolean) => {
-  const IframeDocument = useAppSelector(themeFrameSelector)
+  const dispatch = useDispatch()
 
   useEffect(() => {
-    if (IframeDocument) {
-      IframeDocument.body.style.overflow = open ? 'hidden' : 'initial'
-    }
+    dispatch(updateOverflowStyle(open ? 'hidden' : 'initial'))
+    // ignore dispatch
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 }
 

apps/storefront/src/hooks/useSetOpen.ts

@@ -28,11 +28,6 @@ const useSetOpen = (
           },
         },
       })
-      // hot refresh and browser refresh
-      // if (openUrl) {
-      //   const { origin, pathname, search } = window.location
-      //   window.location.href = `${origin}${pathname}${search}#${openUrl}`
-      // }
 
       // close all global tips
       dispatchMsg({
@@ -60,14 +55,9 @@ const useSetOpen = (
         },
       })
     }
-  }, [isOpen])
-
-  // useEffect(() => {
-  //   if (openUrl === '/') {
-  //     const { origin, pathname, search } = window.location
-  //     window.location.href = `${origin}${pathname}${search}`
-  //   }
-  // }, [openUrl])
+    // ignore dispatch and dispatchMsg as they are not reactive values
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, params?.quoteBtn, params?.shoppingListBtn])
 }
 
 export default useSetOpen

apps/storefront/src/pages/address/Address.tsx

@@ -84,7 +84,7 @@ function Address() {
         const addressFields = await getAddressFields(!isBCPermission, countries)
         setAddressFields(addressFields || [])
       } catch (err) {
-        b2bLogger.error(err)    
+        b2bLogger.error(err)
       } finally {
         setIsRequestLoading(false)
       }

apps/storefront/src/pages/registered/RegisteredBCToB2B.tsx

@@ -19,7 +19,12 @@ import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomS
 import { useMobile } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
-import { b2bLogger, getCurrentCustomerInfo, loginjump, storeHash } from '@/utils'
+import {
+  b2bLogger,
+  getCurrentCustomerInfo,
+  loginjump,
+  storeHash,
+} from '@/utils'
 
 import {
   createB2BCompanyUser,

apps/storefront/src/store/slices/theme.ts

@@ -1,11 +1,11 @@
 import { createSlice, Draft, PayloadAction } from '@reduxjs/toolkit'
 
 export interface ThemeState {
-  themeFrame?: Document
+  themeFrame: HTMLIFrameElement['contentDocument']
 }
 
 const initialState: ThemeState = {
-  themeFrame: undefined,
+  themeFrame: null,
 }
 
 export const themeSlice = createSlice({
@@ -16,9 +16,15 @@ export const themeSlice = createSlice({
     setThemeFrame: (state, { payload }: PayloadAction<unknown>) => {
       state.themeFrame = payload as Draft<Document>
     },
+    updateOverflowStyle: (state, { payload }: PayloadAction<string>) => {
+      if (!state.themeFrame) return
+
+      state.themeFrame.body.style.overflow = payload
+    },
   },
 })
 
-export const { clearThemeFrame, setThemeFrame } = themeSlice.actions
+export const { clearThemeFrame, setThemeFrame, updateOverflowStyle } =
+  themeSlice.actions
 
 export default themeSlice.reducer