34 lines
865 B
TypeScript
34 lines
865 B
TypeScript
|
import { useEffect, useState } from 'react'
|
||
|
|
import { MomentCard } from '../components/MomentCard'
|
||
|
|
import { listFeed } from '../api/moments'
|
||
|
|
import type { Moment } from '../api/types'
|
||
|
|
|
||
|
|
export function FeedPage() {
|
||
|
|
const [moments, setMoments] = useState<Moment[]>([])
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
listFeed()
|
||
|
|
.then((page) => setMoments(page.results))
|
||
|
|
.finally(() => setLoading(false))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
if (loading) return <div className="page-loading">Loading feed…</div>
|
||
|
|
|
||
|
|
if (moments.length === 0) {
|
||
|
|
return (
|
||
|
|
<div className="feed-empty">
|
||
|
|
<p>No Moments yet. Share something from your Library to get started.</p>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="feed-page">
|
||
|
|
{moments.map((moment) => (
|
||
|
|
<MomentCard key={moment.id} moment={moment} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|