From 5f0d1e865643ee3d25aa1fb9ddd663254b59343a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 17 Dec 2022 17:26:41 +0800
Subject: [PATCH] Refactor action buttons + optimistic UI

---
 src/components/status.css |  13 +--
 src/components/status.jsx | 197 ++++++++++++++++++++------------------
 2 files changed, 111 insertions(+), 99 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index 2be410d..731dfb4 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -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;
 }
 
diff --git a/src/components/status.jsx b/src/components/status.jsx
index d31f5f3..d445761 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -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;