Django/DRF + PostgreSQL/Redis/Celery backend with accounts, library, moments, and notifications apps; React/TypeScript/Vite frontend with Instagram-style sidebar nav, feed, profiles, nested comment replies, notifications, and photo/video upload with ffmpeg-generated posters. Co-Authored-By: Claude Sonnet 5 <[email protected]>
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>
|
|
)
|
|
}
|