From 6465423ccb38f828f33ba96c34cf3473fc05c05d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 27 Nov 2022 23:29:45 +0100
Subject: [PATCH] Cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/event-preview.tsx      | 42 ++++++++++++-------
 app/soapbox/components/status-media.tsx       | 13 ++----
 .../event/components/event-action-button.tsx  |  8 ++--
 .../event/components/event-header.tsx         |  6 +--
 .../features/event/event-information.tsx      | 28 +++++++------
 .../events/components/event-carousel.tsx      |  4 +-
 app/soapbox/features/events/index.tsx         |  2 +-
 .../components/placeholder-event-preview.tsx  |  4 +-
 app/soapbox/normalizers/status.ts             | 26 ++++++++++--
 app/soapbox/reducers/compose_event.ts         |  4 +-
 10 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 74dd69021..2ee688e05 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -19,12 +19,13 @@ const messages = defineMessages({
 });
 
 interface IEventPreview {
-  status: StatusEntity,
-  className?: string,
-  hideAction?: boolean;
+  status: StatusEntity
+  className?: string
+  hideAction?: boolean
+  floatingAction?: boolean
 }
 
-const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction }) => {
+const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction, floatingAction = true }) => {
   const intl = useIntl();
 
   const me = useAppSelector((state) => state.me);
@@ -32,26 +33,37 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction }
   const account = status.account as AccountEntity;
   const event = status.event!;
 
