simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better handling of failures

Browse source 
Some mastodon instances are getting hit hard
This commit is contained in:
Lim Chee Aun 2023-01-01 15:28:07 +08:00
parent 951c93a070
commit 2031e88d87
3 changed files with 149 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/pages/home.jsx
View file

@ -276,7 +276,19 @@ function Home({ hidden }) {
</ul> </ul>
)} )}
{uiState === 'error' && ( {uiState === 'error' && (
<p class="ui-state">Error loading statuses</p> <p class="ui-state">
Unable to load statuses
<br />
<br />
<button
type="button"
onClick={() => {
loadStatuses(true);
}}
>
Try again
</button>
</p>
)} )}
</> </>
)} )}

9
src/pages/notifications.jsx
View file

@ -402,7 +402,14 @@ function Notifications() {
</> </>
)} )}
{uiState === 'error' && ( {uiState === 'error' && (
<p class="ui-state">Error loading notifications</p> <p class="ui-state">
Unable to load notifications
<br />
<br />
<button type="button" onClick={() => loadNotifications(true)}>
Try again
</button>
</p>
)} )}
</> </>
)} )}

230
src/pages/status.jsx
View file

@ -103,7 +103,6 @@ function StatusPage({ id }) {
} catch (e) { } catch (e) {
console.error(e); console.error(e);
setUIState('error'); setUIState('error');
alert('Error fetching status');
return; return;
} }
} }
@ -345,114 +344,141 @@ function StatusPage({ id }) {
</Link> </Link>
</div> </div>
</header> </header>
<ul {!!statuses.length && heroStatus ? (
class={`timeline flat contextual grow ${ <ul
uiState === 'loading' ? 'loading' : '' class={`timeline flat contextual grow ${
}`} uiState === 'loading' ? 'loading' : ''
> }`}
{statuses.slice(0, limit).map((status) => { >
const { {statuses.slice(0, limit).map((status) => {
id: statusID, const {
ancestor, id: statusID,
descendant, ancestor,
thread, descendant,
replies, thread,
} = status; replies,
const isHero = statusID === id; } = status;
return ( const isHero = statusID === id;
<li return (
key={statusID} <li
ref={isHero ? heroStatusRef : null} key={statusID}
class={`${ancestor ? 'ancestor' : ''} ${ ref={isHero ? heroStatusRef : null}
descendant ? 'descendant' : '' class={`${ancestor ? 'ancestor' : ''} ${
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`} descendant ? 'descendant' : ''
> } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
{isHero ? ( >
<InView threshold={0.1} onChange={onView}> {isHero ? (
<Status statusID={statusID} withinContext size="l" /> <InView threshold={0.1} onChange={onView}>
</InView> <Status statusID={statusID} withinContext size="l" />
) : ( </InView>
<Link ) : (
class=" <Link
class="
status-link status-link
" "
href={`#/s/${statusID}`} href={`#/s/${statusID}`}
onClick={() => { onClick={() => {
userInitiated.current = true;
}}
>
<Status
statusID={statusID}
withinContext
size={thread || ancestor ? 'm' : 's'}
/>
{replies?.length > LIMIT && (
<div class="replies-link">
<Icon icon="comment" />{' '}
<span title={replies.length}>
{shortenNumber(replies.length)}
</span>
</div>
)}
</Link>
)}
{descendant &&
replies?.length > 0 &&
replies?.length <= LIMIT && (
<SubComments
hasManyStatuses={hasManyStatuses}
replies={replies}
onStatusLinkClick={() => {
userInitiated.current = true; userInitiated.current = true;
}} }}
/> >
<Status
statusID={statusID}
withinContext
size={thread || ancestor ? 'm' : 's'}
/>
{replies?.length > LIMIT && (
<div class="replies-link">
<Icon icon="comment" />{' '}
<span title={replies.length}>
{shortenNumber(replies.length)}
</span>
</div>
)}
</Link>
)} )}
{uiState === 'loading' && {descendant &&
isHero && replies?.length > 0 &&
!!heroStatus?.repliesCount && replies?.length <= LIMIT && (
!hasDescendants && ( <SubComments
<div class="status-loading"> hasManyStatuses={hasManyStatuses}
<Loader /> replies={replies}
</div> onStatusLinkClick={() => {
)} userInitiated.current = true;
{uiState === 'error' &&
isHero &&
!!heroStatus?.repliesCount &&
!hasDescendants && (
<div class="status-error">
Unable to load replies.
<br />
<button
type="button"
class="plain"
onClick={() => {
states.reloadStatusPage++;
}} }}
> />
Try again )}
</button> {uiState === 'loading' &&
</div> isHero &&
)} !!heroStatus?.repliesCount &&
!hasDescendants && (
<div class="status-loading">
<Loader />
</div>
)}
{uiState === 'error' &&
isHero &&
!!heroStatus?.repliesCount &&
!hasDescendants && (
<div class="status-error">
Unable to load replies.
<br />
<button
type="button"
class="plain"
onClick={() => {
states.reloadStatusPage++;
}}
>
Try again
</button>
</div>
)}
</li>
);
})}
{showMore > 0 && (
<li>
<button
type="button"
class="plain block"
disabled={uiState === 'loading'}
onClick={() => setLimit((l) => l + LIMIT)}
style={{ marginBlockEnd: '6em' }}
>
Show more&hellip;{' '}
<span class="tag">
{showMore > LIMIT ? `${LIMIT}+` : showMore}
</span>
</button>
</li> </li>
); )}
})} </ul>
{showMore > 0 && ( ) : (
<li> <>
<button {uiState === 'loading' && (
type="button" <ul class="timeline flat contextual grow loading">
class="plain block" <li>
disabled={uiState === 'loading'} <Status skeleton size="l" />
onClick={() => setLimit((l) => l + LIMIT)} </li>
style={{ marginBlockEnd: '6em' }} </ul>
> )}
Show more&hellip;{' '} {uiState === 'error' && (
<span class="tag"> <p class="ui-state">
{showMore > LIMIT ? `${LIMIT}+` : showMore} Unable to load status
</span> <br />
</button> <br />
</li> <button
)} type="button"
</ul> onClick={() => {
states.reloadStatusPage++;
}}
>
Try again
</button>
</p>
)}
</>
)}
</div> </div>
</div> </div>
); );