Disable announcements reactions on Pleroma

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/announcements.ts

@@ -1,4 +1,5 @@
-import api from '../api';
+import api from 'soapbox/api';
+import { getFeatures } from 'soapbox/utils/features';
 
 import { importFetchedStatuses } from './importer';
 
@@ -32,6 +33,11 @@ const noOp = () => {};
 
 export const fetchAnnouncements = (done = noOp) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
+    const { instance } = getState();
+    const features = getFeatures(instance);
+
+    if (!features.announcements) return null;
+
     dispatch(fetchAnnouncementsRequest());
 
     return api(getState).get('/api/v1/announcements').then(response => {

app/soapbox/components/announcements/announcement.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedDate } from 'react-intl';
 
 import { Stack, Text } from 'soapbox/components/ui';
+import { useFeatures } from 'soapbox/hooks';
 
 import AnnouncementContent from './announcement-content';
 import ReactionsBar from './reactions-bar';
@@ -17,6 +18,8 @@ interface IAnnouncement {
 }
 
 const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, removeReaction, emojiMap }) => {
+  const features = useFeatures();
+
   const startsAt = announcement.starts_at && new Date(announcement.starts_at);
   const endsAt = announcement.ends_at && new Date(announcement.ends_at);
   const now = new Date();
@@ -26,35 +29,35 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
   const skipTime = announcement.all_day;
 
   return (
-    <div>
-      <Stack space={2}>
-        {hasTimeRange && (
-          <Text theme='muted'>
-            <FormattedDate
-              value={startsAt}
-              hour12={false}
-              year={(skipYear || startsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
-              month='short'
-              day='2-digit'
-              hour={skipTime ? undefined : '2-digit'} minute={skipTime ? undefined : '2-digit'}
-            />
-            {' '}
-            -
-            {' '}
-            <FormattedDate
-              value={endsAt}
-              hour12={false}
-              year={(skipYear || endsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
-              month={skipEndDate ? undefined : 'short'}
-              day={skipEndDate ? undefined : '2-digit'}
-              hour={skipTime ? undefined : '2-digit'}
-              minute={skipTime ? undefined : '2-digit'}
-            />
-          </Text>
-        )}
+    <Stack className='w-full' space={2}>
+      {hasTimeRange && (
+        <Text theme='muted'>
+          <FormattedDate
+            value={startsAt}
+            hour12={false}
+            year={(skipYear || startsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
+            month='short'
+            day='2-digit'
+            hour={skipTime ? undefined : '2-digit'} minute={skipTime ? undefined : '2-digit'}
+          />
+          {' '}
+          -
+          {' '}
+          <FormattedDate
+            value={endsAt}
+            hour12={false}
+            year={(skipYear || endsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
+            month={skipEndDate ? undefined : 'short'}
+            day={skipEndDate ? undefined : '2-digit'}
+            hour={skipTime ? undefined : '2-digit'}
+            minute={skipTime ? undefined : '2-digit'}
+          />
+        </Text>
+      )}
 
-        <AnnouncementContent announcement={announcement} />
+      <AnnouncementContent announcement={announcement} />
 
+      {features.announcementsReactions && (
         <ReactionsBar
           reactions={announcement.reactions}
           announcementId={announcement.id}
@@ -62,8 +65,8 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, remo
           removeReaction={removeReaction}
           emojiMap={emojiMap}
         />
-      </Stack>
-    </div>
+      )}
+    </Stack>
   );
 };
 

app/soapbox/components/announcements/announcements-panel.tsx

@@ -45,7 +45,7 @@ const AnnouncementsPanel = () => {
             />
           )).reverse()}
         </ReactSwipeableViews>
-        {announcements.size > 2 && (
+        {announcements.size > 1 && (
           <HStack space={2} alignItems='center' justifyContent='center' className='relative'>
             {announcements.map((_, i) => (
               <button

app/soapbox/utils/features.ts

@@ -142,11 +142,25 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     accountWebsite: v.software === TRUTHSOCIAL,
 
+    /**
+     * Can display announcements set by admins.
+     * @see GET /api/v1/announcements
+     * @see POST /api/v1/announcements/:id/dismiss
+     * @see {@link https://docs.joinmastodon.org/methods/announcements/}
+     */
     announcements: any([
       v.software === MASTODON && gte(v.compatVersion, '3.1.0'),
       v.software === PLEROMA && gte(v.version, '2.2.49'),
     ]),
 
+    /**
+     * Can emoji react to announcements set by admins.
+     * @see PUT /api/v1/announcements/:id/reactions/:name
+     * @see DELETE /api/v1/announcements/:id/reactions/:name
+     * @see {@link https://docs.joinmastodon.org/methods/announcements/}
+     */
+    announcementsReactions: v.software === MASTODON && gte(v.compatVersion, '3.1.0'),
+
     /**
      * Set your birthday and view upcoming birthdays.
      * @see GET /api/v1/pleroma/birthdays