import './generic-accounts.css'; import { useEffect, useState } from 'preact/hooks'; import { InView } from 'react-intersection-observer'; import { useSnapshot } from 'valtio'; import states from '../utils/states'; import AccountBlock from './account-block'; import Icon from './icon'; import Loader from './loader'; export default function GenericAccounts({ onClose = () => {} }) { const snapStates = useSnapshot(states); const [uiState, setUIState] = useState('default'); const [accounts, setAccounts] = useState([]); const [showMore, setShowMore] = useState(false); if (!snapStates.showGenericAccounts) { return null; } const { heading, fetchAccounts, accounts: staticAccounts, showReactions, } = snapStates.showGenericAccounts; const loadAccounts = (firstLoad) => { if (!fetchAccounts) return; if (firstLoad) setAccounts([]); setUIState('loading'); (async () => { try { const { done, value } = await fetchAccounts(firstLoad); if (Array.isArray(value)) { if (firstLoad) { setAccounts(value); } else { setAccounts((prev) => [...prev, ...value]); } setShowMore(!done); } else { setShowMore(false); } setUIState('default'); } catch (e) { console.error(e); setUIState('error'); } })(); }; useEffect(() => { if (staticAccounts?.length > 0) { setAccounts(staticAccounts); } else { loadAccounts(true); } }, [staticAccounts, fetchAccounts]); return (

{heading || 'Accounts'}

{accounts.length > 0 ? ( <> {uiState === 'default' ? ( showMore ? ( { if (inView) { loadAccounts(); } }} > ) : (

The end.

) ) : ( uiState === 'loading' && (

) )} ) : uiState === 'loading' ? (

) : uiState === 'error' ? (

Error loading accounts

) : (

Nothing to show

)}
); }