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

Loading/disabled state for actions (boost, favourite, bookmark)

Browse source 
Also catch any errors and alert them
This commit is contained in:
Lim Chee Aun 2022-12-10 18:23:11 +08:00
parent 3778a11629
commit 33c88d648a
1 changed files with 37 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/status.jsx
View file

@ -488,6 +488,8 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
); );
} }
const [actionsUIState, setActionsUIState] = useState(null); // boost-loading, favourite-loading, bookmark-loading
return ( return (
<div <div
class={`status ${ class={`status ${
@ -668,6 +670,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
type="button" type="button"
title={reblogged ? 'Unboost' : 'Boost'} title={reblogged ? 'Unboost' : 'Boost'}
class={`plain reblog-button ${reblogged ? 'reblogged' : ''}`} class={`plain reblog-button ${reblogged ? 'reblogged' : ''}`}
disabled={actionsUIState === 'boost-loading'}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -675,13 +678,24 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
reblogged ? 'Unboost this status?' : 'Boost this status?', reblogged ? 'Unboost this status?' : 'Boost this status?',
); );
if (!yes) return; if (!yes) return;
if (reblogged) { setActionsUIState('boost-loading');
const newStatus = await masto.statuses.unreblog(id); try {
states.statuses.set(newStatus.id, newStatus); if (reblogged) {
} else { const newStatus = await masto.statuses.unreblog(id);
const newStatus = await masto.statuses.reblog(id); states.statuses.set(newStatus.id, newStatus);
states.statuses.set(newStatus.id, newStatus); } else {
states.statuses.set(newStatus.reblog.id, newStatus.reblog); const newStatus = await masto.statuses.reblog(id);
states.statuses.set(newStatus.id, newStatus);
states.statuses.set(
newStatus.reblog.id,
newStatus.reblog,
);
}
} catch (e) {
alert(e);
console.error(e);
} finally {
setActionsUIState(null);
} }
}} }}
> >
@ -702,9 +716,11 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
type="button" type="button"
title={favourited ? 'Unfavourite' : 'Favourite'} title={favourited ? 'Unfavourite' : 'Favourite'}
class={`plain favourite-button ${favourited ? 'favourited' : ''}`} class={`plain favourite-button ${favourited ? 'favourited' : ''}`}
disabled={actionsUIState === 'favourite-loading'}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setActionsUIState('favourite-loading');
try { try {
if (favourited) { if (favourited) {
const newStatus = await masto.statuses.unfavourite(id); const newStatus = await masto.statuses.unfavourite(id);
@ -713,7 +729,12 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
const newStatus = await masto.statuses.favourite(id); const newStatus = await masto.statuses.favourite(id);
states.statuses.set(newStatus.id, newStatus); states.statuses.set(newStatus.id, newStatus);
} }
} catch (e) {} } catch (e) {
alert(e);
console.error(e);
} finally {
setActionsUIState(null);
}
}} }}
> >
<Icon <Icon
@ -732,9 +753,11 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
type="button" type="button"
title={bookmarked ? 'Unbookmark' : 'Bookmark'} title={bookmarked ? 'Unbookmark' : 'Bookmark'}
class={`plain bookmark-button ${bookmarked ? 'bookmarked' : ''}`} class={`plain bookmark-button ${bookmarked ? 'bookmarked' : ''}`}
disabled={actionsUIState === 'bookmark-loading'}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setActionsUIState('bookmark-loading');
try { try {
if (bookmarked) { if (bookmarked) {
const newStatus = await masto.statuses.unbookmark(id); const newStatus = await masto.statuses.unbookmark(id);
@ -743,7 +766,12 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
const newStatus = await masto.statuses.bookmark(id); const newStatus = await masto.statuses.bookmark(id);
states.statuses.set(newStatus.id, newStatus); states.statuses.set(newStatus.id, newStatus);
} }
} catch (e) {} } catch (e) {
alert(e);
console.error(e);
} finally {
setActionsUIState(null);
}
}} }}
> >
<Icon <Icon