From 9d50cdfd88f37c0fb17b963ba0fd77b757ac9096 Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 21 Oct 2024 11:11:35 +0200 Subject: [PATCH 1/4] fix: disable scroll on popup open Closes #61 --- src/components/ProfileSection.tsx | 11 ++++++++++- src/hooks/index.ts | 1 + src/hooks/useScrollDisable.ts | 11 +++++++++++ src/layout/header.tsx | 5 +++++ src/pages/mod/index.tsx | 9 ++++++++- 5 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/hooks/useScrollDisable.ts diff --git a/src/components/ProfileSection.tsx b/src/components/ProfileSection.tsx index 170c1e4..e52e940 100644 --- a/src/components/ProfileSection.tsx +++ b/src/components/ProfileSection.tsx @@ -5,7 +5,12 @@ import { useState } from 'react' import { Link } from 'react-router-dom' import { toast } from 'react-toastify' import { RelayController, UserRelaysType } from '../controllers' -import { useAppSelector, useDidMount, useNDKContext } from '../hooks' +import { + useAppSelector, + useBodyScrollDisable, + useDidMount, + useNDKContext +} from '../hooks' import { appRoutes, getProfilePageRoute } from '../routes' import '../styles/author.css' import '../styles/innerPage.css' @@ -254,6 +259,8 @@ export const ProfileQRButtonWithPopUp = ({ }: QRButtonWithPopUpProps) => { const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + const nprofile = nip19.nprofileEncode({ pubkey }) @@ -335,6 +342,8 @@ type ZapButtonWithPopUpProps = { const ZapButtonWithPopUp = ({ pubkey }: ZapButtonWithPopUpProps) => { const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + return ( <>
{ + useEffect(() => { + if (disable) document.body.style.overflow = 'hidden' + + return () => { + document.body.style.overflow = '' + } + }, [disable]) +} diff --git a/src/layout/header.tsx b/src/layout/header.tsx index bc4c2b8..5f5fc10 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -10,6 +10,7 @@ import { MetadataController } from '../controllers' import { useAppDispatch, useAppSelector, + useBodyScrollDisable, useDidMount, useNDKContext } from '../hooks' @@ -260,6 +261,8 @@ const TipButtonWithDialog = React.memo(() => { const [adminNpub, setAdminNpub] = useState(null) const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + useDidMount(async () => { const metadataController = await MetadataController.getInstance() setAdminNpub(metadataController.adminNpubs[0]) @@ -321,6 +324,8 @@ const TipButtonWithDialog = React.memo(() => { const RegisterButtonWithDialog = () => { const [showPopUp, setShowPopUp] = useState(false) + useBodyScrollDisable(showPopUp) + return ( <> { const [isBlocked, setIsBlocked] = useState(false) const [isAddedToNSFW, setIsAddedToNSFW] = useState(false) + useBodyScrollDisable(showReportPopUp) + useEffect(() => { if (userState.auth && userState.user?.pubkey) { const pubkey = userState.user.pubkey as string From 4bd7c77c05a13319a60f8533e76e325f51c658b4 Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 21 Oct 2024 11:43:49 +0200 Subject: [PATCH 2/4] fix: disable scroll on zap popup open --- src/pages/mod/internal/comment/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/mod/internal/comment/index.tsx b/src/pages/mod/internal/comment/index.tsx index 2f5b721..3c92b25 100644 --- a/src/pages/mod/internal/comment/index.tsx +++ b/src/pages/mod/internal/comment/index.tsx @@ -5,7 +5,13 @@ import { UserRelaysType } from 'controllers' import { formatDate } from 'date-fns' -import { useAppSelector, useDidMount, useNDKContext, useReactions } from 'hooks' +import { + useAppSelector, + useBodyScrollDisable, + useDidMount, + useNDKContext, + useReactions +} from 'hooks' import { useComments } from 'hooks/useComments' import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools' import React, { @@ -502,6 +508,8 @@ const Zap = (props: Event) => { const [totalZappedAmount, setTotalZappedAmount] = useState(0) + useBodyScrollDisable(isOpen) + useDidMount(() => { RelayController.getInstance() .getTotalZapAmount( From 4214fe127fbcfb6a463643ee96ea9c125444ce0a Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 21 Oct 2024 11:44:15 +0200 Subject: [PATCH 3/4] fix: disable scroll on zap popup open --- src/pages/mod/internal/zap/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/mod/internal/zap/index.tsx b/src/pages/mod/internal/zap/index.tsx index 93e8bad..e40a07c 100644 --- a/src/pages/mod/internal/zap/index.tsx +++ b/src/pages/mod/internal/zap/index.tsx @@ -1,6 +1,6 @@ import { ZapSplit } from 'components/Zap' import { RelayController } from 'controllers' -import { useAppSelector, useDidMount } from 'hooks' +import { useAppSelector, useBodyScrollDisable, useDidMount } from 'hooks' import { useState } from 'react' import { toast } from 'react-toastify' import { ModDetails } from 'types' @@ -18,6 +18,8 @@ export const Zap = ({ modDetails }: ZapProps) => { const [totalZappedAmount, setTotalZappedAmount] = useState(0) + useBodyScrollDisable(isOpen) + useDidMount(() => { RelayController.getInstance() .getTotalZapAmount( From e3b6aecfe840152d7a31fd0246eade6524d25896 Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 21 Oct 2024 11:44:26 +0200 Subject: [PATCH 4/4] fix: disable scroll on nostr-login popup open --- src/layout/header.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/layout/header.tsx b/src/layout/header.tsx index 5f5fc10..faae13e 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -28,6 +28,18 @@ export const Header = () => { const { findMetadata } = useNDKContext() const userState = useAppSelector((state) => state.user) + // Track nostr-login extension modal open state + const [isOpen, setIsOpen] = useState(false) + const handleOpen = () => setIsOpen(true) + const handleClose = () => setIsOpen(false) + useEffect(() => { + window.addEventListener('nlCloseModal', handleClose) + return () => { + window.removeEventListener('nlCloseModal', handleClose) + } + }, []) + useBodyScrollDisable(isOpen) + useEffect(() => { initNostrLogin({ darkMode: true, @@ -67,6 +79,7 @@ export const Header = () => { }, [dispatch, findMetadata]) const handleLogin = () => { + handleOpen() launchNostrLoginDialog() }