-  const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
+  const banner = event.banner;
+
+  const action = !hideAction && (account.id === me ? (
+    <Button
+      size='sm'
+      theme={floatingAction ? 'secondary' : 'primary'}
+      to={`/@${account.acct}/events/${status.id}`}
+    >
+      <FormattedMessage id='event.manage' defaultMessage='Manage' />
+    </Button>
+  ) : (
+    <EventActionButton
+      status={status}
+      theme={floatingAction ? 'secondary' : 'primary'}
+    />
+  ));
 
   return (
     <div className={classNames('w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
       <div className='absolute top-28 right-3'>
-        {!hideAction && (account.id === me ? (
-          <Button
-            size='sm'
-            theme='secondary'
-            to={`/@${account.acct}/events/${status.id}`}
-          >
-            <FormattedMessage id='event.manage' defaultMessage='Manage' />
-          </Button>
-        ) : <EventActionButton status={status} />)}
+        {floatingAction && action}
       </div>
       <div className='bg-primary-200 dark:bg-gray-600 h-40'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />}
       </div>
       <Stack className='p-2.5' space={2}>
-        <Text weight='semibold'>{event.name}</Text>
+        <HStack space={2} alignItems='center' justifyContent='between'>
+          <Text weight='semibold' truncate>{event.name}</Text>
+
+          {!floatingAction && action}
+        </HStack>
 
         <div className='flex gap-y-1 gap-x-2 flex-wrap text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index a09ce171a..d1ca296e9 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -24,8 +24,6 @@ interface IStatusMedia {
   showMedia?: boolean,
   /** Callback when visibility is toggled (eg clicked through NSFW). */
   onToggleVisibility?: () => void,
-  /** Whether or not to hide image describer as 'Banner' */
-  excludeBanner?: boolean,
 }
 
 /** Render media attachments for a status. */
@@ -35,7 +33,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   onClick,
   showMedia = true,
   onToggleVisibility = () => { },
-  excludeBanner = false,
 }) => {
   const dispatch = useAppDispatch();
   const settings = useSettings();
@@ -43,10 +40,8 @@ const StatusMedia: React.FC<IStatusMedia> = ({
 
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
 
-  const mediaAttachments = excludeBanner ? status.media_attachments.filter(({ description, pleroma }) => description !== 'Banner' && pleroma.get('mime_type') !== 'text/html') : status.media_attachments;
-
-  const size = mediaAttachments.size;
-  const firstAttachment = mediaAttachments.first();
+  const size = status.media_attachments.size;
+  const firstAttachment = status.media_attachments.first();
 
   let media: JSX.Element | null = null;
 
@@ -76,7 +71,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     if (muted) {
       media = (
         <AttachmentThumbs
-          media={mediaAttachments}
+          media={status.media_attachments}
           onClick={onClick}
           sensitive={status.sensitive}
         />
@@ -147,7 +142,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         <Bundle fetchComponent={MediaGallery} loading={renderLoadingMediaGallery}>
           {(Component: any) => (
             <Component
-              media={mediaAttachments}
+              media={status.media_attachments}
               sensitive={status.sensitive}
               height={285}
               onOpenMedia={openMedia}
diff --git a/app/soapbox/features/event/components/event-action-button.tsx b/app/soapbox/features/event/components/event-action-button.tsx
index cbc186759..1c86e0181 100644
--- a/app/soapbox/features/event/components/event-action-button.tsx
+++ b/app/soapbox/features/event/components/event-action-button.tsx
@@ -6,6 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { Button } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
@@ -14,10 +15,11 @@ const messages = defineMessages({
 });
 
 interface IEventAction {
-  status: StatusEntity,
+  status: StatusEntity
+  theme?: ButtonThemes
 }
 
-const EventActionButton: React.FC<IEventAction> = ({ status }) => {
+const EventActionButton: React.FC<IEventAction> = ({ status, theme = 'secondary' }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -86,7 +88,7 @@ const EventActionButton: React.FC<IEventAction> = ({ status }) => {
   return (
     <Button
       size='sm'
-      theme='secondary'
+      theme={theme}
       icon={buttonIcon}
       onClick={buttonAction}
       disabled={buttonDisabled}
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 6a3f12611..6f59a49ea 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -1,3 +1,4 @@
+import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -86,15 +87,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const account = status.account as AccountEntity;
   const event = status.event;
-  const banner = status.media_attachments?.find(({ description }) => description === 'Banner');
+  const banner = event.banner;
 
   const username = account.username;
 
   const handleHeaderClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
     e.stopPropagation();
 
-    const index = status.media_attachments!.findIndex(({ description }) => description === 'Banner');
-    dispatch(openModal('MEDIA', { media: status.media_attachments, index }));
+    dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]) }));
   };
 
   const handleExportClick = () => {
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index dd9ce06e5..49382da25 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -4,8 +4,11 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
 import { openModal } from 'soapbox/actions/modals';
 import { fetchStatus } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing-indicator';
+import StatusContent from 'soapbox/components/status-content';
 import StatusMedia from 'soapbox/components/status-media';
+import TranslateButton from 'soapbox/components/translate-button';
 import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
 import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
@@ -107,10 +110,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   }, [status]);
 
   const renderLinks = useCallback(() => {
-    const links = status?.media_attachments.filter(({ pleroma }) => pleroma.get('mime_type') === 'text/html');
-
-    if (!links?.size) return null;
-
+    if (!status.event?.links.size) return null;
 
     return (
       <Stack space={1}>
@@ -118,11 +118,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.website' defaultMessage='External links' />
         </Text>
 
-        {links.map(link => (
+        {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
-              {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
+            <a href={link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+              {link.url.replace(/^https?:\/\//, '')}
             </a>
           </HStack>
         ))}
@@ -143,21 +143,23 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <Text size='xl' weight='bold'>
             <FormattedMessage id='event.description' defaultMessage='Description' />
           </Text>
-          <Text
-            className='break-words status__content'
-            size='sm'
-            dangerouslySetInnerHTML={{ __html: status.contentHtml }}
-          />
+
+          <StatusContent status={status} collapsable={false} translatable />
+
+          <TranslateButton status={status} />
         </Stack>
       )}
 
       <StatusMedia
         status={status}
-        excludeBanner
         showMedia={showMedia}
         onToggleVisibility={handleToggleMediaVisibility}
       />
 
+      {status.quote && status.pleroma.get('quote_visible', true) && (
+        <QuotedStatus statusId={status.quote as string} />
+      )}
+
       {renderEventLocation()}
 
       {renderEventDate()}
diff --git a/app/soapbox/features/events/components/event-carousel.tsx b/app/soapbox/features/events/components/event-carousel.tsx
index 5682c1a15..3f47c9b2b 100644
--- a/app/soapbox/features/events/components/event-carousel.tsx
+++ b/app/soapbox/features/events/components/event-carousel.tsx
@@ -22,7 +22,7 @@ const Event = ({ id }: { id: string }) => {
       className='w-full px-1'
       to={`/@${status.getIn(['account', 'acct'])}/events/${status.id}`}
     >
-      <EventPreview status={status} />
+      <EventPreview status={status} floatingAction={false} />
     </Link>
   );
 };
@@ -56,7 +56,6 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
       {index !== 0 && (
         <div className='z-10 absolute left-3 top-1/2 -mt-4'>
           <button
-            data-testid='prev-page'
             onClick={() => handleChangeIndex(index - 1)}
             className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
           >
@@ -70,7 +69,6 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
       {index !== statusIds.size - 1 && (
         <div className='z-10 absolute right-3 top-1/2 -mt-4'>
           <button
-            data-testid='next-page'
             onClick={() => handleChangeIndex(index + 1)}
             className='bg-white/50 dark:bg-gray-900/50 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
           >
diff --git a/app/soapbox/features/events/index.tsx b/app/soapbox/features/events/index.tsx
index 8115f10e0..039d60b69 100644
--- a/app/soapbox/features/events/index.tsx
+++ b/app/soapbox/features/events/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events';
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
index ad706c55e..486b0af0c 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
@@ -10,9 +10,7 @@ const PlaceholderEventPreview = () => {
 
   return (
     <div className='w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden animate-pulse text-primary-50 dark:text-primary-800'>
-      <div className='bg-primary-200 dark:bg-gray-600 h-40'>
-        {/* <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.bannerHeader)} />} */}
-      </div>
+      <div className='bg-primary-200 dark:bg-gray-600 h-40' />
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{generateText(eventNameLength)}</Text>
 
diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts
index 191947df3..1c3b68f42 100644
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@@ -32,6 +32,8 @@ export const EventRecord = ImmutableRecord({
   participants_count: 0,
   location: null as ImmutableMap<string, any> | null,
   join_state: null as EventJoinState | null,
+  banner: null as Attachment | null,
+  links: ImmutableList<Attachment>(),
 });
 
 // https://docs.joinmastodon.org/entities/status/
@@ -174,9 +176,27 @@ const fixSensitivity = (status: ImmutableMap<string, any>) => {
 // Normalize event
 const normalizeEvent = (status: ImmutableMap<string, any>) => {
   if (status.getIn(['pleroma', 'event'])) {
-    return status.set('event', EventRecord(status.getIn(['pleroma', 'event']) as ImmutableMap<string, any>));
-  } else {
-    return status.set('event', null);
+    const firstAttachment = status.get('media_attachments').first();
+    let banner = null;
+    let mediaAttachments = status.get('media_attachments');
+
+    if (firstAttachment && firstAttachment.description === 'Banner' && firstAttachment.type === 'image') {
+      banner = normalizeAttachment(firstAttachment);
+      mediaAttachments = mediaAttachments.shift();
+    }
+
+    const links = mediaAttachments.filter((attachment: Attachment) => attachment.pleroma.get('mime_type') === 'text/html');
+    mediaAttachments = mediaAttachments.filter((attachment: Attachment) => attachment.pleroma.get('mime_type') !== 'text/html');
+
+    const event = EventRecord(
+      (status.getIn(['pleroma', 'event']) as ImmutableMap<string, any>)
+        .set('banner', banner)
+        .set('links', links),
+    );
+
+    status
+      .set('event', event)
+      .set('media_attachments', mediaAttachments);
   }
 };
 
diff --git a/app/soapbox/reducers/compose_event.ts b/app/soapbox/reducers/compose_event.ts
index ab03d994d..f6ad00b21 100644
--- a/app/soapbox/reducers/compose_event.ts
+++ b/app/soapbox/reducers/compose_event.ts
@@ -25,7 +25,6 @@ import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers';
 import type {
   Attachment as AttachmentEntity,
   Location as LocationEntity,
-  Status as StatusEntity,
 } from 'soapbox/types/entities';
 
 export const ReducerRecord = ImmutableRecord({
@@ -90,11 +89,10 @@ export default function compose_event(state = ReducerRecord(), action: AnyAction
       return ReducerRecord({
         name: action.status.event.name,
         status: action.text,
-        // location: null as LocationEntity | null,
         start_time: new Date(action.status.event.start_time),
         end_time: action.status.event.end_time ? new Date(action.status.event.end_time) : null,
         approval_required: action.status.event.join_mode !== 'free',
-        banner: (action.status as StatusEntity).media_attachments.find(({ description }) => description === 'Banner') || null,
+        banner: action.status.event.banner || null,
         location: action.location ? normalizeLocation(action.location) : null,
         progress: 0,
         is_uploading: false,