feat: 💨
This commit is contained in:
@@ -16,10 +16,12 @@ import {
|
|||||||
} from 'react'
|
} from 'react'
|
||||||
import BottomNavigationBar from './components/BottomNavigationBar'
|
import BottomNavigationBar from './components/BottomNavigationBar'
|
||||||
import TooManyRelaysAlertDialog from './components/TooManyRelaysAlertDialog'
|
import TooManyRelaysAlertDialog from './components/TooManyRelaysAlertDialog'
|
||||||
|
import { normalizeUrl } from './lib/url'
|
||||||
import ExplorePage from './pages/primary/ExplorePage'
|
import ExplorePage from './pages/primary/ExplorePage'
|
||||||
import MePage from './pages/primary/MePage'
|
import MePage from './pages/primary/MePage'
|
||||||
import NotificationListPage from './pages/primary/NotificationListPage'
|
import NotificationListPage from './pages/primary/NotificationListPage'
|
||||||
import ProfilePage from './pages/primary/ProfilePage'
|
import ProfilePage from './pages/primary/ProfilePage'
|
||||||
|
import RelayPage from './pages/primary/RelayPage'
|
||||||
import { NotificationProvider } from './providers/NotificationProvider'
|
import { NotificationProvider } from './providers/NotificationProvider'
|
||||||
import { useScreenSize } from './providers/ScreenSizeProvider'
|
import { useScreenSize } from './providers/ScreenSizeProvider'
|
||||||
import { routes } from './routes'
|
import { routes } from './routes'
|
||||||
@@ -28,7 +30,7 @@ import modalManager from './services/modal-manager.service'
|
|||||||
export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP
|
export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP
|
||||||
|
|
||||||
type TPrimaryPageContext = {
|
type TPrimaryPageContext = {
|
||||||
navigate: (page: TPrimaryPageName) => void
|
navigate: (page: TPrimaryPageName, props?: object) => void
|
||||||
current: TPrimaryPageName | null
|
current: TPrimaryPageName | null
|
||||||
display: boolean
|
display: boolean
|
||||||
}
|
}
|
||||||
@@ -51,7 +53,8 @@ const PRIMARY_PAGE_REF_MAP = {
|
|||||||
explore: createRef<TPageRef>(),
|
explore: createRef<TPageRef>(),
|
||||||
notifications: createRef<TPageRef>(),
|
notifications: createRef<TPageRef>(),
|
||||||
me: createRef<TPageRef>(),
|
me: createRef<TPageRef>(),
|
||||||
profile: createRef<TPageRef>()
|
profile: createRef<TPageRef>(),
|
||||||
|
relay: createRef<TPageRef>()
|
||||||
}
|
}
|
||||||
|
|
||||||
const PRIMARY_PAGE_MAP = {
|
const PRIMARY_PAGE_MAP = {
|
||||||
@@ -59,7 +62,8 @@ const PRIMARY_PAGE_MAP = {
|
|||||||
explore: <ExplorePage ref={PRIMARY_PAGE_REF_MAP.explore} />,
|
explore: <ExplorePage ref={PRIMARY_PAGE_REF_MAP.explore} />,
|
||||||
notifications: <NotificationListPage ref={PRIMARY_PAGE_REF_MAP.notifications} />,
|
notifications: <NotificationListPage ref={PRIMARY_PAGE_REF_MAP.notifications} />,
|
||||||
me: <MePage ref={PRIMARY_PAGE_REF_MAP.me} />,
|
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)
|
const PrimaryPageContext = createContext<TPrimaryPageContext | undefined>(undefined)
|
||||||
@@ -85,7 +89,7 @@ export function useSecondaryPage() {
|
|||||||
export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
||||||
const [currentPrimaryPage, setCurrentPrimaryPage] = useState<TPrimaryPageName>('home')
|
const [currentPrimaryPage, setCurrentPrimaryPage] = useState<TPrimaryPageName>('home')
|
||||||
const [primaryPages, setPrimaryPages] = useState<
|
const [primaryPages, setPrimaryPages] = useState<
|
||||||
{ name: TPrimaryPageName; element: ReactNode }[]
|
{ name: TPrimaryPageName; element: ReactNode; props?: any }[]
|
||||||
>([
|
>([
|
||||||
{
|
{
|
||||||
name: 'home',
|
name: 'home',
|
||||||
@@ -131,6 +135,15 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
|||||||
}
|
}
|
||||||
return newStack
|
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) => {
|
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 needScrollToTop = page === currentPrimaryPage
|
||||||
const exists = primaryPages.find((p) => p.name === page)
|
setPrimaryPages((prev) => {
|
||||||
if (!exists) {
|
const exists = prev.find((p) => p.name === page)
|
||||||
setPrimaryPages((prev) => [...prev, { name: page, element: PRIMARY_PAGE_MAP[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)
|
setCurrentPrimaryPage(page)
|
||||||
if (needScrollToTop) {
|
if (needScrollToTop) {
|
||||||
PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop('smooth')
|
PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop('smooth')
|
||||||
@@ -284,7 +303,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
|||||||
{item.component}
|
{item.component}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{primaryPages.map(({ name, element }) => (
|
{primaryPages.map(({ name, element, props }) => (
|
||||||
<div
|
<div
|
||||||
key={name}
|
key={name}
|
||||||
style={{
|
style={{
|
||||||
@@ -292,7 +311,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
|||||||
secondaryStack.length === 0 && currentPrimaryPage === name ? 'block' : 'none'
|
secondaryStack.length === 0 && currentPrimaryPage === name ? 'block' : 'none'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{element}
|
{props ? cloneElement(element as React.ReactElement, props) : element}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
<BottomNavigationBar />
|
<BottomNavigationBar />
|
||||||
@@ -323,7 +342,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
|||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div className="grid grid-cols-2 gap-2 w-full pr-2">
|
<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">
|
<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
|
<div
|
||||||
key={name}
|
key={name}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
@@ -331,7 +350,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
|
|||||||
display: currentPrimaryPage === name ? 'block' : 'none'
|
display: currentPrimaryPage === name ? 'block' : 'none'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{element}
|
{props ? cloneElement(element as React.ReactElement, props) : element}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</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 FavoriteRelayList from './FavoriteRelayList'
|
||||||
import { RelaySetsSettingComponentProvider } from './provider'
|
import { RelaySetsSettingComponentProvider } from './provider'
|
||||||
import RelaySetList from './RelaySetList'
|
import RelaySetList from './RelaySetList'
|
||||||
import TemporaryRelaySet from './TemporaryRelaySet'
|
|
||||||
|
|
||||||
export default function FavoriteRelaysSetting() {
|
export default function FavoriteRelaysSetting() {
|
||||||
return (
|
return (
|
||||||
<RelaySetsSettingComponentProvider>
|
<RelaySetsSettingComponentProvider>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<TemporaryRelaySet />
|
|
||||||
<RelaySetList />
|
<RelaySetList />
|
||||||
<AddNewRelaySet />
|
<AddNewRelaySet />
|
||||||
<FavoriteRelayList />
|
<FavoriteRelayList />
|
||||||
|
|||||||
@@ -8,13 +8,12 @@ import { BookmarkIcon, UsersRound } from 'lucide-react'
|
|||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import RelayIcon from '../RelayIcon'
|
import RelayIcon from '../RelayIcon'
|
||||||
import RelaySetCard from '../RelaySetCard'
|
import RelaySetCard from '../RelaySetCard'
|
||||||
import SaveRelayDropdownMenu from '../SaveRelayDropdownMenu'
|
|
||||||
|
|
||||||
export default function FeedSwitcher({ close }: { close?: () => void }) {
|
export default function FeedSwitcher({ close }: { close?: () => void }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { pubkey } = useNostr()
|
const { pubkey } = useNostr()
|
||||||
const { relaySets, favoriteRelays } = useFavoriteRelays()
|
const { relaySets, favoriteRelays } = useFavoriteRelays()
|
||||||
const { feedInfo, switchFeed, temporaryRelayUrls } = useFeed()
|
const { feedInfo, switchFeed } = useFeed()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -54,20 +53,6 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
|
|||||||
</FeedSwitcherItem>
|
</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="space-y-2">
|
||||||
<div className="flex justify-end items-center text-sm">
|
<div className="flex justify-end items-center text-sm">
|
||||||
<SecondaryPageLink
|
<SecondaryPageLink
|
||||||
@@ -115,19 +100,17 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
|
|||||||
function FeedSwitcherItem({
|
function FeedSwitcherItem({
|
||||||
children,
|
children,
|
||||||
isActive,
|
isActive,
|
||||||
temporary = false,
|
|
||||||
onClick,
|
onClick,
|
||||||
controls
|
controls
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
isActive: boolean
|
isActive: boolean
|
||||||
temporary?: boolean
|
|
||||||
onClick: () => void
|
onClick: () => void
|
||||||
controls?: React.ReactNode
|
controls?: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div
|
<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}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-center">
|
<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 { Link, Zap } from 'lucide-react'
|
||||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import NotFound from '../NotFound'
|
||||||
import FollowedBy from './FollowedBy'
|
import FollowedBy from './FollowedBy'
|
||||||
import Followings from './Followings'
|
import Followings from './Followings'
|
||||||
import ProfileFeed from './ProfileFeed'
|
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
|
const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile
|
||||||
return (
|
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 { usePrimaryPage } from '@/PageManager'
|
||||||
import { useSecondaryPage } from '@/PageManager'
|
|
||||||
import relayInfoService from '@/services/relay-info.service'
|
import relayInfoService from '@/services/relay-info.service'
|
||||||
import { TNip66RelayInfo } from '@/types'
|
import { TNip66RelayInfo } from '@/types'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
@@ -9,7 +8,7 @@ import SearchInput from '../SearchInput'
|
|||||||
|
|
||||||
export default function RelayList() {
|
export default function RelayList() {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { push } = useSecondaryPage()
|
const { navigate } = usePrimaryPage()
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [relays, setRelays] = useState<TNip66RelayInfo[]>([])
|
const [relays, setRelays] = useState<TNip66RelayInfo[]>([])
|
||||||
const [showCount, setShowCount] = useState(20)
|
const [showCount, setShowCount] = useState(20)
|
||||||
@@ -78,7 +77,7 @@ export default function RelayList() {
|
|||||||
className="clickable p-4 border-b"
|
className="clickable p-4 border-b"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation()
|
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') {
|
if (feedInfo.feedType === 'relays') {
|
||||||
return activeRelaySet?.name ?? activeRelaySet?.id
|
return activeRelaySet?.name ?? activeRelaySet?.id
|
||||||
}
|
}
|
||||||
if (feedInfo.feedType === 'temporary') {
|
|
||||||
return relayUrls.length === 1
|
|
||||||
? simplifyUrl(relayUrls[0])
|
|
||||||
: (activeRelaySet?.name ?? t('Temporary'))
|
|
||||||
}
|
|
||||||
}, [feedInfo, activeRelaySet])
|
}, [feedInfo, activeRelaySet])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -22,11 +22,7 @@ export default function RelaysFeed() {
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (feedInfo.feedType !== 'relay' && feedInfo.feedType !== 'relays') {
|
||||||
feedInfo.feedType !== 'relay' &&
|
|
||||||
feedInfo.feedType !== 'relays' &&
|
|
||||||
feedInfo.feedType !== 'temporary'
|
|
||||||
) {
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import BookmarkList from '@/components/BookmarkList'
|
import BookmarkList from '@/components/BookmarkList'
|
||||||
import PostEditor from '@/components/PostEditor'
|
import PostEditor from '@/components/PostEditor'
|
||||||
import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
|
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout'
|
||||||
import { useFeed } from '@/providers/FeedProvider'
|
import { useFeed } from '@/providers/FeedProvider'
|
||||||
@@ -61,11 +60,7 @@ const NoteListPage = forwardRef((_, ref) => {
|
|||||||
<PrimaryPageLayout
|
<PrimaryPageLayout
|
||||||
pageName="home"
|
pageName="home"
|
||||||
ref={layoutRef}
|
ref={layoutRef}
|
||||||
titlebar={
|
titlebar={<NoteListPageTitlebar />}
|
||||||
<NoteListPageTitlebar
|
|
||||||
temporaryRelayUrls={feedInfo.feedType === 'temporary' ? relayUrls : []}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
displayScrollToTopButton
|
displayScrollToTopButton
|
||||||
>
|
>
|
||||||
{content}
|
{content}
|
||||||
@@ -75,16 +70,13 @@ const NoteListPage = forwardRef((_, ref) => {
|
|||||||
NoteListPage.displayName = 'NoteListPage'
|
NoteListPage.displayName = 'NoteListPage'
|
||||||
export default NoteListPage
|
export default NoteListPage
|
||||||
|
|
||||||
function NoteListPageTitlebar({ temporaryRelayUrls = [] }: { temporaryRelayUrls?: string[] }) {
|
function NoteListPageTitlebar() {
|
||||||
const { isSmallScreen } = useScreenSize()
|
const { isSmallScreen } = useScreenSize()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex gap-1 items-center h-full justify-between">
|
<div className="flex gap-1 items-center h-full justify-between">
|
||||||
<FeedButton className="flex-1 max-w-fit w-0" />
|
<FeedButton className="flex-1 max-w-fit w-0" />
|
||||||
<div className="shrink-0 flex gap-1 items-center">
|
<div className="shrink-0 flex gap-1 items-center">
|
||||||
{temporaryRelayUrls.length > 0 && (
|
|
||||||
<SaveRelayDropdownMenu urls={temporaryRelayUrls} atTitlebar />
|
|
||||||
)}
|
|
||||||
<SearchButton />
|
<SearchButton />
|
||||||
{isSmallScreen && <PostButton />}
|
{isSmallScreen && <PostButton />}
|
||||||
</div>
|
</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 SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
||||||
import { forwardRef } from 'react'
|
import { forwardRef } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
|
|
||||||
const NotFoundPage = forwardRef(({ index }: { index?: number }, ref) => {
|
const NotFoundPage = forwardRef(({ index }: { index?: number }, ref) => {
|
||||||
const { t } = useTranslation()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SecondaryPageLayout ref={ref} index={index} hideBackButton>
|
<SecondaryPageLayout ref={ref} index={index} hideBackButton>
|
||||||
<div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
|
<NotFound />
|
||||||
<div>{t('Lost in the void')} 🌌</div>
|
|
||||||
<div>(404)</div>
|
|
||||||
</div>
|
|
||||||
</SecondaryPageLayout>
|
</SecondaryPageLayout>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,34 +1,13 @@
|
|||||||
import NormalFeed from '@/components/NormalFeed'
|
import Relay from '@/components/Relay'
|
||||||
import RelayInfo from '@/components/RelayInfo'
|
import RelayPageControls from '@/components/RelayPageControls'
|
||||||
import SaveRelayDropdownMenu from '@/components/SaveRelayDropdownMenu'
|
|
||||||
import SearchInput from '@/components/SearchInput'
|
|
||||||
import { Button } from '@/components/ui/button'
|
|
||||||
import { useFetchRelayInfo } from '@/hooks'
|
|
||||||
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
||||||
import { normalizeUrl, simplifyUrl } from '@/lib/url'
|
import { normalizeUrl, simplifyUrl } from '@/lib/url'
|
||||||
import { Check, Copy, Link } from 'lucide-react'
|
import { forwardRef, useMemo } from 'react'
|
||||||
import { forwardRef, useEffect, useMemo, useState } from 'react'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import { toast } from 'sonner'
|
|
||||||
import NotFoundPage from '../NotFoundPage'
|
import NotFoundPage from '../NotFoundPage'
|
||||||
|
|
||||||
const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
|
const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number }, ref) => {
|
||||||
const { t } = useTranslation()
|
|
||||||
const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
|
const normalizedUrl = useMemo(() => (url ? normalizeUrl(url) : undefined), [url])
|
||||||
const { relayInfo } = useFetchRelayInfo(normalizedUrl)
|
|
||||||
const title = useMemo(() => (url ? simplifyUrl(url) : undefined), [url])
|
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) {
|
if (!normalizedUrl) {
|
||||||
return <NotFoundPage ref={ref} />
|
return <NotFoundPage ref={ref} />
|
||||||
@@ -42,54 +21,9 @@ const RelayPage = forwardRef(({ url, index }: { url?: string; index?: number },
|
|||||||
controls={<RelayPageControls url={normalizedUrl} />}
|
controls={<RelayPageControls url={normalizedUrl} />}
|
||||||
displayScrollToTopButton
|
displayScrollToTopButton
|
||||||
>
|
>
|
||||||
<div className="h-3 w-full" />
|
<Relay url={normalizedUrl} className="pt-3" />
|
||||||
<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 } : {} }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</SecondaryPageLayout>
|
</SecondaryPageLayout>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
RelayPage.displayName = 'RelayPage'
|
RelayPage.displayName = 'RelayPage'
|
||||||
export default 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 = {
|
type TFeedContext = {
|
||||||
feedInfo: TFeedInfo
|
feedInfo: TFeedInfo
|
||||||
relayUrls: string[]
|
relayUrls: string[]
|
||||||
temporaryRelayUrls: string[]
|
|
||||||
isReady: boolean
|
isReady: boolean
|
||||||
switchFeed: (
|
switchFeed: (
|
||||||
feedType: TFeedType,
|
feedType: TFeedType,
|
||||||
@@ -34,11 +33,9 @@ export const useFeed = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function FeedProvider({ children }: { children: React.ReactNode }) {
|
export function FeedProvider({ children }: { children: React.ReactNode }) {
|
||||||
const isFirstRenderRef = useRef(true)
|
|
||||||
const { pubkey, isInitialized } = useNostr()
|
const { pubkey, isInitialized } = useNostr()
|
||||||
const { relaySets, favoriteRelays } = useFavoriteRelays()
|
const { relaySets, favoriteRelays } = useFavoriteRelays()
|
||||||
const [relayUrls, setRelayUrls] = useState<string[]>([])
|
const [relayUrls, setRelayUrls] = useState<string[]>([])
|
||||||
const [temporaryRelayUrls, setTemporaryRelayUrls] = useState<string[]>([])
|
|
||||||
const [isReady, setIsReady] = useState(false)
|
const [isReady, setIsReady] = useState(false)
|
||||||
const [feedInfo, setFeedInfo] = useState<TFeedInfo>({
|
const [feedInfo, setFeedInfo] = useState<TFeedInfo>({
|
||||||
feedType: 'relay',
|
feedType: 'relay',
|
||||||
@@ -48,24 +45,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const init = async () => {
|
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) {
|
if (!isInitialized) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -106,7 +85,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
|||||||
feedType: TFeedType,
|
feedType: TFeedType,
|
||||||
options: {
|
options: {
|
||||||
activeRelaySetId?: string | null
|
activeRelaySetId?: string | null
|
||||||
temporaryRelayUrls?: string[] | null
|
|
||||||
pubkey?: string | null
|
pubkey?: string | null
|
||||||
relay?: string | null
|
relay?: string | null
|
||||||
} = {}
|
} = {}
|
||||||
@@ -195,26 +173,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
|||||||
setIsReady(true)
|
setIsReady(true)
|
||||||
return
|
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)
|
setIsReady(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -223,7 +181,6 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
|
|||||||
value={{
|
value={{
|
||||||
feedInfo,
|
feedInfo,
|
||||||
relayUrls,
|
relayUrls,
|
||||||
temporaryRelayUrls,
|
|
||||||
isReady,
|
isReady,
|
||||||
switchFeed
|
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 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 TFeedInfo = { feedType: TFeedType; id?: string }
|
||||||
|
|
||||||
export type TLanguage = 'en' | 'zh' | 'pl'
|
export type TLanguage = 'en' | 'zh' | 'pl'
|
||||||
|
|||||||
Reference in New Issue
Block a user