Show poll and attachments in edit history

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

app/soapbox/features/ui/components/compare_history_modal.tsx

@@ -1,10 +1,15 @@
+import classNames from 'classnames';
+import { List as ImmutableList } from 'immutable';
 import React, { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
 import { fetchHistory } from 'soapbox/actions/history';
-import { Modal, Spinner, Text } from 'soapbox/components/ui';
+import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
+import { HStack, Modal, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities';
+
 interface ICompareHistoryModal {
   onClose: (string: string) => void,
   statusId: string,
@@ -14,7 +19,8 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
   const dispatch = useAppDispatch();
 
   const loading = useAppSelector(state => state.history.getIn([statusId, 'loading']));
-  const versions = useAppSelector<any>(state => state.history.getIn([statusId, 'items']));
+  // @ts-ignore
+  const versions = useAppSelector<ImmutableList<StatusEditEntity>>(state => state.history.getIn([statusId, 'items']));
 
   const onClickClose = () => {
     onClose('COMPARE_HISTORY');
@@ -31,10 +37,14 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
   } else {
     body = (
       <div className='divide-y divide-solid divide-gray-200 dark:divide-slate-700'>
-        {versions?.map((version: any) => {
+        {versions?.map((version) => {
           const content = { __html: version.contentHtml };
           const spoilerContent = { __html: version.spoilerHtml };
 
+          const poll = typeof version.poll !== 'string' && version.poll;
+
+          console.log(version.toJS());
+
           return (
             <div className='flex flex-col py-2 first:pt-0 last:pb-0'>
               {version.spoiler_text?.length > 0 && (
@@ -43,7 +53,36 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
                   <hr />
                 </>
               )}
+
               <div className='status__content' dangerouslySetInnerHTML={content} />
+
+              {poll && (
+                <div className='poll'>
+                  <Stack>
+                    {version.poll.options.map((option: any) => (
+                      <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
+                        <span
+                          className={classNames('inline-block w-4 h-4 flex-none mr-2.5 border border-solid border-primary-600 rounded-full', {
+                            'rounded': poll.multiple,
+                          })}
+                          tabIndex={0}
+                          role={poll.multiple ? 'checkbox' : 'radio'}
+                        />
+
+                        <span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
+                      </HStack>
+                    ))}
+                  </Stack>
+                </div>
+              )}
+
+              {version.media_attachments.size > 0 && (
+                <AttachmentThumbs
+                  compact
+                  media={version.media_attachments}
+                />
+              )}
+
               <Text align='right' tag='span' theme='muted' size='sm'>
                 <FormattedDate value={new Date(version.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
               </Text>

app/soapbox/normalizers/status_edit.ts

@@ -17,7 +17,7 @@ import { stripCompatibilityFeatures } from 'soapbox/utils/html';
 import { makeEmojiMap } from 'soapbox/utils/normalizers';
 
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
-import type { Account, Attachment, Emoji, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, Attachment, Emoji, EmbeddedEntity, Poll } from 'soapbox/types/entities';
 
 export const StatusEditRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account | ReducerAccount>,
@@ -26,6 +26,7 @@ export const StatusEditRecord = ImmutableRecord({
   emojis: ImmutableList<Emoji>(),
   favourited: false,
   media_attachments: ImmutableList<Attachment>(),
+  poll: null as EmbeddedEntity<Poll>,
   sensitive: false,
   spoiler_text: '',
 

app/soapbox/types/entities.ts

@@ -11,6 +11,7 @@ import {
   NotificationRecord,
   PollRecord,
   PollOptionRecord,
+  StatusEditRecord,
   StatusRecord,
 } from 'soapbox/normalizers';
 
@@ -27,6 +28,7 @@ type Mention = ReturnType<typeof MentionRecord>;
 type Notification = ReturnType<typeof NotificationRecord>;
 type Poll = ReturnType<typeof PollRecord>;
 type PollOption = ReturnType<typeof PollOptionRecord>;
+type StatusEdit = ReturnType<typeof StatusEditRecord>;
 
 interface Account extends ReturnType<typeof AccountRecord> {
   // HACK: we can't do a circular reference in the Record definition itself,
@@ -58,6 +60,7 @@ export {
   Poll,
   PollOption,
   Status,
+  StatusEdit,
 
   // Utility types
   APIEntity,