diff --git a/src/views/home/global-tab.tsx b/src/views/home/global-tab.tsx index 564b0d26d..f4901b795 100644 --- a/src/views/home/global-tab.tsx +++ b/src/views/home/global-tab.tsx @@ -1,15 +1,26 @@ import { Button, Flex, FormControl, FormLabel, Select, Spinner, Switch, useDisclosure } from "@chakra-ui/react"; import moment from "moment"; import { useState } from "react"; +import { useSearchParams } from "react-router-dom"; import { Note } from "../../components/note"; +import { unique } from "../../helpers/array"; import { isNote } from "../../helpers/nostr-event"; import useSubject from "../../hooks/use-subject"; import { useTimelineLoader } from "../../hooks/use-timeline-loader"; import settings from "../../services/settings"; export const GlobalTab = () => { - const availableRelays = useSubject(settings.relays); - const [selectedRelay, setSelectedRelay] = useState(""); + const defaultRelays = useSubject(settings.relays); + const [searchParams, setSearchParams] = useSearchParams(); + const selectedRelay = searchParams.get("relay") ?? ""; + const setSelectedRelay = (url: string) => { + if (url) { + setSearchParams({ relay: url }); + } else setSearchParams({}); + }; + + const availableRelays = unique([...defaultRelays, selectedRelay]).filter(Boolean); + const { isOpen: showReplies, onToggle } = useDisclosure(); const { events, loading, loadMore, loader } = useTimelineLoader( `global`, diff --git a/src/views/settings/index.tsx b/src/views/settings/index.tsx index 8cbc56cb9..6881a9707 100644 --- a/src/views/settings/index.tsx +++ b/src/views/settings/index.tsx @@ -22,15 +22,16 @@ import { AccordionIcon, } from "@chakra-ui/react"; import { SyntheticEvent, useState } from "react"; -import { useAsync } from "react-use"; -import { TrashIcon } from "../../components/icons"; +import { GlobalIcon, TrashIcon } from "../../components/icons"; import { RelayStatus } from "./relay-status"; import useSubject from "../../hooks/use-subject"; import settings from "../../services/settings"; import { clearData } from "../../services/db"; import { RelayUrlInput } from "../../components/relay-url-input"; +import { useNavigate } from "react-router-dom"; export const SettingsView = () => { + const navigate = useNavigate(); const relays = useSubject(settings.relays); const [relayInputValue, setRelayInputValue] = useState(""); @@ -85,6 +86,13 @@ export const SettingsView = () => { + } + onClick={() => navigate("/global?relay=" + url)} + size="sm" + aria-label="Global Feed" + mr="2" + /> } title="Remove Relay" diff --git a/src/views/user/relays.tsx b/src/views/user/relays.tsx index a89949efe..08dfb853d 100644 --- a/src/views/user/relays.tsx +++ b/src/views/user/relays.tsx @@ -1,13 +1,15 @@ import { useCallback } from "react"; -import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button, SkeletonText } from "@chakra-ui/react"; +import { SkeletonText, Text, Grid, Box, IconButton } from "@chakra-ui/react"; import settings from "../../services/settings"; import useSubject from "../../hooks/use-subject"; import { useUserContacts } from "../../hooks/use-user-contacts"; -import { useOutletContext } from "react-router-dom"; +import { useNavigate, useOutletContext } from "react-router-dom"; +import { AddIcon, GlobalIcon } from "../../components/icons"; const UserRelaysTab = () => { const { pubkey } = useOutletContext() as { pubkey: string }; const contacts = useUserContacts(pubkey); + const navigate = useNavigate(); const relays = useSubject(settings.relays); const addRelay = useCallback( @@ -22,28 +24,27 @@ const UserRelaysTab = () => { } return ( - - - - - - - - - - {Object.entries(contacts.relays).map(([relay, opts]) => ( - - - - - ))} - -
UrlAction
{relay} - -
-
+ + {Object.entries(contacts.relays).map(([url, opts]) => ( + + {url} + } + onClick={() => navigate("/global?relay=" + url)} + size="sm" + aria-label="Global Feed" + /> + } + onClick={() => addRelay(url)} + isDisabled={relays.includes(url)} + size="sm" + aria-label="Add Relay" + mr="4" + /> + + ))} + ); };