Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-22 16:46:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

Refactor action buttons + optimistic UI

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-17 17:26:41 +08:00
parent 1c18184ef4
commit 5f0d1e8656
2 changed files with 111 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/status.css
View file

@ -294,6 +294,7 @@
}
.status .media-audio {
border: 0;
min-height: 0;
}
.status .media-audio audio {
width: 100%;
@ -471,7 +472,7 @@ a.card:hover {
.status .actions > button.plain.reblog-button:hover {
color: var(--reblog-color);
}
.status .actions > button.plain.reblog-button.reblogged {
.status .actions > button.plain.reblog-button.checked {
color: var(--reblog-color);
border-color: var(--reblog-color);
}
@ -490,13 +491,13 @@ a.card:hover {
opacity: 0;
}
}
.status .actions > button.plain.reblog-button.reblogged .icon {
.status .actions > button.plain.reblog-button.checked .icon {
animation: reblogged 1s ease-in-out;
}
.status .actions > button.plain.favourite-button:hover {
color: var(--favourite-color);
}
.status .actions > button.plain.favourite-button.favourited {
.status .actions > button.plain.favourite-button.checked {
color: var(--favourite-color);
border-color: var(--favourite-color);
}
@ -518,11 +519,11 @@ a.card:hover {
opacity: 0;
}
}
.status .actions > button.plain.favourite-button.favourited .icon {
.status .actions > button.plain.favourite-button.checked .icon {
transform-origin: bottom center;
animation: hearted 1s ease-in-out;
}
.status .actions > button.plain.bookmark-button.bookmarked {
.status .actions > button.plain.bookmark-button.checked {
color: var(--link-color);
border-color: var(--link-color);
}
@ -544,7 +545,7 @@ a.card:hover {
opacity: 1;
}
}
.status .actions > button.plain.bookmark-button.bookmarked .icon {
.status .actions > button.plain.bookmark-button.checked .icon {
animation: bookmarked 1s ease-in-out;
}

197
src/components/status.jsx
View file

@ -857,42 +857,35 @@ function Status({
)}
</div>
<div class="actions">
<button
type="button"
title="Comment"
class="plain reply-button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
<StatusButton
title="Reply"
alt="Comments"
class="reply-button"
icon="comment"
count={repliesCount}
onClick={() => {
states.showCompose = {
replyToStatus: status,
};
}}
>
<Icon icon="comment" size="l" alt="Reply" />
{!!repliesCount && (
<>
{' '}
<small>{shortenNumber(repliesCount)}</small>
</>
)}
</button>
/>
{/* TODO: if visibility = private, only can reblog own statuses */}
{visibility !== 'direct' && (
<button
type="button"
title={reblogged ? 'Unboost' : 'Boost'}
class={`plain reblog-button ${reblogged ? 'reblogged' : ''}`}
disabled={actionsUIState === 'boost-loading'}
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
const yes = confirm(
reblogged ? 'Unboost this status?' : 'Boost this status?',
);
if (!yes) return;
setActionsUIState('boost-loading');
<StatusButton
checked={reblogged}
title={['Boost', 'Unboost']}
alt={['Boost', 'Boosted']}
class="reblog-button"
icon="rocket"
count={reblogsCount}
onClick={async () => {
try {
// Optimistic
states.statuses.set(id, {
...status,
reblogged: !reblogged,
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
});
if (reblogged) {
const newStatus = await masto.statuses.unreblog(id);
states.statuses.set(newStatus.id, newStatus);
@ -905,38 +898,26 @@ function Status({
);
}
} catch (e) {
alert(e);
console.error(e);
} finally {
setActionsUIState(null);
}
}}
>
<Icon
icon="rocket"
size="l"
alt={reblogged ? 'Boosted' : 'Boost'}
/>
{!!reblogsCount && (
<>
{' '}
<small>{shortenNumber(reblogsCount)}</small>
</>
)}
</button>
/>
)}
<button
type="button"
title={favourited ? 'Unfavourite' : 'Favourite'}
class={`plain favourite-button ${
favourited ? 'favourited' : ''
}`}
disabled={actionsUIState === 'favourite-loading'}
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
setActionsUIState('favourite-loading');
<StatusButton
checked={favourited}
title={['Favourite', 'Unfavourite']}
alt={['Favourite', 'Favourited']}
class="favourite-button"
icon="heart"
count={favouritesCount}
onClick={async () => {
try {
// Optimistic
states.statuses.set(statusID, {
...status,
favourited: !favourited,
favouritesCount: favouritesCount + (favourited ? -1 : 1),
});
if (favourited) {
const newStatus = await masto.statuses.unfavourite(id);
states.statuses.set(newStatus.id, newStatus);
@ -945,37 +926,23 @@ function Status({
states.statuses.set(newStatus.id, newStatus);
}
} catch (e) {
alert(e);
console.error(e);
} finally {
setActionsUIState(null);
}
}}
>
<Icon
icon="heart"
size="l"
alt={favourited ? 'Favourited' : 'Favourite'}
/>
{!!favouritesCount && (
<>
{' '}
<small>{shortenNumber(favouritesCount)}</small>
</>
)}
</button>
<button
type="button"
title={bookmarked ? 'Unbookmark' : 'Bookmark'}
class={`plain bookmark-button ${
bookmarked ? 'bookmarked' : ''
}`}
disabled={actionsUIState === 'bookmark-loading'}
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
setActionsUIState('bookmark-loading');
/>
<StatusButton
checked={bookmarked}
title={['Bookmark', 'Unbookmark']}
alt={['Bookmark', 'Bookmarked']}
class="bookmark-button"
icon="bookmark"
onClick={async () => {
try {
// Optimistic
states.statuses.set(statusID, {
...status,
bookmarked: !bookmarked,
});
if (bookmarked) {
const newStatus = await masto.statuses.unbookmark(id);
states.statuses.set(newStatus.id, newStatus);
@ -984,19 +951,10 @@ function Status({
states.statuses.set(newStatus.id, newStatus);
}
} catch (e) {
alert(e);
console.error(e);
} finally {
setActionsUIState(null);
}
}}
>
<Icon
icon="bookmark"
size="l"
alt={bookmarked ? 'Bookmarked' : 'Bookmark'}
/>
</button>
/>
{isSelf && (
<span class="menu-container">
<button type="button" title="More" class="plain more-button">
@ -1156,4 +1114,57 @@ function Status({
);
}
function StatusButton({
checked,
count,
class: className,
title,
alt,
icon,
onClick,
...props
}) {
if (typeof title === 'string') {
title = [title, title];
}
if (typeof alt === 'string') {
alt = [alt, alt];
}
const [buttonTitle, setButtonTitle] = useState(title[0] || '');
const [iconAlt, setIconAlt] = useState(alt[0] || '');
useEffect(() => {
if (checked) {
setButtonTitle(title[1] || '');
setIconAlt(alt[1] || '');
} else {
setButtonTitle(title[0] || '');
setIconAlt(alt[0] || '');
}
}, [checked, title, alt]);
return (
<button
type="button"
title={buttonTitle}
class={`plain ${className} ${checked ? 'checked' : ''}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onClick(e);
}}
{...props}
>
<Icon icon={icon} size="l" alt={iconAlt} />
{!!count && (
<>
{' '}
<small>{shortenNumber(count)}</small>
</>
)}
</button>
);
}
export default Status;