feat: 💨
This commit is contained in:
@@ -16,10 +16,12 @@ import {
|
||||
} from 'react'
|
||||
import BottomNavigationBar from './components/BottomNavigationBar'
|
||||
import TooManyRelaysAlertDialog from './components/TooManyRelaysAlertDialog'
|
||||
import { normalizeUrl } from './lib/url'
|
||||
import ExplorePage from './pages/primary/ExplorePage'
|
||||
import MePage from './pages/primary/MePage'
|
||||
import NotificationListPage from './pages/primary/NotificationListPage'
|
||||
import ProfilePage from './pages/primary/ProfilePage'
|
||||
import RelayPage from './pages/primary/RelayPage'
|
||||
import { NotificationProvider } from './providers/NotificationProvider'
|
||||
import { useScreenSize } from './providers/ScreenSizeProvider'
|
||||
import { routes } from './routes'
|
||||
@@ -28,7 +30,7 @@ import modalManager from './services/modal-manager.service'
|
||||
export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP
|
||||
|
||||
type TPrimaryPageContext = {
|
||||
navigate: (page: TPrimaryPageName) => void
|
||||
navigate: (page: TPrimaryPageName, props?: object) => void
|
||||
current: TPrimaryPageName | null
|
||||
display: boolean
|
||||
}
|
||||
@@ -51,7 +53,8 @@ const PRIMARY_PAGE_REF_MAP = {
|
||||
explore: createRef<TPageRef>(),
|
||||
notifications: createRef<TPageRef>(),
|
||||
me: createRef<TPageRef>(),
|
||||
profile: createRef<TPageRef>()
|
||||
profile: createRef<TPageRef>(),
|
||||
relay: createRef<TPageRef>()
|
||||
}
|
||||
|
||||
const PRIMARY_PAGE_MAP = {
|
||||
@@ -59,7 +62,8 @@ const PRIMARY_PAGE_MAP = {
|
||||
explore: <ExplorePage ref={PRIMARY_PAGE_REF_MAP.explore} />,
|
||||
notifications: <NotificationListPage ref={PRIMARY_PAGE_REF_MAP.notifications} />,
|
||||
me: <MePage ref={PRIMARY_PAGE_REF_MAP.me} />,
|
||||
profile: <ProfilePage ref={PRIMARY_PAGE_REF_MAP.profile} />
|
||||
profile: <ProfilePage ref={PRIMARY_PAGE_REF_MAP.profile} />,
|
||||
relay: <RelayPage ref={PRIMARY_PAGE_REF_MAP.relay} />
|
||||
}
|
||||
|
||||
const PrimaryPageContext = createContext<TPrimaryPageContext | undefined>(undefined)
|
||||
@@ -85,7 +89,7 @@ export function useSecondaryPage() {
|
||||
export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
const [currentPrimaryPage, setCurrentPrimaryPage] = useState<TPrimaryPageName>('home')
|
||||
const [primaryPages, setPrimaryPages] = useState<
|
||||
{ name: TPrimaryPageName; element: ReactNode }[]
|
||||
{ name: TPrimaryPageName; element: ReactNode; props?: any }[]
|
||||
>([
|
||||
{
|
||||
name: 'home',
|
||||
@@ -131,6 +135,15 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
}
|
||||
return newStack
|
||||
})
|
||||
} else {
|
||||
const searchParams = new URLSearchParams(window.location.search)
|
||||
const r = searchParams.get('r')
|
||||
if (r) {
|
||||
const url = normalizeUrl(r)
|
||||
if (url) {
|
||||
navigatePrimaryPage('relay', { url })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onPopState = (e: PopStateEvent) => {
|
||||
@@ -206,12 +219,18 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
}
|
||||
}, [])
|
||||
|
||||
const navigatePrimaryPage = (page: TPrimaryPageName) => {
|
||||
const navigatePrimaryPage = (page: TPrimaryPageName, props?: any) => {
|
||||
const needScrollToTop = page === currentPrimaryPage
|
||||
const exists = primaryPages.find((p) => p.name === page)
|
||||
if (!exists) {
|
||||
setPrimaryPages((prev) => [...prev, { name: page, element: PRIMARY_PAGE_MAP[page] }])
|
||||
setPrimaryPages((prev) => {
|
||||
const exists = prev.find((p) => p.name === page)
|
||||
if (exists && props) {
|
||||
exists.props = props
|
||||
return [...prev]
|
||||
} else if (!exists) {
|
||||
return [...prev, { name: page, element: PRIMARY_PAGE_MAP[page], props }]
|
||||
}
|
||||
return prev
|
||||
})
|
||||
setCurrentPrimaryPage(page)
|
||||
if (needScrollToTop) {
|
||||
PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop('smooth')
|
||||
@@ -284,7 +303,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
{item.component}
|
||||
</div>
|
||||
))}
|
||||
{primaryPages.map(({ name, element }) => (
|
||||
{primaryPages.map(({ name, element, props }) => (
|
||||
<div
|
||||
key={name}
|
||||
style={{
|
||||
@@ -292,7 +311,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
secondaryStack.length === 0 && currentPrimaryPage === name ? 'block' : 'none'
|
||||
}}
|
||||
>
|
||||
{element}
|
||||
{props ? cloneElement(element as React.ReactElement, props) : element}
|
||||
</div>
|
||||
))}
|
||||
<BottomNavigationBar />
|
||||
@@ -323,7 +342,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
<Sidebar />
|
||||
<div className="grid grid-cols-2 gap-2 w-full pr-2">
|
||||
<div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
|
||||
{primaryPages.map(({ name, element }) => (
|
||||
{primaryPages.map(({ name, element, props }) => (
|
||||
<div
|
||||
key={name}
|
||||
className="w-full"
|
||||
@@ -331,7 +350,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||
display: currentPrimaryPage === name ? 'block' : 'none'
|
||||
}}
|
||||
>
|
||||
{element}
|
||||
{props ? cloneElement(element as React.ReactElement, props) : element}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { useFeed } from '@/providers/FeedProvider'
|
||||
import RelayIcon from '../RelayIcon'
|
||||
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
|
||||
|
||||
export default function TemporaryRelaySet() {
|
||||
const { temporaryRelayUrls } = useFeed()
|
||||
|
||||
if (!temporaryRelayUrls.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full border border-dashed rounded-lg p-4 border-primary bg-primary/5 flex gap-4 justify-between">
|
||||
<div className="flex-1 w-0">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="h-8 font-semibold">Temporary</div>
|
||||
</div>
|
||||
{temporaryRelayUrls.map((url) => (
|
||||
<div className="flex gap-3 items-center">
|
||||
<RelayIcon url={url} className="w-4 h-4" iconSize={10} />
|
||||
<div className="text-muted-foreground text-sm truncate">{url}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<SaveRelayDropdownMenu urls={temporaryRelayUrls} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,13 +3,11 @@ import AddNewRelaySet from './AddNewRelaySet'
|
||||
import FavoriteRelayList from './FavoriteRelayList'
|
||||
import { RelaySetsSettingComponentProvider } from './provider'
|
||||
import RelaySetList from './RelaySetList'
|
||||
import TemporaryRelaySet from './TemporaryRelaySet'
|
||||
|
||||
export default function FavoriteRelaysSetting() {
|
||||
return (
|
||||
<RelaySetsSettingComponentProvider>
|
||||
<div className="space-y-4">
|
||||
<TemporaryRelaySet />
|
||||
<RelaySetList />
|
||||
<AddNewRelaySet />
|
||||
<FavoriteRelayList />
|
||||
|
||||
@@ -8,13 +8,12 @@ import { BookmarkIcon, UsersRound } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import RelayIcon from '../RelayIcon'
|
||||
import RelaySetCard from '../RelaySetCard'
|
||||
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
|
||||
|
||||
export default function FeedSwitcher({ close }: { close?: () => void }) {
|
||||
const { t } = useTranslation()
|
||||
const { pubkey } = useNostr()
|
||||
const { relaySets, favoriteRelays } = useFavoriteRelays()
|
||||
const { feedInfo, switchFeed, temporaryRelayUrls } = useFeed()
|
||||
const { feedInfo, switchFeed } = useFeed()
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -54,20 +53,6 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
|
||||
</FeedSwitcherItem>
|
||||
)}
|
||||
|
||||
{temporaryRelayUrls.length > 0 && (
|
||||
<FeedSwitcherItem
|
||||
key="temporary"
|
||||
isActive={feedInfo.feedType === 'temporary'}
|
||||
temporary
|
||||
onClick={() => {
|
||||
switchFeed('temporary')
|
||||
close?.()
|
||||
}}
|
||||
controls={<SaveRelayDropdownMenu urls={temporaryRelayUrls} />}
|
||||
>
|
||||
{temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : t('Temporary')}
|
||||
</FeedSwitcherItem>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-end items-center text-sm">
|
||||
<SecondaryPageLink
|
||||
@@ -115,19 +100,17 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
|
||||
function FeedSwitcherItem({
|
||||
children,
|
||||
isActive,
|
||||
temporary = false,
|
||||
onClick,
|
||||
controls
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
isActive: boolean
|
||||
temporary?: boolean
|
||||
onClick: () => void
|
||||
controls?: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`w-full border rounded-lg p-4 ${isActive ? 'border-primary bg-primary/5' : 'clickable'} ${temporary ? 'border-dashed' : ''}`}
|
||||
className={`w-full border rounded-lg p-4 ${isActive ? 'border-primary bg-primary/5' : 'clickable'}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
|
||||
12
src/components/NotFound/index.tsx
Normal file
12
src/components/NotFound/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function NotFound() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
|
||||
<div>{t('Lost in the void')} 🌌</div>
|
||||
<div>(404)</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import client from '@/services/client.service'
|
||||
import { Link, Zap } from 'lucide-react'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import NotFound from '../NotFound'
|
||||
import FollowedBy from './FollowedBy'
|
||||
import Followings from './Followings'
|
||||
import ProfileFeed from './ProfileFeed'
|
||||
@@ -98,7 +99,7 @@ export default function Profile({ id }: { id?: string }) {
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (!profile) return null
|
||||
if (!profile) return <NotFound />
|
||||
|
||||
const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile
|
||||
return (
|
||||
|
||||
50
src/components/Relay/index.tsx
Normal file
50
src/components/Relay/index.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import NormalFeed from '@/components/NormalFeed'
|
||||
import RelayInfo from '@/components/RelayInfo'
|
||||
import SearchInput from '@/components/SearchInput'
|
||||
import { useFetchRelayInfo } from '@/hooks'
|
||||
import { normalizeUrl } from '@/lib/url'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import NotFound from '../NotFound'
|
||||
|
||||
export default function Relay({ url, className }: { url?: string; className?: string }) {
|
||||
const { t } = useTranslation()
|
||||
const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
|
||||
const { relayInfo } = useFetchRelayInfo(normalizedUrl)
|
||||
const [searchInput, setSearchInput] = useState('')
|
||||
const [debouncedInput, setDebouncedInput] = useState(searchInput)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedInput(searchInput)
|
||||
}, 1000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler)
|
||||
}
|
||||
}, [searchInput])
|
||||
|
||||
if (!normalizedUrl) {
|
||||
return <NotFound />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<RelayInfo url={normalizedUrl} />
|
||||
{relayInfo?.supported_nips?.includes(50) && (
|
||||
<div className="px-4 py-2">
|
||||
<SearchInput
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder={t('Search')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<NormalFeed
|
||||
subRequests={[
|
||||
{ urls: [normalizedUrl], filter: debouncedInput ? { search: debouncedInput } : {} }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { toRelay } from '@/lib/link'
|
||||
import { useSecondaryPage } from '@/PageManager'
|
||||
import { usePrimaryPage } from '@/PageManager'
|
||||
import relayInfoService from '@/services/relay-info.service'
|
||||
import { TNip66RelayInfo } from '@/types'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
@@ -9,7 +8,7 @@ import SearchInput from '../SearchInput'
|
||||
|
||||
export default function RelayList() {
|
||||
const { t } = useTranslation()
|
||||
const { push } = useSecondaryPage()
|
||||
const { navigate } = usePrimaryPage()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [relays, setRelays] = useState<TNip66RelayInfo[]>([])
|
||||
const [showCount, setShowCount] = useState(20)
|
||||
@@ -78,7 +77,7 @@ export default function RelayList() {
|
||||
className="clickable p-4 border-b"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
push(toRelay(relay.url))
|
||||
navigate('relay', { url: relay.url })
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
35
src/components/RelayPageControls/index.tsx
Normal file
35
src/components/RelayPageControls/index.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Check, Copy, Link } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
|
||||
|
||||
export default function RelayPageControls({ url }: { url: string }) {
|
||||
const [copiedUrl, setCopiedUrl] = useState(false)
|
||||
const [copiedShareableUrl, setCopiedShareableUrl] = useState(false)
|
||||
|
||||
const handleCopyUrl = () => {
|
||||
navigator.clipboard.writeText(url)
|
||||
setCopiedUrl(true)
|
||||
setTimeout(() => setCopiedUrl(false), 2000)
|
||||
}
|
||||
|
||||
const handleCopyShareableUrl = () => {
|
||||
navigator.clipboard.writeText(`https://jumble.social/?r=${url}`)
|
||||
setCopiedShareableUrl(true)
|
||||
toast.success('Shareable URL copied to clipboard')
|
||||
setTimeout(() => setCopiedShareableUrl(false), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="ghost" size="titlebar-icon" onClick={handleCopyShareableUrl}>
|
||||
{copiedShareableUrl ? <Check /> : <Link />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="titlebar-icon" onClick={handleCopyUrl}>
|
||||
{copiedUrl ? <Check /> : <Copy />}
|
||||
</Button>
|
||||
<SaveRelayDropdownMenu urls={[url]} atTitlebar />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -71,11 +71,6 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
|
||||
if (feedInfo.feedType === 'relays') {
|
||||
return activeRelaySet?.name ?? activeRelaySet?.id
|
||||
}
|
||||
if (feedInfo.feedType === 'temporary') {
|
||||
return relayUrls.length === 1
|
||||
? simplifyUrl(relayUrls[0])
|
||||
: (activeRelaySet?.name ?? t('Temporary'))
|
||||
}
|
||||
}, [feedInfo, activeRelaySet])
|
||||
|
||||
return (
|
||||
|
||||
@@ -22,11 +22,7 @@ export default function RelaysFeed() {
|
||||
return null
|
||||
}
|
||||
|
||||
if (
|
||||
feedInfo.feedType !== 'relay' &&
|
||||
feedInfo.feedType !== 'relays' &&
|
||||
feedInfo.feedType !== 'temporary'
|
||||
) {
|
||||
if (feedInfo.feedType !== 'relay' && feedInfo.feedType !== 'relays') {
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import BookmarkList from '@/components/BookmarkList'
|
||||
import PostEditor from '@/components/PostEditor'
|
||||
import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
||||
import { useFeed } from '@/providers/FeedProvider'
|
||||
@@ -61,11 +60,7 @@ const NoteListPage = forwardRef((_, ref) => {
|
||||
<PrimaryPageLayout
|
||||
pageName="home"
|
||||
ref={layoutRef}
|
||||
titlebar={
|
||||
<NoteListPageTitlebar
|
||||
temporaryRelayUrls={feedInfo.feedType === 'temporary' ? relayUrls : []}
|
||||
/>
|
||||
}
|
||||
titlebar={<NoteListPageTitlebar />}
|
||||
displayScrollToTopButton
|
||||
>
|
||||
{content}
|
||||
@@ -75,16 +70,13 @@ const NoteListPage = forwardRef((_, ref) => {
|
||||
NoteListPage.displayName = 'NoteListPage'
|
||||
export default NoteListPage
|
||||
|
||||
function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?: string[] }) {
|
||||
function NoteListPageTitlebar() {
|
||||
const { isSmallScreen } = useScreenSize()
|
||||
|
||||
return (
|
||||
<div className="flex gap-1 items-center h-full justify-between">
|
||||
<FeedButton className="flex-1 max-w-fit w-0" />
|
||||
<div className="shrink-0 flex gap-1 items-center">
|
||||
{temporaryRelayUrls.length > 0 && (
|
||||
<SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
|
||||
)}
|
||||
<SearchButton />
|
||||
{isSmallScreen && <PostButton />}
|
||||
</div>
|
||||
|
||||
37
src/pages/primary/RelayPage/index.tsx
Normal file
37
src/pages/primary/RelayPage/index.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import Relay from '@/components/Relay'
|
||||
import RelayPageControls from '@/components/RelayPageControls'
|
||||
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
||||
import { normalizeUrl, simplifyUrl } from '@/lib/url'
|
||||
import { Server } from 'lucide-react'
|
||||
import { forwardRef, useMemo } from 'react'
|
||||
|
||||
const RelayPage = forwardRef(({ url }: { url?: string }, ref) => {
|
||||
const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
|
||||
|
||||
return (
|
||||
<PrimaryPageLayout
|
||||
pageName="relay"
|
||||
titlebar={<RelayPageTitlebar url={normalizedUrl} />}
|
||||
displayScrollToTopButton
|
||||
ref={ref}
|
||||
>
|
||||
<Relay url={normalizedUrl} className="pt-3" />
|
||||
</PrimaryPageLayout>
|
||||
)
|
||||
})
|
||||
RelayPage.displayName = 'RelayPage'
|
||||
export default RelayPage
|
||||
|
||||
function RelayPageTitlebar({ url }: { url?: string }) {
|
||||
return (
|
||||
<div className="flex gap-2 items-center justify-between h-full">
|
||||
<div className="flex items-center gap-2 pl-3 flex-1 w-0">
|
||||
<Server />
|
||||
<div className="text-lg font-semibold truncate">{simplifyUrl(url ?? '')}</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-shrink-0">
|
||||
<RelayPageControls url={url ?? ''} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,16 +1,11 @@
|
||||
import NotFound from '@/components/NotFound'
|
||||
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
||||
import { forwardRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const NotFoundPage = forwardRef(({ index }: { index?: number }, ref) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<SecondaryPageLayout ref={ref} index={index} hideBackButton>
|
||||
<div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
|
||||
<div>{t('Lost in the void')} 🌌</div>
|
||||
<div>(404)</div>
|
||||
</div>
|
||||
<NotFound />
|
||||
</SecondaryPageLayout>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,34 +1,13 @@
|
||||
import NormalFeed from '@/components/NormalFeed'
|
||||
import RelayInfo from '@/components/RelayInfo'
|
||||
import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
|
||||
import SearchInput from '@/components/SearchInput'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useFetchRelayInfo } from '@/hooks'
|
||||
import Relay from '@/components/Relay'
|
||||
import RelayPageControls from '@/components/RelayPageControls'
|
||||
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
||||
import { normalizeUrl, simplifyUrl } from '@/lib/url'
|
||||
import { Check, Copy, Link } from 'lucide-react'
|
||||
import { forwardRef, useEffect, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import { forwardRef, useMemo } from 'react'
|
||||
import NotFoundPage from '../NotFoundPage'
|
||||
|
||||
const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
|
||||
const { relayInfo } = useFetchRelayInfo(normalizedUrl)
|
||||
const title = useMemo(() => (url ? simplifyUrl(url) : undefined), [url])
|
||||
const [searchInput, setSearchInput] = useState('')
|
||||
const [debouncedInput, setDebouncedInput] = useState(searchInput)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedInput(searchInput)
|
||||
}, 1000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(handler)
|
||||
}
|
||||
}, [searchInput])
|
||||
|
||||
if (!normalizedUrl) {
|
||||
return <NotFoundPage ref={ref} />
|
||||
@@ -42,54 +21,9 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
|
||||
controls={<RelayPageControls url={normalizedUrl} />}
|
||||
displayScrollToTopButton
|
||||
>
|
||||
<div className="h-3 w-full" />
|
||||
<RelayInfo url={normalizedUrl} />
|
||||
{relayInfo?.supported_nips?.includes(50) && (
|
||||
<div className="px-4 py-2">
|
||||
<SearchInput
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder={t('Search')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<NormalFeed
|
||||
subRequests={[
|
||||
{ urls: [normalizedUrl], filter: debouncedInput ? { search: debouncedInput } : {} }
|
||||
]}
|
||||
/>
|
||||
<Relay url={normalizedUrl} className="pt-3" />
|
||||
</SecondaryPageLayout>
|
||||
)
|
||||
})
|
||||
RelayPage.displayName = 'RelayPage'
|
||||
export default RelayPage
|
||||
|
||||
function RelayPageControls({ url }: { url: string }) {
|
||||
const [copiedUrl, setCopiedUrl] = useState(false)
|
||||
const [copiedShareableUrl, setCopiedShareableUrl] = useState(false)
|
||||
|
||||
const handleCopyUrl = () => {
|
||||
navigator.clipboard.writeText(url)
|
||||
setCopiedUrl(true)
|
||||
setTimeout(() => setCopiedUrl(false), 2000)
|
||||
}
|
||||
|
||||
const handleCopyShareableUrl = () => {
|
||||
navigator.clipboard.writeText(`https://jumble.social/?r=${url}`)
|
||||
setCopiedShareableUrl(true)
|
||||
toast.success('Shareable URL copied to clipboard')
|
||||
setTimeout(() => setCopiedShareableUrl(false), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="ghost" size="titlebar-icon" onClick={handleCopyShareableUrl}>
|
||||
{copiedShareableUrl ? <Check /> : <Link />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="titlebar-icon" onClick={handleCopyUrl}>
|
||||
{copiedUrl ? <Check /> : <Copy />}
|
||||
</Button>
|
||||
<SaveRelayDropdownMenu urls={[url]} atTitlebar />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -15,7 +15,6 @@ import { useNostr } from './NostrProvider'
|
||||
type TFeedContext = {
|
||||
feedInfo: TFeedInfo
|
||||
relayUrls: string[]
|
||||
temporaryRelayUrls: string[]
|
||||
isReady: boolean
|
||||
switchFeed: (
|
||||
feedType: TFeedType,
|
||||
@@ -34,11 +33,9 @@ export const useFeed = () => {
|
||||
}
|
||||
|
||||
export function FeedProvider({ children }: { children: React.ReactNode }) {
|
||||
const isFirstRenderRef = useRef(true)
|
||||
const { pubkey, isInitialized } = useNostr()
|
||||
const { relaySets, favoriteRelays } = useFavoriteRelays()
|
||||
const [relayUrls, setRelayUrls] = useState<string[]>([])
|
||||
const [temporaryRelayUrls, setTemporaryRelayUrls] = useState<string[]>([])
|
||||
const [isReady, setIsReady] = useState(false)
|
||||
const [feedInfo, setFeedInfo] = useState<TFeedInfo>({
|
||||
feedType: 'relay',
|
||||
@@ -48,24 +45,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
const isFirstRender = isFirstRenderRef.current
|
||||
isFirstRenderRef.current = false
|
||||
if (isFirstRender) {
|
||||
// temporary relay urls from query params
|
||||
const searchParams = new URLSearchParams(window.location.search)
|
||||
const temporaryRelayUrls = searchParams
|
||||
.getAll('r')
|
||||
.map((url) => normalizeUrl(url))
|
||||
.filter((url) => url && isWebsocketUrl(url))
|
||||
if (temporaryRelayUrls.length) {
|
||||
return await switchFeed('temporary', { temporaryRelayUrls })
|
||||
}
|
||||
}
|
||||
|
||||
if (feedInfoRef.current.feedType === 'temporary') {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isInitialized) {
|
||||
return
|
||||
}
|
||||
@@ -106,7 +85,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
||||
feedType: TFeedType,
|
||||
options: {
|
||||
activeRelaySetId?: string | null
|
||||
temporaryRelayUrls?: string[] | null
|
||||
pubkey?: string | null
|
||||
relay?: string | null
|
||||
} = {}
|
||||
@@ -195,26 +173,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
||||
setIsReady(true)
|
||||
return
|
||||
}
|
||||
if (feedType === 'temporary') {
|
||||
const urls = options.temporaryRelayUrls ?? temporaryRelayUrls
|
||||
if (!urls.length) {
|
||||
setIsReady(true)
|
||||
return
|
||||
}
|
||||
|
||||
const newFeedInfo = { feedType }
|
||||
setFeedInfo(newFeedInfo)
|
||||
feedInfoRef.current = newFeedInfo
|
||||
setTemporaryRelayUrls(urls)
|
||||
setRelayUrls(urls)
|
||||
setIsReady(true)
|
||||
|
||||
const relayInfos = await relayInfoService.getRelayInfos(urls)
|
||||
client.setCurrentRelayUrls(
|
||||
urls.filter((_, i) => !relayInfos[i] || !checkAlgoRelay(relayInfos[i]))
|
||||
)
|
||||
return
|
||||
}
|
||||
setIsReady(true)
|
||||
}
|
||||
|
||||
@@ -223,7 +181,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
||||
value={{
|
||||
feedInfo,
|
||||
relayUrls,
|
||||
temporaryRelayUrls,
|
||||
isReady,
|
||||
switchFeed
|
||||
}}
|
||||
|
||||
2
src/types/index.d.ts
vendored
2
src/types/index.d.ts
vendored
@@ -104,7 +104,7 @@ export type TAccount = {
|
||||
|
||||
export type TAccountPointer = Pick<TAccount, 'pubkey' | 'signerType'>
|
||||
|
||||
export type TFeedType = 'following' | 'relays' | 'relay' | 'temporary' | 'bookmarks'
|
||||
export type TFeedType = 'following' | 'relays' | 'relay' | 'bookmarks'
|
||||
export type TFeedInfo = { feedType: TFeedType; id?: string }
|
||||
|
||||
export type TLanguage = 'en' | 'zh' | 'pl'
|
||||
|
||||
Reference in New Issue
Block a user