chore(git): merge pull request 'fix: disable body scroll on popup open' (#88) from 61-popup-scroll into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s
Reviewed-on: #88
This commit is contained in:
commit
04f32546f2
@ -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 (
|
||||
<>
|
||||
<div
|
||||
|
@ -6,3 +6,4 @@ export * from './useMuteLists'
|
||||
export * from './useNSFWList'
|
||||
export * from './useReactions'
|
||||
export * from './useNDKContext'
|
||||
export * from './useScrollDisable'
|
||||
|
11
src/hooks/useScrollDisable.ts
Normal file
11
src/hooks/useScrollDisable.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export const useBodyScrollDisable = (disable: boolean) => {
|
||||
useEffect(() => {
|
||||
if (disable) document.body.style.overflow = 'hidden'
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}, [disable])
|
||||
}
|
@ -10,6 +10,7 @@ import { MetadataController } from '../controllers'
|
||||
import {
|
||||
useAppDispatch,
|
||||
useAppSelector,
|
||||
useBodyScrollDisable,
|
||||
useDidMount,
|
||||
useNDKContext
|
||||
} from '../hooks'
|
||||
@ -27,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,
|
||||
@ -66,6 +79,7 @@ export const Header = () => {
|
||||
}, [dispatch, findMetadata])
|
||||
|
||||
const handleLogin = () => {
|
||||
handleOpen()
|
||||
launchNostrLoginDialog()
|
||||
}
|
||||
|
||||
@ -260,6 +274,8 @@ const TipButtonWithDialog = React.memo(() => {
|
||||
const [adminNpub, setAdminNpub] = useState<string | null>(null)
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
useBodyScrollDisable(isOpen)
|
||||
|
||||
useDidMount(async () => {
|
||||
const metadataController = await MetadataController.getInstance()
|
||||
setAdminNpub(metadataController.adminNpubs[0])
|
||||
@ -321,6 +337,8 @@ const TipButtonWithDialog = React.memo(() => {
|
||||
const RegisterButtonWithDialog = () => {
|
||||
const [showPopUp, setShowPopUp] = useState(false)
|
||||
|
||||
useBodyScrollDisable(showPopUp)
|
||||
|
||||
return (
|
||||
<>
|
||||
<a
|
||||
|
@ -12,7 +12,12 @@ import { BlogCard } from '../../components/BlogCard'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { ProfileSection } from '../../components/ProfileSection'
|
||||
import { MetadataController, UserRelaysType } from '../../controllers'
|
||||
import { useAppSelector, useDidMount, useNDKContext } from '../../hooks'
|
||||
import {
|
||||
useAppSelector,
|
||||
useBodyScrollDisable,
|
||||
useDidMount,
|
||||
useNDKContext
|
||||
} from '../../hooks'
|
||||
import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
|
||||
import '../../styles/comments.css'
|
||||
import '../../styles/downloads.css'
|
||||
@ -221,6 +226,8 @@ const Game = ({ naddr, game, author, aTag }: GameProps) => {
|
||||
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
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
Loading…
Reference in New Issue
Block a user