soapbox/app/soapbox/components/announcements/announcement.tsx

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';

import type { Map as ImmutableMap } from 'immutable';
import type { Announcement as AnnouncementEntity } from 'soapbox/types/entities';

interface IAnnouncement {
  announcement: AnnouncementEntity
  addReaction: (id: string, name: string) => void
  removeReaction: (id: string, name: string) => void
  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
}

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();
  const hasTimeRange = startsAt && endsAt;
  const skipYear = hasTimeRange && startsAt.getFullYear() === endsAt.getFullYear() && endsAt.getFullYear() === now.getFullYear();
  const skipEndDate = hasTimeRange && startsAt.getDate() === endsAt.getDate() && startsAt.getMonth() === endsAt.getMonth() && startsAt.getFullYear() === endsAt.getFullYear();
  const skipTime = announcement.all_day;

  return (
    <Stack className='w-full' space={2}>
      {hasTimeRange && (
        <Text theme='muted'>
          <FormattedDate
            value={startsAt}
            hour12
            year={(skipYear || startsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
            month='short'
            day='2-digit'
            hour={skipTime ? undefined : 'numeric'}
            minute={skipTime ? undefined : '2-digit'}
          />
          {' '}
          -
          {' '}
          <FormattedDate
            value={endsAt}
            hour12
            year={(skipYear || endsAt.getFullYear() === now.getFullYear()) ? undefined : 'numeric'}
            month={skipEndDate ? undefined : 'short'}
            day={skipEndDate ? undefined : '2-digit'}
            hour={skipTime ? undefined : 'numeric'}
            minute={skipTime ? undefined : '2-digit'}
          />
        </Text>
      )}

      <AnnouncementContent announcement={announcement} />

      {features.announcementsReactions && (
        <ReactionsBar
          reactions={announcement.reactions}
          announcementId={announcement.id}
          addReaction={addReaction}
          removeReaction={removeReaction}
          emojiMap={emojiMap}
        />
      )}
    </Stack>
  );
};

export default Announcement;