diff --git a/src/components/NsfwCommentWrapper.tsx b/src/components/NsfwCommentWrapper.tsx
new file mode 100644
index 0000000..b720fd8
--- /dev/null
+++ b/src/components/NsfwCommentWrapper.tsx
@@ -0,0 +1,60 @@
+import { useLocalStorage, useSessionStorage } from 'hooks'
+import { PropsWithChildren, useState } from 'react'
+import { NsfwAlertPopup } from './NsfwAlertPopup'
+
+interface NsfwCommentWrapperProps {
+ id: string
+ isNsfw: boolean
+ hideNsfwActive: boolean
+}
+export const NsfwCommentWrapper = ({
+ id,
+ isNsfw,
+ hideNsfwActive,
+ children
+}: PropsWithChildren
) => {
+ // Have we approved show nsfw comment button
+ const [viewNsfwComment, setViewNsfwComment] = useSessionStorage(
+ id,
+ false
+ )
+
+ const [showNsfwPopup, setShowNsfwPopup] = useState(false)
+ const [confirmNsfw] = useLocalStorage('confirm-nsfw', false)
+ const handleConfirm = (confirm: boolean) => {
+ if (confirm) {
+ setShowNsfwPopup(confirm)
+ setViewNsfwComment(true)
+ }
+ }
+ const handleShowNSFW = () => {
+ if (confirmNsfw) {
+ setViewNsfwComment(true)
+ } else {
+ setShowNsfwPopup(true)
+ }
+ }
+
+ // Skip NSFW wrapper
+ // if comment is not marked as NSFW
+ // if user clicked View NSFW button
+ // if hide filter is not active
+ if (!isNsfw || viewNsfwComment || !hideNsfwActive) return children
+
+ return (
+ <>
+
+
This post is hidden as it's marked as NSFW
+
+
+ {showNsfwPopup && (
+ setShowNsfwPopup(false)}
+ />
+ )}
+ >
+ )
+}
diff --git a/src/components/comment/CommentContent.tsx b/src/components/comment/CommentContent.tsx
index bbbfeb2..49e7f1b 100644
--- a/src/components/comment/CommentContent.tsx
+++ b/src/components/comment/CommentContent.tsx
@@ -3,9 +3,13 @@ import { useTextLimit } from 'hooks'
interface CommentContentProps {
content: string
+ isNsfw?: boolean
}
-export const CommentContent = ({ content }: CommentContentProps) => {
+export const CommentContent = ({
+ content,
+ isNsfw = false
+}: CommentContentProps) => {
const { text, isTextOverflowing, isExpanded, toggle } = useTextLimit(content)
return (
@@ -26,6 +30,11 @@ export const CommentContent = ({ content }: CommentContentProps) => {
View full post
)}
+ {isNsfw && (
+
+ )}
>
)
}
diff --git a/src/pages/feed/FeedTabPosts.tsx b/src/pages/feed/FeedTabPosts.tsx
index 869cb26..4fd7e40 100644
--- a/src/pages/feed/FeedTabPosts.tsx
+++ b/src/pages/feed/FeedTabPosts.tsx
@@ -1,8 +1,6 @@
import { useLoaderData } from 'react-router-dom'
import { FeedPageLoaderResult } from './loader'
-import { useAppSelector, useLocalStorage, useNDKContext } from 'hooks'
-import { FilterOptions, NSFWFilter } from 'types'
-import { DEFAULT_FILTER_OPTIONS } from 'utils'
+import { useAppSelector, useNDKContext } from 'hooks'
import { useEffect, useMemo, useState } from 'react'
import { LoadingSpinner } from 'components/LoadingSpinner'
import {
@@ -19,10 +17,7 @@ export const FeedTabPosts = () => {
const { followList } = useLoaderData() as FeedPageLoaderResult
const userState = useAppSelector((state) => state.user)
const userPubkey = userState.user?.pubkey as string | undefined
- const filterKey = 'filter-feed-2'
- const [filterOptions] = useLocalStorage
(filterKey, {
- ...DEFAULT_FILTER_OPTIONS
- })
+
const { ndk } = useNDKContext()
const [notes, setNotes] = useState([])
const [isFetching, setIsFetching] = useState(false)
@@ -58,19 +53,6 @@ export const FeedTabPosts = () => {
const filteredNotes = useMemo(() => {
let _notes = notes || []
- // NSFW Filter
- _notes = _notes.filter((n) => {
- if (filterOptions.nsfw === NSFWFilter.Only_NSFW) {
- return n.getMatchingTags('L').some((l) => l[1] === 'content-warning')
- }
-
- if (filterOptions.nsfw === NSFWFilter.Hide_NSFW) {
- return !n.getMatchingTags('L').some((l) => l[1] === 'content-warning')
- }
-
- return n
- })
-
// Filter source
// TODO: Enable source/client filter
// _notes = _notes.filter(
@@ -90,7 +72,7 @@ export const FeedTabPosts = () => {
showing > 0 && _notes.splice(showing)
return _notes
- }, [filterOptions.nsfw, notes, showing])
+ }, [notes, showing])
if (!userPubkey) return null
diff --git a/src/styles/comments.css b/src/styles/comments.css
index 9a47092..235fc8f 100644
--- a/src/styles/comments.css
+++ b/src/styles/comments.css
@@ -44,6 +44,7 @@
}
.IBMSMSMBSSCL_CommentBottom {
+ position: relative;
width: 100%;
padding: 20px;
color: rgba(255, 255, 255, 0.75);
diff --git a/src/types/modsFilter.ts b/src/types/modsFilter.ts
index fa5c399..6cf8dc3 100644
--- a/src/types/modsFilter.ts
+++ b/src/types/modsFilter.ts
@@ -40,3 +40,5 @@ export interface FilterOptions {
wot: WOTFilterOptions
repost: RepostFilter
}
+
+export type FeedPostsFilter = Pick