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

Closes #203

src/pages/blog/index.tsx

@@ -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>

src/pages/mod/index.tsx

@@ -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 {
-import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
+  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>