Simplify and robustify

This commit is contained in:
Lim Chee Aun 2023-01-21 20:21:16 +08:00
parent 81170c6d05
commit 6f4a5553ec

View file

@ -4,7 +4,6 @@ import Icon from '../components/Icon';
import Link from '../components/link'; import Link from '../components/link';
import Loader from '../components/Loader'; import Loader from '../components/Loader';
import Status from '../components/status'; import Status from '../components/status';
import { saveStatus } from '../utils/states';
import useTitle from '../utils/useTitle'; import useTitle from '../utils/useTitle';
const LIMIT = 40; const LIMIT = 40;
@ -15,21 +14,14 @@ function Bookmarks() {
const [uiState, setUIState] = useState('default'); const [uiState, setUIState] = useState('default');
const [showMore, setShowMore] = useState(false); const [showMore, setShowMore] = useState(false);
const bookmarksIterator = useRef(masto.v1.bookmarks.list({ limit: LIMIT })); const bookmarksIterator = useRef();
async function fetchBookmarks(firstLoad) { async function fetchBookmarks(firstLoad) {
console.log('fetchBookmarks', firstLoad); if (firstLoad || !bookmarksIterator.current) {
if (firstLoad) {
bookmarksIterator.current = masto.v1.bookmarks.list({ limit: LIMIT }); bookmarksIterator.current = masto.v1.bookmarks.list({ limit: LIMIT });
} }
const allBookmarks = await bookmarksIterator.current.next(); const allBookmarks = await bookmarksIterator.current.next();
if (allBookmarks.value?.length) { const bookmarksValue = allBookmarks.value;
const bookmarksValue = allBookmarks.value.map((status) => { if (bookmarksValue?.length) {
saveStatus(status, {
skipThreading: true,
override: false,
});
return status;
});
if (firstLoad) { if (firstLoad) {
setBookmarks(bookmarksValue); setBookmarks(bookmarksValue);
} else { } else {
@ -43,9 +35,7 @@ function Bookmarks() {
setUIState('loading'); setUIState('loading');
(async () => { (async () => {
try { try {
console.log('loadBookmarks', firstLoad);
const { done } = await fetchBookmarks(firstLoad); const { done } = await fetchBookmarks(firstLoad);
console.log('loadBookmarks', firstLoad);
setShowMore(!done); setShowMore(!done);
setUIState('default'); setUIState('default');
} catch (e) { } catch (e) {
@ -78,6 +68,9 @@ function Bookmarks() {
}); });
} }
}} }}
onDblClick={(e) => {
loadBookmarks(true);
}}
> >
<div class="header-side"> <div class="header-side">
<Link to="/" class="button plain"> <Link to="/" class="button plain">
@ -85,7 +78,9 @@ function Bookmarks() {
</Link> </Link>
</div> </div>
<h1>Bookmarks</h1> <h1>Bookmarks</h1>
<div class="header-side"></div>{' '} <div class="header-side">
<Loader hidden={uiState !== 'loading'} />
</div>
</header> </header>
{!!bookmarks.length ? ( {!!bookmarks.length ? (
<> <>
@ -98,7 +93,6 @@ function Bookmarks() {
</li> </li>
))} ))}
</ul> </ul>
{showMore && ( {showMore && (
<button <button
type="button" type="button"
@ -117,9 +111,13 @@ function Bookmarks() {
) )
)} )}
{uiState === 'loading' ? ( {uiState === 'loading' ? (
<div class="ui-state"> <ul class="timeline">
<Loader /> {Array.from({ length: 5 }).map((_, i) => (
</div> <li key={i}>
<Status skeleton />
</li>
))}
</ul>
) : uiState === 'error' ? ( ) : uiState === 'error' ? (
<p class="ui-state"> <p class="ui-state">
Unable to load bookmarks. Unable to load bookmarks.