From 7c148ed1cb45195e170b3c5945b3de455a59a378 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sun, 22 Sep 2024 20:54:11 +0200
Subject: [PATCH] Use new CW class in more places

---
 .../glitch/components/content_warning.tsx     |  4 +-
 .../glitch/components/status_content.jsx      | 68 ++++++-------------
 2 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/content_warning.tsx b/app/javascript/flavours/glitch/components/content_warning.tsx
index a4c1e6e43f..82f9ca83ed 100644
--- a/app/javascript/flavours/glitch/components/content_warning.tsx
+++ b/app/javascript/flavours/glitch/components/content_warning.tsx
@@ -6,7 +6,8 @@ export const ContentWarning: React.FC<{
   text: string;
   expanded?: boolean;
   onClick?: () => void;
-}> = ({ text, expanded, onClick }) => (
+  icons?: React.ReactNode[];
+}> = ({ text, expanded, onClick, icons }) => (
   <p>
     <span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
     <button
@@ -20,6 +21,7 @@ export const ContentWarning: React.FC<{
       ) : (
         <FormattedMessage id='status.show_more' defaultMessage='Show more' />
       )}
+      {icons}
     </button>
   </p>
 );
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index 634ab0db29..d6dfd9f490 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -14,6 +14,7 @@ import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
 import LinkIcon from '@/material-icons/400-24px/link.svg?react';
 import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
 import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
+import { ContentWarning } from 'flavours/glitch/components/content_warning';
 import { Icon } from 'flavours/glitch/components/icon';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
@@ -350,7 +351,7 @@ class StatusContent extends PureComponent {
     const renderTranslate = this.props.onTranslate && this.props.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
     const content = { __html: statusContent ?? getStatusContent(status) };
-    const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
+    const spoilerHtml = status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml');
     const language = status.getIn(['translation', 'language']) || status.get('language');
     const classNames = classnames('status__content', {
       'status__content--with-action': parseClick && !disabled,
@@ -375,45 +376,26 @@ class StatusContent extends PureComponent {
         </Permalink>
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      let toggleText = null;
-      if (hidden) {
-        toggleText = [
-          <FormattedMessage
-            id='status.show_more'
-            defaultMessage='Show more'
-            key='0'
-          />,
-        ];
-        if (mediaIcons) {
-          const mediaComponents = {
-            'link': LinkIcon,
-            'picture-o': ImageIcon,
-            'tasks': InsertChartIcon,
-            'video-camera': MovieIcon,
-            'music': MusicNoteIcon,
-          };
+      let spoilerIcons = [];
+      if (hidden && mediaIcons) {
+        const mediaComponents = {
+          'link': LinkIcon,
+          'picture-o': ImageIcon,
+          'tasks': InsertChartIcon,
+          'video-camera': MovieIcon,
+          'music': MusicNoteIcon,
+        };
 
-          mediaIcons.forEach((mediaIcon, idx) => {
-            toggleText.push(
-              <Icon
-                fixedWidth
-                className='status__content__spoiler-icon'
-                id={mediaIcon}
-                icon={mediaComponents[mediaIcon]}
-                aria-hidden='true'
-                key={`icon-${idx}`}
-              />,
-            );
-          });
-        }
-      } else {
-        toggleText = (
-          <FormattedMessage
-            id='status.show_less'
-            defaultMessage='Show less'
-            key='0'
+        spoilerIcons = mediaIcons.map((mediaIcon) => (
+          <Icon
+            fixedWidth
+            className='status__content__spoiler-icon'
+            id={mediaIcon}
+            icon={mediaComponents[mediaIcon]}
+            aria-hidden='true'
+            key={`icon-${mediaIcon}`}
           />
-        );
+        ));
       }
 
       if (hidden) {
@@ -422,15 +404,7 @@ class StatusContent extends PureComponent {
 
       return (
         <div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
-          <p
-            style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
-          >
-            <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
-            {' '}
-            <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
-              {toggleText}
-            </button>
-          </p>
+          <ContentWarning text={spoilerHtml} expanded={!hidden} onClick={this.handleSpoilerClick} icons={spoilerIcons} />
 
           {mentionsPlaceholder}