[F] Add filters to issues lists; remove w/o volume condition

Author: 1aurend

client/src/frontend/containers/IssuesList/index.js

@@ -1,36 +1,54 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { useFetch, useListFilters, useListQueryParams } from "hooks";
+import {
+  useFetch,
+  useListFilters,
+  useListQueryParams,
+  useFromStore
+} from "hooks";
 import EntityCollectionPlaceholder from "global/components/entity/CollectionPlaceholder";
 import EntityCollection from "frontend/components/entity/Collection";
 import CollectionNavigation from "frontend/components/CollectionNavigation";
 import HeadContent from "global/components/HeadContent";
-
-import { journalIssuesAPI } from "api";
+import { journalIssuesAPI, requests } from "api";
 
 export default function IssuesListContainer() {
-  // Add back in when api supports filters
-  // const subjects = useFromStore("feSubjects", "select");
+  const subjects = useFromStore({
+    requestKey: requests.feSubjects,
+    action: "select"
+  });
 
-  const filtersReset = useMemo(() => ({ standaloneModeEnforced: false }), []);
+  const filtersReset = useMemo(
+    () => ({ standaloneModeEnforced: false, order: "sort_title DESC" }),
+    []
+  );
 
   const { pagination, filters, setFilters } = useListQueryParams({
     initFilters: filtersReset
   });
 
-  const { data: issues, meta } = useFetch({
+  const { data: issues, meta, loaded } = useFetch({
     request: [journalIssuesAPI.index, filters, pagination]
   });
 
   const filterProps = useListFilters({
     onFilterChange: state => setFilters(state),
     initialState: filters,
-    resetState: filtersReset
+    resetState: filtersReset,
+    options: {
+      entityType: "journalIssue",
+      sort: true,
+      subjects,
+      hideFeatured: true
+    }
   });
 
   const { t } = useTranslation();
 
-  const showPlaceholder = "keyword" in filters ? false : !issues?.length;
+  const showPlaceholder =
+    "keyword" in filters || "subject" in filters || loaded
+      ? false
+      : !issues?.length;
 
   if (!issues || !meta) return null;
 

client/src/frontend/containers/JournalIssuesList/index.js

@@ -1,6 +1,11 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { useFetch, useListQueryParams, useFromStore } from "hooks";
+import {
+  useFetch,
+  useListQueryParams,
+  useFromStore,
+  useListFilters
+} from "hooks";
 import { journalIssuesAPI } from "api";
 import useEntityHeadContent from "frontend/components/entity/useEntityHeadContent";
 import HeadContent from "global/components/HeadContent";
@@ -10,8 +15,13 @@ import { RegisterBreadcrumbs } from "global/components/atomic/Breadcrumbs";
 import lh from "helpers/linkHandler";
 
 export default function JournalIssuesList({ journal }) {
-  const { pagination, filters } = useListQueryParams({
-    initFilters: { journal_id: journal.id, volume_is_nil: true }
+  const initFilters = useMemo(
+    () => ({ journal_id: journal.id, order: "sort_title DESC" }),
+    [journal.id]
+  );
+
+  const { pagination, filters, setFilters } = useListQueryParams({
+    initFilters
   });
 
   const { data: issues, meta } = useFetch({
@@ -51,6 +61,16 @@ export default function JournalIssuesList({ journal }) {
 
   const headContentProps = useEntityHeadContent(journal);
 
+  const filterProps = useListFilters({
+    onFilterChange: param => setFilters(param),
+    initialState: filters,
+    resetState: initFilters,
+    options: {
+      entityType: "journalIssue",
+      sort: true
+    }
+  });
+
   if (!journal || !issues || !meta) return null;
 
   return (
@@ -65,6 +85,7 @@ export default function JournalIssuesList({ journal }) {
         issues={issues}
         issuesMeta={meta}
         parentView
+        filterProps={filterProps}
       />
     </>
   );

client/src/global/components/list/Filters/types/sort.js

@@ -2,7 +2,8 @@ export const sortFilter = (filters, updateFilters, params, t) => {
   const includePublished = params?.entityType === "project";
   const includeModified =
     params?.entityType === "journal" ||
-    params?.entityType === "projectCollection";
+    params?.entityType === "projectCollection" ||
+    params?.entityType === "journalIssue";
   const alphaSort =
     params?.entityType === "projectCollection" ? "title" : "sort_title";