Merge 57b87e9 into 7429b06

cofacts · Oct 10, 2022 · 9fd21df · 9fd21df
2 parents 7429b06 + 57b87e9
commit 9fd21df
Show file tree

Hide file tree

Showing 23 changed files with 1,179 additions and 266 deletions.
diff --git a/components/ListPageControls/ArticleTypeFilter.js b/components/ListPageControls/ArticleTypeFilter.js
@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { useRouter } from 'next/router';
+import { t } from 'ttag';
+import BaseFilter from './BaseFilter';
+import { goToUrlQueryAndResetPagination } from 'lib/listPage';
+
+/**
+ * URL param name to read from and write to
+ */
+const PARAM_NAME = 'articleTypes';
+
+const OPTIONS = [
+  { value: 'TEXT', label: t`Text` },
+  { value: 'IMAGE', label: t`Image` },
+  { value: 'VIDEO', label: t`Video` },
+  { value: 'AUDIO', label: t`Audio` },
+];
+
+/**
+ * @param {object} query - query from router
+ * @returns {Arary<keyof TYPE_NAME>} list of selected reply types; see constants/replyType for all possible values
+ */
+function getValues(query) {
+  return query[PARAM_NAME] ? query[PARAM_NAME].split(',') : [];
+}
+
+function ArticleTypeFilter() {
+  const { query } = useRouter();
+  const selectedValues = getValues(query);
+
+  return (
+    <BaseFilter
+      title={t`Format`}
+      selected={selectedValues}
+      options={OPTIONS}
+      onChange={selected =>
+        goToUrlQueryAndResetPagination({
+          ...query,
+          [PARAM_NAME]: selected.join(','),
+        })
+      }
+    />
+  );
+}
+
+const MemoizedArticleTypeFilter = memo(ArticleTypeFilter);
+MemoizedArticleTypeFilter.getValues = getValues;
+export default MemoizedArticleTypeFilter;
diff --git a/components/ListPageControls/index.js b/components/ListPageControls/index.js
@@ -3,6 +3,7 @@ import Filters from './Filters';
 import BaseFilter from './BaseFilter';
 import ArticleStatusFilter from './ArticleStatusFilter';
 import CategoryFilter from './CategoryFilter';
+import ArticleTypeFilter from './ArticleTypeFilter';
 import ReplyTypeFilter from './ReplyTypeFilter';
 import TimeRange from './TimeRange';
 import SortInput from './SortInput';
