78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { usePrimaryPage, useSecondaryPage } from '@/PageManager'
|
|
import RelaySimpleInfo from '@/components/RelaySimpleInfo'
|
|
import { Button } from '@/components/ui/button'
|
|
import { RECOMMENDED_RELAYS } from '@/constants'
|
|
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
|
|
import { toRelay } from '@/lib/link'
|
|
import relayInfoService from '@/services/relay-info.service'
|
|
import { TNip66RelayInfo } from '@/types'
|
|
import { ArrowRight, Server } from 'lucide-react'
|
|
import { forwardRef, useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
const HomePage = forwardRef(({ index }: { index?: number }, ref) => {
|
|
const { t } = useTranslation()
|
|
const { navigate } = usePrimaryPage()
|
|
const { push } = useSecondaryPage()
|
|
const [recommendedRelayInfos, setRecommendedRelayInfos] = useState<TNip66RelayInfo[]>([])
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
try {
|
|
const relays = await relayInfoService.getRelayInfos(RECOMMENDED_RELAYS)
|
|
setRecommendedRelayInfos(relays.filter(Boolean) as TNip66RelayInfo[])
|
|
} catch (error) {
|
|
console.error('Failed to fetch recommended relays:', error)
|
|
}
|
|
}
|
|
init()
|
|
}, [])
|
|
|
|
if (!recommendedRelayInfos.length) {
|
|
return (
|
|
<SecondaryPageLayout ref={ref} index={index} hideBackButton>
|
|
<div className="text-muted-foreground w-full h-screen flex items-center justify-center">
|
|
{t('Welcome! 🥳')}
|
|
</div>
|
|
</SecondaryPageLayout>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<SecondaryPageLayout
|
|
ref={ref}
|
|
index={index}
|
|
title={
|
|
<>
|
|
<Server />
|
|
<div>{t('Recommended relays')}</div>
|
|
</>
|
|
}
|
|
hideBackButton
|
|
>
|
|
<div className="px-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{recommendedRelayInfos.map((relayInfo) => (
|
|
<RelaySimpleInfo
|
|
key={relayInfo.url}
|
|
className="clickable h-auto p-3 rounded-lg border"
|
|
relayInfo={relayInfo}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
push(toRelay(relayInfo.url))
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="flex mt-2 justify-center">
|
|
<Button variant="ghost" onClick={() => navigate('explore')}>
|
|
<div>{t('Explore more')}</div>
|
|
<ArrowRight />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</SecondaryPageLayout>
|
|
)
|
|
})
|
|
HomePage.displayName = 'HomePage'
|
|
export default HomePage
|