Merge pull request #508 from cofacts/article-type-filter

Article type filter for Article list, Reply list and Profile page
cofacts · Oct 12, 2022 · b3f0bc8 · b3f0bc8
2 parents 5c9e52d + 07c3820
commit b3f0bc8
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 75 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/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
@@ -8,6 +8,7 @@ import {
   Tools,
   Filters,
   CategoryFilter,
+  ArticleTypeFilter,
   ReplyTypeFilter,
   TimeRange,
   SortInput,
@@ -187,6 +188,9 @@ function urlQuery2Filter(query = {}, userId) {
     };
   }
 
+  const articleTypes = ArticleTypeFilter.getValues(query);
+  if (articleTypes.length) filterObj.articleTypes = articleTypes;
+
   const selectedReplyTypes = ReplyTypeFilter.getValues(query);
   if (selectedReplyTypes.length)
     filterObj.articleReply.replyTypes = selectedReplyTypes;
@@ -238,6 +242,7 @@ function RepliedArticleTab({ userId }) {
         <SortInput defaultOrderBy={DEFAULT_ORDER} options={REPLIES_ORDER} />
       </Tools>
       <Filters className={classes.filters}>
+        <ArticleTypeFilter />
         <ReplyTypeFilter />
         <CategoryFilter />
       </Filters>