Kieran/snort
5
14
Fork 14
Code Issues 36 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

trending notes grid modal
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Martti Malmi 2023-12-07 13:56:03 +02:00
parent a1b2966188
commit 55b536233c
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/Element/Feed/ImageGridItem.tsx
View File

@ -21,7 +21,7 @@ const ImageGridItem = (props: { event: TaggedNostrEvent; onClick: (e: MouseEvent
const noteId = NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix); const noteId = NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix);
const myOnClick = (clickEvent: MouseEvent) => { const myOnClick = (clickEvent: MouseEvent) => {
if (onClick) { if (onClick && window.innerWidth >= 768) {
onClick(clickEvent); onClick(clickEvent);
clickEvent.preventDefault(); clickEvent.preventDefault();
} }

16
packages/app/src/Element/Trending/TrendingPosts.tsx
View File

@ -12,15 +12,20 @@ import ShortNote from "@/Element/Trending/ShortNote";
import classNames from "classnames"; import classNames from "classnames";
import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector"; import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
import ImageGridItem from "@/Element/Feed/ImageGridItem"; import ImageGridItem from "@/Element/Feed/ImageGridItem";
import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
import useLogin from "@/Hooks/useLogin";
export default function TrendingNotes({ count = Infinity, small = false }) { export default function TrendingNotes({ count = Infinity, small = false }) {
const login = useLogin();
const displayAsInitial = small ? "list" : login.feedDisplayAs ?? "list";
// Added count prop with a default value // Added count prop with a default value
const [posts, setPosts] = useState<Array<NostrEvent>>(); const [posts, setPosts] = useState<Array<NostrEvent>>();
const [error, setError] = useState<Error>(); const [error, setError] = useState<Error>();
const { lang } = useLocale(); const { lang } = useLocale();
const { isEventMuted } = useModeration(); const { isEventMuted } = useModeration();
const [displayAs, setDisplayAs] = useState<DisplayAs>("list"); const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true); const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
async function loadTrendingNotes() { async function loadTrendingNotes() {
const api = new NostrBandApi(); const api = new NostrBandApi();
@ -57,7 +62,7 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
return ( return (
<div className="grid grid-cols-3 gap-px md:gap-1"> <div className="grid grid-cols-3 gap-px md:gap-1">
{filteredAndLimitedPosts().map(e => ( {filteredAndLimitedPosts().map(e => (
<ImageGridItem event={e as TaggedNostrEvent} onClick={() => {}} /> <ImageGridItem event={e as TaggedNostrEvent} onClick={() => setModalThread(NostrLink.fromEvent(e))} />
))} ))}
</div> </div>
); );
@ -77,6 +82,13 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
<div className={classNames("flex flex-col", { "gap-6": small, "py-4": small })}> <div className={classNames("flex flex-col", { "gap-6": small, "py-4": small })}>
{!small && <DisplayAsSelector activeSelection={displayAs} onSelect={a => setDisplayAs(a)} />} {!small && <DisplayAsSelector activeSelection={displayAs} onSelect={a => setDisplayAs(a)} />}
{displayAs === "grid" ? renderGrid() : renderList()} {displayAs === "grid" ? renderGrid() : renderList()}
{modalThread && (
<SpotlightThreadModal
thread={modalThread}
onClose={() => setModalThread(undefined)}
onBack={() => setModalThread(undefined)}
/>
)}
</div> </div>
); );
} }