diff --git a/src/components/Filters/FeedFilter.tsx b/src/components/Filters/FeedFilter.tsx index 838723c..e3718a4 100644 --- a/src/components/Filters/FeedFilter.tsx +++ b/src/components/Filters/FeedFilter.tsx @@ -43,7 +43,14 @@ export const FeedFilter = React.memo( {/* nsfw filter options */} - + {/* source filter options */} diff --git a/src/components/Filters/NsfwFilterOptions.tsx b/src/components/Filters/NsfwFilterOptions.tsx index 05ab906..5fe7a45 100644 --- a/src/components/Filters/NsfwFilterOptions.tsx +++ b/src/components/Filters/NsfwFilterOptions.tsx @@ -7,9 +7,13 @@ import { DEFAULT_FILTER_OPTIONS } from 'utils' interface NsfwFilterOptionsProps { filterKey: string + skipOnlyNsfw?: boolean } -export const NsfwFilterOptions = ({ filterKey }: NsfwFilterOptionsProps) => { +export const NsfwFilterOptions = ({ + filterKey, + skipOnlyNsfw +}: NsfwFilterOptionsProps) => { const [, setFilterOptions] = useLocalStorage( filterKey, DEFAULT_FILTER_OPTIONS @@ -30,29 +34,34 @@ export const NsfwFilterOptions = ({ filterKey }: NsfwFilterOptionsProps) => { return ( <> - {Object.values(NSFWFilter).map((item, index) => ( - - ))} + {Object.values(NSFWFilter).map((item, index) => { + // Posts feed filter exception + if (item === NSFWFilter.Only_NSFW && skipOnlyNsfw) return null + + return ( + + ) + })} {showNsfwPopup && ( { const userPubkey = userState.user?.pubkey as string | undefined const [eventProfile, setEventProfile] = useState() const isRepost = ndkEvent.kind === NDKKind.Repost + const filterKey = 'filter-feed-2' + const [filterOptions] = useLocalStorage( + filterKey, + DEFAULT_FILTER_OPTIONS + ) + const isNsfw = ndkEvent + .getMatchingTags('L') + .some((t) => t[1] === 'content-warning') const [repostEvent, setRepostEvent] = useState() const [repostProfile, setRepostProfile] = useState() const noteEvent = repostEvent ?? ndkEvent @@ -192,9 +206,15 @@ export const Note = ({ ndkEvent }: NoteProps) => { )} -
- -
+ +
+ +
+
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 && ( +
+

NSFW

+
+ )} ) } 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