From ba7ac0e32155644c5d88ec9be7de837a61d8affe Mon Sep 17 00:00:00 2001 From: hzrd149 Date: Thu, 16 Nov 2023 10:08:49 -0600 Subject: [PATCH] add reply and repost toggles to hashtag view --- src/components/note-filter-type-buttons.tsx | 29 +++++++++++++++++++++ src/views/hashtag/index.tsx | 21 +++++++-------- src/views/home/index.tsx | 21 +++------------ src/views/user/notes.tsx | 21 +++------------ 4 files changed, 45 insertions(+), 47 deletions(-) create mode 100644 src/components/note-filter-type-buttons.tsx diff --git a/src/components/note-filter-type-buttons.tsx b/src/components/note-filter-type-buttons.tsx new file mode 100644 index 000000000..f59f44220 --- /dev/null +++ b/src/components/note-filter-type-buttons.tsx @@ -0,0 +1,29 @@ +import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react"; +import { ReplyIcon, RepostIcon } from "./icons"; + +type Disclosure = { isOpen: boolean; onToggle: () => void }; + +export default function NoteFilterTypeButtons({ + showReplies, + showReposts, + ...props +}: Omit & { showReplies: Disclosure; showReposts: Disclosure }) { + return ( + + } + colorScheme={showReplies.isOpen ? "primary" : undefined} + aria-label="Toggle replies" + title="Toggle replies" + onClick={showReplies.onToggle} + /> + } + colorScheme={showReposts.isOpen ? "primary" : undefined} + aria-label="Toggle reposts" + title="Toggle reposts" + onClick={showReposts.onToggle} + /> + + ); +} diff --git a/src/views/hashtag/index.tsx b/src/views/hashtag/index.tsx index c5dcabe3e..e1e3d1e65 100644 --- a/src/views/hashtag/index.tsx +++ b/src/views/hashtag/index.tsx @@ -10,15 +10,15 @@ import { IconButton, Input, Spacer, - Switch, useDisclosure, useEditableControls, } from "@chakra-ui/react"; import { CloseIcon } from "@chakra-ui/icons"; + import { useLocation, useNavigate, useParams } from "react-router-dom"; import { useAppTitle } from "../../hooks/use-app-title"; import useTimelineLoader from "../../hooks/use-timeline-loader"; -import { isReply } from "../../helpers/nostr/events"; +import { isReply, isRepost } from "../../helpers/nostr/events"; import { CheckIcon, EditIcon } from "../../components/icons"; import { NostrEvent } from "../../types/nostr-event"; import RelaySelectionButton from "../../components/relay-selection/relay-selection-button"; @@ -29,6 +29,7 @@ import TimelineViewTypeButtons from "../../components/timeline-page/timeline-vie import useClientSideMuteFilter from "../../hooks/use-client-side-mute-filter"; import PeopleListProvider, { usePeopleListContext } from "../../providers/people-list-provider"; import PeopleListSelection from "../../components/people-list-selection/people-list-selection"; +import NoteFilterTypeButtons from "../../components/note-filter-type-buttons"; function EditableControls() { const { isEditing, getSubmitButtonProps, getCancelButtonProps, getEditButtonProps } = useEditableControls(); @@ -52,8 +53,10 @@ function HashTagPage() { useAppTitle("#" + hashtag); + const showReplies = useDisclosure({ defaultIsOpen: true }); + const showReposts = useDisclosure({ defaultIsOpen: true }); + const readRelays = useRelaySelectionRelays(); - const { isOpen: showReplies, onToggle } = useDisclosure(); const { listId, filter } = usePeopleListContext(); const timelinePageEventFilter = useTimelinePageEventFilter(); @@ -61,10 +64,11 @@ function HashTagPage() { const eventFilter = useCallback( (event: NostrEvent) => { if (muteFilter(event)) return false; - if (!showReplies && isReply(event)) return false; + if (!showReplies.isOpen && isReply(event)) return false; + if (!showReposts.isOpen && isRepost(event)) return false; return timelinePageEventFilter(event); }, - [showReplies, muteFilter, timelinePageEventFilter], + [showReplies.isOpen, showReposts.isOpen, muteFilter, timelinePageEventFilter], ); const timeline = useTimelineLoader( `${listId ?? "global"}-${hashtag}-hashtag`, @@ -97,12 +101,7 @@ function HashTagPage() { - - - - Show Replies - - + diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index fca784ed8..0e12df155 100644 --- a/src/views/home/index.tsx +++ b/src/views/home/index.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo } from "react"; -import { ButtonGroup, Flex, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Flex, useDisclosure } from "@chakra-ui/react"; import { Kind } from "nostr-tools"; import { isReply, isRepost } from "../../helpers/nostr/events"; @@ -13,7 +13,7 @@ import PeopleListProvider, { usePeopleListContext } from "../../providers/people import RelaySelectionProvider, { useRelaySelectionContext } from "../../providers/relay-selection-provider"; import { NostrRequestFilter } from "../../types/nostr-query"; import useClientSideMuteFilter from "../../hooks/use-client-side-mute-filter"; -import { ReplyIcon, RepostIcon } from "../../components/icons"; +import NoteFilterTypeButtons from "../../components/note-filter-type-buttons"; function HomePage() { const showReplies = useDisclosure({ defaultIsOpen: localStorage.getItem("show-replies") === "true" }); @@ -54,22 +54,7 @@ function HomePage() { const header = ( - - } - colorScheme={showReplies.isOpen ? "primary" : undefined} - aria-label="Toggle replies" - title="Toggle replies" - onClick={showReplies.onToggle} - /> - } - colorScheme={showReposts.isOpen ? "primary" : undefined} - aria-label="Toggle reposts" - title="Toggle reposts" - onClick={showReposts.onToggle} - /> - + diff --git a/src/views/user/notes.tsx b/src/views/user/notes.tsx index 3f91d7691..2ce2f57d6 100644 --- a/src/views/user/notes.tsx +++ b/src/views/user/notes.tsx @@ -1,5 +1,5 @@ import { useCallback } from "react"; -import { ButtonGroup, Flex, IconButton, Spacer, useDisclosure } from "@chakra-ui/react"; +import { Flex, Spacer, useDisclosure } from "@chakra-ui/react"; import { useOutletContext } from "react-router-dom"; import { Kind } from "nostr-tools"; @@ -11,7 +11,7 @@ import useTimelineLoader from "../../hooks/use-timeline-loader"; import { STREAM_KIND } from "../../helpers/nostr/stream"; import TimelineViewType from "../../components/timeline-page/timeline-view-type"; import TimelinePage, { useTimelinePageEventFilter } from "../../components/timeline-page"; -import { ReplyIcon, RepostIcon } from "../../components/icons"; +import NoteFilterTypeButtons from "../../components/note-filter-type-buttons"; export default function UserNotesTab() { const { pubkey } = useOutletContext() as { pubkey: string }; @@ -41,22 +41,7 @@ export default function UserNotesTab() { const header = ( - - } - colorScheme={showReplies.isOpen ? "primary" : undefined} - aria-label="Toggle replies" - title="Toggle replies" - onClick={showReplies.onToggle} - /> - } - colorScheme={showReposts.isOpen ? "primary" : undefined} - aria-label="Toggle reposts" - title="Toggle reposts" - onClick={showReposts.onToggle} - /> - +