import { Link } from 'preact-router/match'; import { useEffect, useRef, useState } from 'preact/hooks'; import { InView } from 'react-intersection-observer'; import { useSnapshot } from 'valtio'; import Icon from '../components/icon'; import Loader from '../components/loader'; import Status from '../components/status'; import states from '../utils/states'; const LIMIT = 20; function Home({ hidden }) { const snapStates = useSnapshot(states); const [uiState, setUIState] = useState('default'); const [showMore, setShowMore] = useState(false); const homeIterator = useRef( masto.v1.timelines.listHome({ limit: LIMIT, }), ); async function fetchStatuses(firstLoad) { if (firstLoad) { // Reset iterator homeIterator.current = masto.v1.timelines.listHome({ limit: LIMIT, }); } const allStatuses = await homeIterator.current.next(); if (allStatuses.value <= 0) { return { done: true }; } const homeValues = allStatuses.value.map((status) => { states.statuses.set(status.id, status); if (status.reblog) { states.statuses.set(status.reblog.id, status.reblog); } return { id: status.id, reblog: status.reblog?.id, reply: !!status.inReplyToAccountId, }; }); if (firstLoad) { states.home = homeValues; } else { states.home.push(...homeValues); } states.homeLastFetchTime = Date.now(); return allStatuses; } const loadStatuses = (firstLoad) => { setUIState('loading'); (async () => { try { const { done } = await fetchStatuses(firstLoad); setShowMore(!done); setUIState('default'); } catch (e) { console.warn(e); setUIState('error'); } })(); }; useEffect(() => { loadStatuses(true); }, []); const scrollableRef = useRef(); return ( ); } export default Home;