diff --git a/src/views/user/index.tsx b/src/views/user/index.tsx index 518efe50e..077eb93cc 100644 --- a/src/views/user/index.tsx +++ b/src/views/user/index.tsx @@ -15,6 +15,7 @@ import { useUserMetadata } from "../../hooks/use-user-metadata"; import { UserAvatar } from "../../components/user-avatar"; import { getUserFullName } from "../../helpers/user-metadata"; import { useIsMobile } from "../../hooks/use-is-mobile"; +import { UserRelaysTab } from "./relays"; export const UserView = () => { const isMobile = useIsMobile(); @@ -61,8 +62,8 @@ export const UserView = () => { two! - - three! + + diff --git a/src/views/user/relays.tsx b/src/views/user/relays.tsx new file mode 100644 index 000000000..08067ef73 --- /dev/null +++ b/src/views/user/relays.tsx @@ -0,0 +1,87 @@ +import React, { useCallback, useEffect, useState } from "react"; +import { + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableContainer, + Button, +} from "@chakra-ui/react"; +import { useSubscription } from "../../hooks/use-subscription"; +import { NostrEvent } from "../../types/nostr-event"; +import settings from "../../services/settings"; +import useSubject from "../../hooks/use-subject"; +import { Subscription } from "../../services/subscriptions"; + +function useEventDir(subscription: Subscription) { + const [events, setEvents] = useState>({}); + + useEffect(() => { + const s = subscription.onEvent.subscribe((event) => { + setEvents((dir) => { + if (!dir[event.id]) { + return { [event.id]: event, ...dir }; + } + return dir; + }); + }); + + return () => s.unsubscribe(); + }, [subscription]); + + const reset = () => setEvents({}); + + return { events, reset }; +} + +export const UserRelaysTab = ({ pubkey }: { pubkey: string }) => { + const relays = useSubject(settings.relays); + + const sub = useSubscription( + relays, + { authors: [pubkey], kinds: [2] }, + `${pubkey} relays` + ); + + const { events, reset } = useEventDir(sub); + + // clear events when pubkey changes + useEffect(() => reset(), [pubkey]); + + const addRelay = useCallback( + (url: string) => { + settings.relays.next([...relays, url]); + }, + [relays] + ); + + return ( + + + + + Url + Action + + + + {Object.values(events).map((event) => ( + + {event.content} + + addRelay(event.content)} + isDisabled={relays.includes(event.content)} + > + Add Relay + + + + ))} + + + + ); +};
two!
three!