@@ -14,6 +15,7 @@ export {
   BaseFilter,
   ArticleStatusFilter,
   CategoryFilter,
+  ArticleTypeFilter,
   ReplyTypeFilter,
   TimeRange,
   SortInput,

diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
@@ -4,6 +4,7 @@ import { c, t } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
 import Infos, { TimeInfo } from 'components/Infos';
 import ExpandableText from 'components/ExpandableText';
+import Thumbnail from 'components/Thumbnail';
 import ListPageCard from './ListPageCard';
 import { highlightSections } from 'lib/text';
 import { useHighlightStyles } from './utils';
@@ -84,7 +85,7 @@ const useStyles = makeStyles(theme => ({
   highlight: {
     color: theme.palette.primary[500],
   },
-  attachmentImage: {
+  attachment: {
     minWidth: 0, // Don't use intrinsic image width as flex item min-size
     maxHeight: '10em', // Don't let image rows take too much vertical space
   },
@@ -97,14 +98,7 @@ const useStyles = makeStyles(theme => ({
  * @param {Highlights?} props.highlight - If given, display search snippet instead of reply text
  */
 function ArticleCard({ article, highlight = '' }) {
-  const {
-    id,
-    text,
-    attachmentUrl,
-    replyCount,
-    replyRequestCount,
-    createdAt,
-  } = article;
+  const { id, text, replyCount, replyRequestCount, createdAt } = article;
   const classes = useStyles();
   const highlightClasses = useHighlightStyles();
 
@@ -135,13 +129,7 @@ function ArticleCard({ article, highlight = '' }) {
                   : text}
               </ExpandableText>
             )}
-            {attachmentUrl && (
-              <img
-                className={classes.attachmentImage}
-                src={attachmentUrl}
-                alt="image"
-              />
-            )}
+            <Thumbnail article={article} className={classes.attachment} />
           </div>
         </ListPageCard>
       </a>
@@ -154,11 +142,12 @@ ArticleCard.fragments = {
     fragment ArticleCard on Article {
       id
       text
-      attachmentUrl(variant: THUMBNAIL)
       replyCount
       replyRequestCount
       createdAt
+      ...ThumbnailArticleData
     }
+    ${Thumbnail.fragments.ThumbnailArticleData}
   `,
   Highlight: highlightSections.fragments.HighlightFields,
 };

diff --git a/components/ListPageDisplays/ListPageCards.stories.js b/components/ListPageDisplays/ListPageCards.stories.js
@@ -33,6 +33,7 @@ export const ArticleCards = () => (
         replyCount: 3,
         replyRequestCount: 4,
         createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'TEXT',
       }}
     />
     <ArticleCard
@@ -43,6 +44,7 @@ export const ArticleCards = () => (
         replyCount: 0,
         replyRequestCount: 999,
         createdAt: '2019-01-01T00:00:00Z',
+        articleType: 'TEXT',
       }}
       highlight={{
         text:
@@ -59,19 +61,64 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id3',
-        attachmentUrl: 'https://placekitten.com/512/1000',
+        thumbnailUrl: 'https://placekitten.com/512/1000',
         replyCount: 6,
         replyRequestCount: 4,
         createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'IMAGE',
       }}
     />
     <ArticleCard
       article={{
         id: 'id3',
-        attachmentUrl: 'https://placekitten.com/2000/150',
+        thumbnailUrl: 'https://placekitten.com/2000/150',
         replyCount: 4,
         replyRequestCount: 6,
         createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'IMAGE',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id4',
+        thumbnailUrl: null,
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'VIDEO',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id5',
+        thumbnailUrl:
+          'https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t',
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'VIDEO',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id6',
+        thumbnailUrl:
+          'https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t',
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'VIDEO',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id6',
+        thumbnailUrl:
+          'https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t',
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'AUDIO',
       }}
     />
   </ListPageCards>

diff --git a/components/ListPageDisplays/ReplySearchItem.js b/components/ListPageDisplays/ReplySearchItem.js
@@ -13,6 +13,7 @@ import {
 import ExpandableText from 'components/ExpandableText';
 import Infos from 'components/Infos';
 import TimeInfo from 'components/Infos/TimeInfo';
+import Thumbnail from 'components/Thumbnail';
 import ReplyItem from './ReplyItem';
 import { nl2br } from 'lib/text';
 import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -92,10 +93,6 @@ const useStyles = makeStyles(theme => ({
       marginBottom: 0,
     },
   },
-  attachmentImage: {
-    maxWidth: '100%',
-    maxHeight: '8em', // So that image don't take too much space (more than replies)
-  },
 }));
 
 function RepliedArticleInfo({ article }) {
@@ -146,13 +143,7 @@ export default function ReplySearchItem({
       <Box p={{ xs: 2, md: 4.5 }}>
         <RepliedArticleInfo article={articleReply.article} />
         <div className={classes.flex}>
-          {articleReply.article.attachmentUrl && (
-            <img
-              className={classes.attachmentImage}
-              src={articleReply.article.attachmentUrl}
-              alt="image"
-            />
-          )}
+          <Thumbnail article={articleReply.article} />
           {articleReply.article.text && (
             <ExpandableText className={classes.content} lineClamp={3}>
               {nl2br(articleReply.article.text)}
@@ -196,13 +187,7 @@ export default function ReplySearchItem({
                   >
                     <div className={classes.otherArticleItem}>
                       <RepliedArticleInfo article={article} />
-                      {article.attachmentUrl && (
-                        <img
-                          className={classes.attachmentImage}
-                          src={article.attachmentUrl}
-                          alt="image"
-                        />
-                      )}
+                      <Thumbnail article={article} />
                       {article.text && (
                         <ExpandableText lineClamp={3}>
                           {article.text}
@@ -229,16 +214,17 @@ ReplySearchItem.fragments = {
         article {
           id
           text
-          attachmentUrl(variant: THUMBNAIL)
           replyRequestCount
           createdAt
+          ...ThumbnailArticleData
         }
         ...ReplyItemArticleReplyData
       }
       ...ReplyItem
     }
     ${ReplyItem.fragments.ReplyItem}
     ${ReplyItem.fragments.ReplyItemArticleReplyData}
+    ${Thumbnail.fragments.ThumbnailArticleData}
   `,
   Highlight: ReplyItem.fragments.Highlight,
 };