[Glitch] Fix spurious error and incorrect state change when adding a reaction twice

Port c06d2ff43718af5940987e219379094f1a2de180 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

2 files changed, 18 insertions, 4 deletions

diff --git a/app/javascript/flavours/glitch/actions/announcements.js b/app/javascript/flavours/glitch/actions/announcements.js
index b4e8cee2f..930493b6a 100644
--- a/app/javascript/flavours/glitch/actions/announcements.js
+++ b/app/javascript/flavours/glitch/actions/announcements.js
@@ -56,12 +56,27 @@ export const updateAnnouncements = announcement => ({
 });
 
 export const addReaction = (announcementId, name) => (dispatch, getState) => {
-  dispatch(addReactionRequest(announcementId, name));
+  const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId);
+
+  let alreadyAdded = false;
+
+  if (announcement) {
+    const reaction = announcement.get('reactions').find(x => x.get('name') === name);
+    if (reaction && reaction.get('me')) {
+      alreadyAdded = true;
+    }
+  }
+
+  if (!alreadyAdded) {
+    dispatch(addReactionRequest(announcementId, name, alreadyAdded));
+  }
 
   api(getState).put(`/api/v1/announcements/${announcementId}/reactions/${name}`).then(() => {
-    dispatch(addReactionSuccess(announcementId, name));
+    dispatch(addReactionSuccess(announcementId, name, alreadyAdded));
   }).catch(err => {
-    dispatch(addReactionFail(announcementId, name, err));
+    if (!alreadyAdded) {
+      dispatch(addReactionFail(announcementId, name, err));
+    }
   });
 };
 
diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss
index 6bf9e2a0c..00585cb1c 100644
--- a/app/javascript/flavours/glitch/styles/components/announcements.scss
+++ b/app/javascript/flavours/glitch/styles/components/announcements.scss
@@ -38,7 +38,6 @@
 
 .announcements {
   background: lighten($ui-base-color, 8%);
-  border-top: 1px solid $ui-base-color;
   font-size: 13px;
   display: flex;
   align-items: flex-end;