feat: clear timeout on unmount

devtron-labs · Nov 26, 2024 · 86d0b81 · 86d0b81
1 parent ed3df67
commit 86d0b81
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.4-beta-1",
+    "version": "1.1.4-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

diff --git a/src/Shared/Components/Backdrop/Backdrop.tsx b/src/Shared/Components/Backdrop/Backdrop.tsx
@@ -5,7 +5,6 @@ import { useRegisterShortcut } from '@Common/Hooks'
 import { preventBodyScroll, preventOutsideFocus } from '@Shared/Helpers'
 import { DEVTRON_BASE_MAIN_ID } from '@Shared/constants'
 import { BackdropProps } from './types'
-import './backdrop.scss'
 
 const Backdrop = ({ children, onEscape }: BackdropProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()

diff --git a/src/Shared/Components/Backdrop/backdrop.scss b/src/Shared/Components/Backdrop/backdrop.scss
diff --git a/src/Shared/Components/Backdrop/types.tsx b/src/Shared/Components/Backdrop/types.tsx
@@ -2,5 +2,8 @@ import { ReactNode } from 'react'
 
 export interface BackdropProps {
     children: ReactNode
+    /**
+     * @param onEscape: please wrap in a useCallback, with respective dependencies or []
+     */
     onEscape: () => void
 }
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -188,12 +188,14 @@ const ProgressingStatus = React.memo(({ status, stage, type }: ProgressingStatus
     const toggleAbortConfiguration = (): void => {
         setAbortConfirmation(!abortConfirmation)
     }
+
     const closeForceAbortModal = (): void => {
         setAbortError({
             status: false,
             message: '',
         })
     }
+
     return (
         <>
             <div className="flex dc__gap-8 left pt-12">

diff --git a/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx b/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx
@@ -8,6 +8,8 @@ import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import './confirmationModal.scss'
 import { Backdrop } from '../Backdrop'
 
+let timeoutId: number
+
 const ConfirmationModal = ({
     title,
     subtitle,
@@ -53,14 +55,15 @@ const ConfirmationModal = ({
     useEffect(() => {
         if (showConfirmationModal) {
             // Timeout so that if modal is opened on enter press, it does not trigger onClick
-            setTimeout(() => {
+            timeoutId = setTimeout(() => {
                 registerShortcut({ keys: ['Enter'], callback: handleTriggerPrimaryActionButton })
             }, 100)
         }
 
         return () => {
             if (showConfirmationModal) {
                 unregisterShortcut(['Enter'])
+                clearTimeout(timeoutId)
             }
         }
     }, [showConfirmationModal, primaryButtonConfig, disablePrimaryButton])
@@ -81,12 +84,7 @@ const ConfirmationModal = ({
                     >
                         <div className="flexbox-col dc__gap-12 p-20">
                             <RenderIcon className="icon-dim-48 dc__no-shrink" />
-
-                            {typeof title === 'string' ? (
-                                <span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>
-                            ) : (
-                                title
-                            )}
+                            <span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>
 
                             {typeof subtitle === 'string' ? (
                                 <span className="cn-8 fs-13 fw-4 lh-20 dc__word-break">{subtitle}</span>

diff --git a/src/Shared/Components/ConfirmationModal/types.tsx b/src/Shared/Components/ConfirmationModal/types.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, SVGProps } from 'react'
+import { FunctionComponent, ReactNode, SVGProps, SyntheticEvent } from 'react'
 import { ButtonProps } from '../Button'
 
 export enum ConfirmationModalVariantType {
@@ -9,7 +9,7 @@ export enum ConfirmationModalVariantType {
 }
 
 interface CommonButtonProps extends Pick<ButtonProps, 'text'>, Partial<Pick<ButtonProps, 'startIcon' | 'endIcon'>> {
-    onClick: (e?: any) => void
+    onClick: (e?: SyntheticEvent) => void
 }
 
 interface CustomInputConfig {
@@ -46,9 +46,9 @@ type CustomInputConfigOrChildrenType =
       }
 
 export type ConfirmationModalProps = {
-    title: ReactNode
+    title: string
     subtitle: ReactNode
-    handleClose: (e?: any) => void
+    handleClose: (e?: SyntheticEvent) => void
     showConfirmationModal: boolean
 } & (
     | {
@@ -59,8 +59,6 @@ export type ConfirmationModalProps = {
     | {
           variant: ConfirmationModalVariantType.custom
           Icon: FunctionComponent<SVGProps<SVGSVGElement>>
-          customInputConfig?: never
-          children?: ReactNode
           buttonConfig: ButtonConfig<
               Pick<ButtonProps, 'isLoading' | 'disabled' | 'style'>,
               Pick<ButtonProps, 'disabled' | 'style'>

diff --git a/src/Shared/Helpers.tsx b/src/Shared/Helpers.tsx
@@ -99,6 +99,9 @@ export const preventBodyScroll = (lock: boolean): void => {
 
 export const preventOutsideFocus = ({ identifier, preventFocus }: PreventOutsideFocusProps) => {
     const identifierElement = document.getElementById(identifier)
+    if (!identifierElement) {
+        return
+    }
     if (preventFocus) {
         identifierElement.setAttribute('inert', 'true')
     } else {