add confirm connect/event modals

src/pages/KeyPage/Key.Page.tsx

@@ -1,10 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { SectionTitle } from '../../shared/SectionTitle/SectionTitle'
 import { useAppSelector } from '../../store/hooks/redux'
-import {
-	askNotificationPermission,
-	getDefaultUserName,
-} from '../../utils/helpers'
+import { askNotificationPermission, getShortenNpub } from '../../utils/helpers'
 import { useParams } from 'react-router-dom'
 import { fetchProfile } from '../../modules/nostr'
 import { nip19 } from 'nostr-tools'
@@ -25,20 +22,42 @@ import { Warning } from '@/components/Warning/Warning'
 import GppMaybeIcon from '@mui/icons-material/GppMaybe'
 import { swicCall, swr } from '@/modules/swic'
 import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
+import { ModalConfirmConnect } from '@/components/Modal/ModalConfirmConnect/ModalConfirmConnect'
+import { ModalConfirmEvent } from '@/components/Modal/ModalConfirmEvent/ModalConfirmEvent'
+import { DbPerm } from '@/modules/db'
 
 const KeyPage = () => {
 	const { apps, perms } = useAppSelector((state) => state.content)
 	const { npub = '' } = useParams<{ npub: string }>()
-	const { handleOpen } = useModalSearchParams()
+	const { handleOpen, getModalOpened } = useModalSearchParams()
+	const isConfirmConnectModalOpened = getModalOpened(
+		MODAL_PARAMS_KEYS.CONFIRM_CONNECT,
+	)
+	const isConfirmEventModalOpened = getModalOpened(
+		MODAL_PARAMS_KEYS.CONFIRM_EVENT,
+	)
+
 	const nofity = useEnqueueSnackbar()
 
 	const filteredApps = apps.filter((a) => a.npub === npub)
 	const filteredPerms = perms.filter((p) => p.npub === npub)
+	const excludeConnectPerms = filteredPerms.filter(
+		(perm) => perm.perm !== 'connect',
+	)
+	const prepareEventPerms = excludeConnectPerms.reduce<{
+		[appNpub: string]: DbPerm[]
+	}>((acc: { [appNpub: string]: DbPerm[] }, current: DbPerm) => {
+		if (!acc[current.appNpub]) {
+			acc[current.appNpub] = []
+		}
+		acc[current.appNpub].push(current)
+		return acc
+	}, {})
 
 	const [profile, setProfile] = useState<MetaEvent | null>(null)
 	const [showWarning, setShowWarning] = useState(false)
 
-	const userName = profile?.info?.name || getDefaultUserName(npub)
+	const userName = profile?.info?.name || getShortenNpub(npub)
 	const userNameWithPrefix = userName + '@nsec.app'
 
 	const load = useCallback(async () => {
@@ -48,12 +67,11 @@ const KeyPage = () => {
 			if (type !== 'npub') return undefined
 
 			const response = await fetchProfile(pubkey)
-			console.log({ response, pubkey, npub, npubToken, profile })
 			setProfile(response as any)
 		} catch (e) {
 			return undefined
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line
 	}, [])
 
 	useEffect(() => {
@@ -68,6 +86,108 @@ const KeyPage = () => {
 		})
 	}
 
+	const handleOpenConnectAppModal = () =>
+		handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP)
+
+	const handleOpenSettingsModal = () => handleOpen(MODAL_PARAMS_KEYS.SETTINGS)
+
+	useEffect(() => {
+		const checkBackgroundSigning = async () => {
+			if (swr) {
+				const isBackgroundEnable =
+					await swr.pushManager.getSubscription()
+				if (!isBackgroundEnable) {
+					setShowWarning(true)
+				} else {
+					setShowWarning(false)
+				}
+			}
+		}
+		checkBackgroundSigning()
+	}, [])
+
+	const handleEnableBackground = async () => {
+		await askNotificationPermission()
+		try {
+			const r = await swicCall('enablePush')
+			if (!r) return nofity(`Failed to enable push subscription`, 'error')
+			nofity('Enabled!', 'success')
+		} catch (e) {
+			nofity(`Failed to enable push subscription`, 'error')
+		}
+	}
+
+	const shownConnectModals = useRef<{
+		[permId: string]: boolean
+	}>({})
+
+	const shownConfirmEventModals = useRef<{
+		[permId: string]: boolean
+	}>({})
+
+	useEffect(() => {
+		return () => {
+			shownConnectModals.current = {}
+			shownConfirmEventModals.current = {}
+		}
+	}, [npub])
+
+	const connectPerms = filteredPerms.filter((perm) => perm.perm === 'connect')
+
+	const handleOpenConfirmConnectModal = useCallback(() => {
+		if (!filteredPerms.length || isConfirmEventModalOpened) return undefined
+
+		for (let i = 0; i < connectPerms.length; i++) {
+			const perm = connectPerms[i]
+			if (shownConnectModals.current[perm.id]) {
+				continue
+			}
+
+			shownConnectModals.current[perm.id] = true
+			handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
+				search: {
+					appNpub: perm.appNpub,
+				},
+			})
+			break
+		}
+	}, [
+		connectPerms,
+		filteredPerms.length,
+		handleOpen,
+		isConfirmEventModalOpened,
+	])
+
+	useEffect(() => {
+		if (!filteredPerms.length || connectPerms.length) return undefined
+
+		for (let i = 0; i < Object.keys(prepareEventPerms).length; i++) {
+			const appNpub = Object.keys(prepareEventPerms)[i]
+
+			if (shownConfirmEventModals.current[appNpub]) {
+				continue
+			}
+
+			shownConfirmEventModals.current[appNpub] = true
+			handleOpen(MODAL_PARAMS_KEYS.CONFIRM_EVENT, {
+				search: {
+					appNpub,
+				},
+			})
+			break
+		}
+	}, [
+		connectPerms.length,
+		filteredPerms.length,
+		handleOpen,
+		isConfirmConnectModalOpened,
+		prepareEventPerms,
+	])
+
+	useEffect(() => {
+		handleOpenConfirmConnectModal()
+	}, [handleOpenConfirmConnectModal])
+
 	const renderUserValueSection = (
 		title: string,
 		value: string,
@@ -98,43 +218,13 @@ const KeyPage = () => {
 		)
 	}
 
