12 lines
2.0 KiB
TypeScript
12 lines
2.0 KiB
TypeScript
import {useState} from "react"
|
|
import {Text,TextInput} from "react-native"
|
|
import {useQuery} from "@tanstack/react-query"
|
|
import {Screen,Title,Body,Panel,Button,ErrorMessage,EmptyState} from "../src/components/ui"
|
|
import {useSession} from "../src/state/session"
|
|
type Instrument={id:string;symbol:string;exchange:string;name:string;price:string;observed_at:string;received_at:string}
|
|
export default function Market(){
|
|
const {session,client}=useSession(),[search,setSearch]=useState(""),[query,setQuery]=useState("")
|
|
const stocks=useQuery({queryKey:["market",session?.user.id,query],enabled:!!session,queryFn:({signal})=>client<Instrument[]>(`/api/v1/instruments?q=${encodeURIComponent(query)}`,{signal}),refetchInterval:60000})
|
|
return <Screen><Title>A 股行情</Title><Body>公开行情数据 · 开发研究。报价每五分钟同步，以下时间为供应商行情时间。休市、停牌或源不可用时，快照不代表当前可交易价格。</Body><TextInput accessibilityLabel="搜索股票" placeholder="股票代码或名称" value={search} onChangeText={setSearch} style={{borderWidth:1,borderColor:"#e5e5ec",borderRadius:12,padding:14,backgroundColor:"#fff",color:"#1b1b20"}}/><Button title="搜索" onPress={()=>setQuery(search.trim())}/><Button secondary disabled={stocks.isFetching} title={stocks.isFetching?"读取中…":"刷新行情"} onPress={()=>void stocks.refetch()}/>{stocks.error&&<ErrorMessage message={stocks.error.message}/>}{stocks.data?.length===0&&<EmptyState title="暂无行情" detail="行情源启用后，后台会自动同步；也可以更换搜索条件。"/>}{stocks.data?.map(v=><Panel key={v.id}><Text style={{fontSize:18,fontWeight:"600",color:"#1b1b20"}}>{v.name} · {v.symbol}</Text><Title>{v.price==="0.00"?"无有效报价":v.price+" 元"}</Title><Body>{v.exchange} · 行情时间 {new Date(v.observed_at).toLocaleString("zh-CN")}</Body>{Date.now()-Date.parse(v.observed_at)>5*60000&&<Body>历史快照，当前价格尚未更新。</Body>}</Panel>)}</Screen>
|
|
}
|