fix(nsfw): show popup if visiting nsfw post, redirect on cancel to home

Closes #203
This commit is contained in:
en 2025-01-30 19:13:07 +01:00
parent 44d7f57f0a
commit 0019713bf9
2 changed files with 48 additions and 4 deletions

View File

@ -5,7 +5,8 @@ import {
useNavigation,
useSubmit,
Outlet,
useParams
useParams,
useNavigate
} from 'react-router-dom'
import { LoadingSpinner } from 'components/LoadingSpinner'
import { ProfileSection } from 'components/ProfileSection'
@ -17,10 +18,12 @@ import { Interactions } from 'components/Internal/Interactions'
import { BlogCard } from 'components/BlogCard'
import { copyTextToClipboard } from 'utils'
import { toast } from 'react-toastify'
import { useAppSelector, useBodyScrollDisable } from 'hooks'
import { useAppSelector, useBodyScrollDisable, useLocalStorage } from 'hooks'
import { ReportPopup } from 'components/ReportPopup'
import { Viewer } from 'components/Markdown/Viewer'
import { PostWarnings } from 'components/PostWarning'
import { appRoutes } from 'routes'
import { NsfwAlertPopup } from 'components/NsfwAlertPopup'
const BLOG_REPORT_REASONS = [
{ label: 'Actually CP', key: 'actuallyCP' },
@ -79,6 +82,17 @@ export const BlogPage = () => {
}
}
const navigate = useNavigate()
const [confirmNsfw] = useLocalStorage<boolean>('confirm-nsfw', false)
const [showNsfwPopup, setShowNsfwPopup] = useState<boolean>(
(blog?.nsfw ?? false) && !confirmNsfw
)
const handleConfirm = (confirm: boolean) => {
if (!confirm) {
navigate(appRoutes.home)
}
}
return (
<div className='InnerBodyMain'>
<div className='ContainerMain'>
@ -316,6 +330,12 @@ export const BlogPage = () => {
)}
{!!blog?.author && <ProfileSection pubkey={blog.author} />}
<Outlet key={nevent} />
{showNsfwPopup && (
<NsfwAlertPopup
handleConfirm={handleConfirm}
handleClose={() => setShowNsfwPopup(false)}
/>
)}
</div>
</div>
</div>

View File

@ -5,6 +5,7 @@ import {
Outlet,
Link as ReactRouterLink,
useLoaderData,
useNavigate,
useNavigation,
useParams,
useSubmit
@ -12,8 +13,13 @@ import {
import { toast } from 'react-toastify'
import { BlogCard } from '../../components/BlogCard'
import { ProfileSection } from '../../components/ProfileSection'
import { useAppSelector, useBodyScrollDisable, useDidMount } from '../../hooks'
import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
import {
useAppSelector,
useBodyScrollDisable,
useDidMount,
useLocalStorage
} from '../../hooks'
import { appRoutes, getGamePageRoute, getModsEditPageRoute } from '../../routes'
import '../../styles/comments.css'
import '../../styles/downloads.css'
import '../../styles/innerPage.css'
@ -51,6 +57,7 @@ import { OriginalAuthor } from 'components/OriginalAuthor'
import { Viewer } from 'components/Markdown/Viewer'
import { PostWarnings } from 'components/PostWarning'
import { DownloadDetailsPopup } from 'components/DownloadDetailsPopup'
import { NsfwAlertPopup } from 'components/NsfwAlertPopup'
const MOD_REPORT_REASONS = [
{ label: 'Actually CP', key: 'actuallyCP' },
@ -80,6 +87,17 @@ export const ModPage = () => {
const [commentCount, setCommentCount] = useState(0)
const navigate = useNavigate()
const [confirmNsfw] = useLocalStorage<boolean>('confirm-nsfw', false)
const [showNsfwPopup, setShowNsfwPopup] = useState<boolean>(
(mod?.nsfw ?? false) && !confirmNsfw
)
const handleConfirm = (confirm: boolean) => {
if (!confirm) {
navigate(appRoutes.home)
}
}
return (
<>
<RouterLoadingSpinner />
@ -145,6 +163,12 @@ export const ModPage = () => {
<ProfileSection pubkey={author} />
)}
<Outlet key={nevent} />
{showNsfwPopup && (
<NsfwAlertPopup
handleConfirm={handleConfirm}
handleClose={() => setShowNsfwPopup(false)}
/>
)}
</div>
</div>
</div>