small fixes for reports view

This commit is contained in:
hzrd149
2023-11-13 06:01:53 +09:00
parent 35bb0e3704
commit 4c4eb87e31
2 changed files with 19 additions and 12 deletions

View File

@@ -1,5 +1,5 @@
import { useOutletContext } from "react-router-dom"; import { useOutletContext } from "react-router-dom";
import { Divider, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react"; import { Heading, SimpleGrid } from "@chakra-ui/react";
import { useAdditionalRelayContext } from "../../providers/additional-relay-context"; import { useAdditionalRelayContext } from "../../providers/additional-relay-context";
import useTimelineLoader from "../../hooks/use-timeline-loader"; import useTimelineLoader from "../../hooks/use-timeline-loader";
@@ -33,10 +33,9 @@ export default function UserEmojiPacksTab() {
<VerticalPageLayout> <VerticalPageLayout>
{packs.length > 0 && ( {packs.length > 0 && (
<> <>
<Heading size="md" mt="2"> <Heading size="lg" mt="2">
Created packs Created packs
</Heading> </Heading>
<Divider />
<SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2"> <SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2">
{packs.map((pack) => ( {packs.map((pack) => (
<EmojiPackCard key={getEventUID(pack)} pack={pack} /> <EmojiPackCard key={getEventUID(pack)} pack={pack} />
@@ -46,10 +45,9 @@ export default function UserEmojiPacksTab() {
)} )}
{favorites.length > 0 && ( {favorites.length > 0 && (
<> <>
<Heading size="md" mt="2"> <Heading size="lg" mt="2">
Favorite packs Favorite packs
</Heading> </Heading>
<Divider />
<SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2"> <SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2">
{favorites.map((event) => ( {favorites.map((event) => (
<EmojiPackCard key={getEventUID(event)} pack={event} /> <EmojiPackCard key={getEventUID(event)} pack={event} />

View File

@@ -1,6 +1,7 @@
import { useRef } from "react"; import { useRef } from "react";
import { Flex, Text } from "@chakra-ui/react"; import { Flex, Text } from "@chakra-ui/react";
import { useOutletContext } from "react-router-dom"; import { useOutletContext } from "react-router-dom";
import { Kind } from "nostr-tools";
import { NoteLink } from "../../components/note-link"; import { NoteLink } from "../../components/note-link";
import { UserLink } from "../../components/user-link"; import { UserLink } from "../../components/user-link";
@@ -24,13 +25,15 @@ function ReportEvent({ report }: { report: NostrEvent }) {
useRegisterIntersectionEntity(ref, getEventUID(report)); useRegisterIntersectionEntity(ref, getEventUID(report));
return ( return (
<Flex gap="2"> <Flex gap="2" ref={ref}>
<UserLink pubkey={report.pubkey} color="blue.500" />
<Text>reported</Text>
{reportedEvent ? ( {reportedEvent ? (
<> <>
<NoteLink noteId={reportedEvent} /> <NoteLink noteId={reportedEvent} />
{reportedPubkey && ( {reportedPubkey && (
<> <>
<Text>From</Text> <Text>by</Text>
<UserLink pubkey={reportedPubkey} color="blue.500" /> <UserLink pubkey={reportedPubkey} color="blue.500" />
</> </>
)} )}
@@ -38,7 +41,7 @@ function ReportEvent({ report }: { report: NostrEvent }) {
) : ( ) : (
<UserLink pubkey={reportedPubkey} color="blue.500" /> <UserLink pubkey={reportedPubkey} color="blue.500" />
)} )}
<Text>{reason}</Text> {reason && <Text>for {reason}</Text>}
</Flex> </Flex>
); );
} }
@@ -47,10 +50,16 @@ export default function UserReportsTab() {
const { pubkey } = useOutletContext() as { pubkey: string }; const { pubkey } = useOutletContext() as { pubkey: string };
const contextRelays = useAdditionalRelayContext(); const contextRelays = useAdditionalRelayContext();
const timeline = useTimelineLoader(`${pubkey}-reports`, contextRelays, { const timeline = useTimelineLoader(`${pubkey}-reports`, contextRelays, [
authors: [pubkey], {
kinds: [1984], authors: [pubkey],
}); kinds: [Kind.Report],
},
{
"#p": [pubkey],
kinds: [Kind.Report],
},
]);
const events = useSubject(timeline.timeline); const events = useSubject(timeline.timeline);
const callback = useTimelineCurserIntersectionCallback(timeline); const callback = useTimelineCurserIntersectionCallback(timeline);