-	const handleOpenConnectAppModal = () =>
-		handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP)
-
-	const handleOpenSettingsModal = () => handleOpen(MODAL_PARAMS_KEYS.SETTINGS)
-
-	useEffect(() => {
-		const checkBackgroundSigning = async () => {
-			if (swr) {
-				const isBackgroundEnable = await swr.pushManager.getSubscription()
-				if (!isBackgroundEnable) {
-					setShowWarning(true)
-				} else {
-					setShowWarning(false)
-				}
-			}
-		}
-		checkBackgroundSigning()
-	}, [])
-
-	const handleEnableBackground = async () => {
-		await askNotificationPermission()
-		try {
-			const r = await swicCall('enablePush')
-			if (!r) return nofity(`Failed to enable push subscription`, 'error')
-			nofity('Enabled!', 'success')
-		} catch (e) {
-			nofity(`Failed to enable push subscription`, 'error')
-		}
-	}
-
 	return (
 		<>
-			<Stack gap={'1rem'}>
+			<Stack gap={'1rem'} height={'100%'}>
 				{showWarning && (
 					<Warning
 						message='Please enable push notifications'
-						Icon={<GppMaybeIcon />}
+						Icon={<GppMaybeIcon htmlColor='white' />}
 						onClick={handleEnableBackground}
 					/>
 				)}
@@ -170,6 +260,8 @@ const KeyPage = () => {
 			<ModalConnectApp />
 			<ModalSettings />
 			<ModalExplanation />
+			<ModalConfirmConnect />
+			<ModalConfirmEvent eventPerms={prepareEventPerms} />
 		</>
 	)
 }