Merge pull request #490 from cofacts/feature/media-article

Make website able to show image and can be replied
cofacts · May 29, 2022 · 2ac82d9 · 2ac82d9
2 parents 47818e1 + d68782b
commit 2ac82d9
Show file tree

Hide file tree

Showing 13 changed files with 388 additions and 134 deletions.
diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
@@ -84,6 +84,16 @@ const useStyles = makeStyles(theme => ({
   highlight: {
     color: theme.palette.primary[500],
   },
+  attachmentImage: {
+    width: '100%',
+    maxWidth: 336,
+    marginTop: 16,
+  },
+  textImageWrapper: {
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
 }));
 
 /**
@@ -93,7 +103,14 @@ const useStyles = makeStyles(theme => ({
  * @param {Highlights?} props.highlight - If given, display search snippet instead of reply text
  */
 function ArticleCard({ article, highlight = '' }) {
-  const { id, text, replyCount, replyRequestCount, createdAt } = article;
+  const {
+    id,
+    text,
+    attachmentUrl,
+    replyCount,
+    replyRequestCount,
+    createdAt,
+  } = article;
   const classes = useStyles();
   const highlightClasses = useHighlightStyles();
 
@@ -106,22 +123,33 @@ function ArticleCard({ article, highlight = '' }) {
               {timeAgo => t`First reported ${timeAgo}`}
             </TimeInfo>
           </Infos>
-          <div className={classes.flex}>
-            <div className={classes.infoBox}>
-              <div>
-                <h2>{+replyCount}</h2>
-                <span>{c('Info box').t`replies`}</span>
-              </div>
-              <div>
-                <h2>{+replyRequestCount}</h2>
-                <span>{c('Info box').t`reports`}</span>
+          <div className={classes.textImageWrapper}>
+            <div className={classes.flex}>
+              <div className={classes.infoBox}>
+                <div>
+                  <h2>{+replyCount}</h2>
+                  <span>{c('Info box').t`replies`}</span>
+                </div>
+                <div>
+                  <h2>{+replyRequestCount}</h2>
+                  <span>{c('Info box').t`reports`}</span>
+                </div>
               </div>
+              {(text || highlight) && (
+                <ExpandableText className={classes.content} lineClamp={3}>
+                  {highlight
+                    ? highlightSections(highlight, highlightClasses)
+                    : text}
+                </ExpandableText>
+              )}
             </div>
-            <ExpandableText className={classes.content} lineClamp={3}>
-              {highlight
-                ? highlightSections(highlight, highlightClasses)
-                : text}
-            </ExpandableText>
+            {attachmentUrl && (
+              <img
+                className={classes.attachmentImage}
+                src={attachmentUrl}
+                alt="image"
+              />
+            )}
           </div>
         </ListPageCard>
       </a>
@@ -134,6 +162,7 @@ ArticleCard.fragments = {
     fragment ArticleCard on Article {
       id
       text
+      attachmentUrl
       replyCount
       replyRequestCount
       createdAt

diff --git a/components/ListPageDisplays/ListPageCards.stories.js b/components/ListPageDisplays/ListPageCards.stories.js
@@ -56,5 +56,14 @@ export const ArticleCards = () => (
         ],
       }}
     />
+    <ArticleCard
+      article={{
+        id: 'id3',
+        attachmentUrl: 'https://placekitten.com/512/1000',
+        replyCount: 6,
+        replyRequestCount: 4,
+        createdAt: '2020-01-01T00:00:00Z',
+      }}
+    />
   </ListPageCards>
 );
diff --git a/components/ListPageDisplays/ReplySearchItem.js b/components/ListPageDisplays/ReplySearchItem.js
@@ -92,6 +92,10 @@ const useStyles = makeStyles(theme => ({
       marginBottom: 0,
     },
   },
+  attachmentImage: {
+    width: '100%',
+    maxWidth: 336,
+  },
 }));
 
 function RepliedArticleInfo({ article }) {
@@ -142,9 +146,18 @@ export default function ReplySearchItem({
       <Box p={{ xs: 2, md: 4.5 }}>
         <RepliedArticleInfo article={articleReply.article} />
         <div className={classes.flex}>
-          <ExpandableText className={classes.content} lineClamp={3}>
-            {nl2br(articleReply.article.text)}
-          </ExpandableText>
+          {articleReply.article.attachmentUrl && (
+            <img
+              className={classes.attachmentImage}
+              src={articleReply.article.attachmentUrl}
+              alt="image"
+            />
+          )}
+          {articleReply.article.text && (
+            <ExpandableText className={classes.content} lineClamp={3}>
+              {nl2br(articleReply.article.text)}
+            </ExpandableText>
+          )}
         </div>
         <Divider classes={{ root: classes.divider }} />
         <ReplyItem
@@ -181,12 +194,21 @@ export default function ReplySearchItem({
                     as={`/article/${article.id}`}
                     key={article.id}
                   >
-                    <a className={classes.otherArticleItem}>
+                    <div className={classes.otherArticleItem}>
                       <RepliedArticleInfo article={article} />
-                      <ExpandableText lineClamp={3}>
-                        {article.text}
-                      </ExpandableText>
-                    </a>
+                      {article.attachmentUrl && (
+                        <img
+                          className={classes.attachmentImage}
+                          src={article.attachmentUrl}
+                          alt="image"
+                        />
+                      )}
+                      {article.text && (
+                        <ExpandableText lineClamp={3}>
+                          {article.text}
+                        </ExpandableText>
+                      )}
+                    </div>
                   </Link>
                 ))}
             </DialogContent>
@@ -207,6 +229,7 @@ ReplySearchItem.fragments = {
         article {
           id
           text
+          attachmentUrl
           replyRequestCount
           createdAt
         }