import debounce from 'just-debounce-it'; import { Link } from 'preact-router/match'; import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'preact/hooks'; import { useSnapshot } from 'valtio'; import Icon from '../components/icon'; import Loader from '../components/loader'; import Status from '../components/status'; import htmlContentLength from '../utils/html-content-length'; import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; import store from '../utils/store'; import useTitle from '../utils/useTitle'; const LIMIT = 40; function StatusPage({ id }) { const snapStates = useSnapshot(states); const [statuses, setStatuses] = useState([]); const [uiState, setUIState] = useState('default'); const userInitiated = useRef(true); // Initial open is user-initiated const heroStatusRef = useRef(); const scrollableRef = useRef(); useEffect(() => { const onScroll = debounce(() => { // console.log('onScroll'); const { scrollTop } = scrollableRef.current; states.scrollPositions.set(id, scrollTop); }, 100); scrollableRef.current.addEventListener('scroll', onScroll, { passive: true, }); onScroll(); return () => { scrollableRef.current?.removeEventListener('scroll', onScroll); }; }, [id]); useEffect(() => { setUIState('loading'); const containsStatus = statuses.find((s) => s.id === id); if (!containsStatus) { // Case 1: On first load, or when navigating to a status that's not cached at all setStatuses([{ id }]); } else { const cachedStatuses = store.session.getJSON('statuses-' + id); if (cachedStatuses) { // Case 2: Looks like we've cached this status before, let's restore them to make it snappy const reallyCachedStatuses = cachedStatuses.filter( (s) => snapStates.statuses.has(s.id), // Some are not cached in the global state, so we need to filter them out ); setStatuses(reallyCachedStatuses); } else { // Case 3: Unknown state, could be a sub-comment. Let's slice off all descendant statuses after the hero status to be safe because they are custom-rendered with sub-comments etc const heroIndex = statuses.findIndex((s) => s.id === id); const slicedStatuses = statuses.slice(0, heroIndex + 1); setStatuses(slicedStatuses); } } (async () => { const hasStatus = snapStates.statuses.has(id); let heroStatus = snapStates.statuses.get(id); try { heroStatus = await masto.statuses.fetch(id); states.statuses.set(id, heroStatus); } catch (e) { // Silent fail if status is cached if (!hasStatus) { setUIState('error'); alert('Error fetching status'); } return; } try { const context = await masto.statuses.fetchContext(id); const { ancestors, descendants } = context; ancestors.forEach((status) => { states.statuses.set(status.id, status); }); const nestedDescendants = []; descendants.forEach((status) => { states.statuses.set(status.id, status); if (status.inReplyToAccountId === status.account.id) { // If replying to self, it's part of the thread, level 1 nestedDescendants.push(status); } else if (status.inReplyToId === heroStatus.id) { // If replying to the hero status, it's a reply, level 1 nestedDescendants.push(status); } else { // If replying to someone else, it's a reply to a reply, level 2 const parent = descendants.find((s) => s.id === status.inReplyToId); if (parent) { if (!parent.__replies) { parent.__replies = []; } parent.__replies.push(status); } else { // If no parent, it's probably a reply to a reply to a reply, level 3 console.warn('[LEVEL 3] No parent found for', status); } } }); console.log({ ancestors, descendants, nestedDescendants }); const allStatuses = [ ...ancestors.map((s) => ({ id: s.id, ancestor: true, accountID: s.account.id, })), { id, accountID: heroStatus.account.id }, ...nestedDescendants.map((s) => ({ id: s.id, accountID: s.account.id, descendant: true, thread: s.account.id === heroStatus.account.id, replies: s.__replies?.map((r) => r.id), })), ]; setUIState('default'); console.log({ allStatuses }); setStatuses(allStatuses); store.session.setJSON('statuses-' + id, allStatuses); } catch (e) { console.error(e); setUIState('error'); } })(); }, [id, snapStates.reloadStatusPage]); useLayoutEffect(() => { if (!statuses.length) return; const isLoading = uiState === 'loading'; if (userInitiated.current) { const hasAncestors = statuses.findIndex((s) => s.id === id) > 0; // Cannot use `ancestor` key because the hero state is dynamic if (!isLoading && hasAncestors) { // Case 1: User initiated, has ancestors, after statuses are loaded, SNAP to hero status console.log('Case 1'); heroStatusRef.current?.scrollIntoView(); } else if (isLoading && statuses.length > 1) { // Case 2: User initiated, while statuses are loading, SMOOTH-SCROLL to hero status console.log('Case 2'); heroStatusRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start', }); } } else { const scrollPosition = states.scrollPositions.get(id); if (scrollPosition && scrollableRef.current) { // Case 3: Not user initiated (e.g. back/forward button), restore to saved scroll position console.log('Case 3'); scrollableRef.current.scrollTop = scrollPosition; } } console.log('No case', { isLoading, userInitiated: userInitiated.current, statusesLength: statuses.length, // scrollPosition, }); if (!isLoading) { // Reset user initiated flag after statuses are loaded userInitiated.current = false; } }, [statuses, uiState]); const heroStatus = snapStates.statuses.get(id); const heroDisplayName = useMemo(() => { // Remove shortcodes from display name if (!heroStatus) return ''; const { account } = heroStatus; const div = document.createElement('div'); div.innerHTML = account.displayName; return div.innerText.trim(); }, [heroStatus]); const heroContentText = useMemo(() => { if (!heroStatus) return ''; const { spoilerText, content } = heroStatus; let text; if (spoilerText) { text = spoilerText; } else { const div = document.createElement('div'); div.innerHTML = content; text = div.innerText.trim(); } if (text.length > 64) { // "The title should ideally be less than 64 characters in length" // https://www.w3.org/Provider/Style/TITLE.html text = text.slice(0, 64) + '…'; } return text; }, [heroStatus]); useTitle( heroDisplayName && heroContentText ? `${heroDisplayName}: "${heroContentText}"` : 'Status', ); const prevRoute = states.history.findLast((h) => { return h === '/' || /notifications/i.test(h); }); const closeLink = `#${prevRoute || '/'}`; const [limit, setLimit] = useState(LIMIT); const showMore = useMemo(() => { // return number of statuses to show return statuses.length - limit; }, [statuses.length, limit]); const hasManyStatuses = statuses.length > LIMIT; const hasDescendants = statuses.some((s) => s.descendant); return (