Bibdk2021 1950 do advanced search

src/components/search/advancedSearch/advancedSearchResult/AdvancedSearchResult.js

@@ -0,0 +1,71 @@
+import { doComplexSearchAll } from "@/lib/api/complexSearch.fragments";
+import { useData } from "@/lib/api/api";
+import { ResultPage } from "@/components/search/result/page";
+import Section from "@/components/base/section";
+import Pagination from "@/components/search/pagination/Pagination";
+import PropTypes from "prop-types";
+
+export function AdvancedSearchResult({
+  page,
+  onWorkClick,
+  onPageChange,
+  results,
+}) {
+  // console.log(page, onPageChange, onWorkClick, cql, "COMPONENT");
+  const isLoading = results.isLoading;
+  const hitcount = results?.data?.complexSearch?.hitcount;
+  const numPages = Math.ceil(hitcount / 10);
+
+  return (
+    <>
+      <Section
+        divider={false}
+        colSize={{ lg: { offset: 3, span: true } }}
+        id="search-result-section"
+      >
+        <ResultPage
+          rows={results?.data?.complexSearch?.works}
+          onWorkClick={onWorkClick}
+          isLoading={isLoading}
+        />
+      </Section>
+      {hitcount > 0 && (
+        <Pagination
+          numPages={numPages}
+          currentPage={parseInt(page, 10)}
+          onChange={onPageChange}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * Load the data needed for the advanced search result.
+ *
+ * @returns {React.JSX.Element}
+ */
+export default function Wrap({ page, onWorkClick, onPageChange, cql }) {
+  const limit = 10; // limit
+  let offset = limit * (page - 1); // offset
+  // use the useData hook to fetch data
+  const bigResponse = useData(
+    doComplexSearchAll({ cql, offset: offset, limit: limit })
+  );
+
+  return (
+    <AdvancedSearchResult
+      page={page}
+      onWorkClick={onWorkClick}
+      onPageChange={onPageChange}
+      results={bigResponse}
+    />
+  );
+}
+
+Wrap.propTypes = {
+  page: PropTypes.number,
+  cql: PropTypes.string,
+  onViewSelect: PropTypes.func,
+  onWorkClick: PropTypes.func,
+};

src/components/search/result/Result.js

@@ -24,7 +24,6 @@ import styles from "./Result.module.css";
  * See propTypes for specific props and types
  */
 export function Result({
-  q,
   page,
   isLoading,
   hitcount = 0,
@@ -66,7 +65,6 @@ export function Result({
           .map((p, index) => (
             <ResultPage
               key={`result-page-${index}`}
-              q={q}
               page={isMobile ? index + 1 : page}
               onWorkClick={onWorkClick}
             />
@@ -127,7 +125,6 @@ export default function Wrap({ page, onWorkClick, onPageChange }) {
 
   return (
     <Result
-      q={q}
       page={page}
       noRelatedSubjects={!relatedSubjects?.data?.relatedSubjects?.length > 0}
       isLoading={relatedSubjects.isLoading}

src/lib/api/complexSearch.fragments.js

@@ -0,0 +1,104 @@
+/**
+ * Hitcount
+ *
+ * @param {string} q the query
+ * @param {Object} filters filters for searching
+ */
+export function doComplexSearchAll({ cql, offset, limit }) {
+  return {
+    // delay: 1000, // for debugging
+    query: `
+    query ComplexSearchAll($cql: String!, $offset: Int!, $limit: PaginationLimit!) {
+			complexSearch(cql: $cql) {
+				hitcount
+				errorMessage
+				works(offset: $offset, limit: $limit) {
+					workId
+          mainLanguages {
+            isoCode
+            display
+          }
+          workTypes
+          manifestations {
+            mostRelevant{
+              pid
+              ownerWork {
+                workTypes
+              }
+              cover {
+                detail
+                origin
+              }
+              materialTypes {
+                materialTypeGeneral {
+                  code
+                  display
+                }
+                materialTypeSpecific {
+                  code
+                  display
+                }
+              }
+              hostPublication {
+                title
+              }
+              publisher
+              edition {
+                summary
+                edition
+              }
+            }            
+          }
+          creators {
+            ... on Corporation {
+              __typename
+              display
+              nameSort
+              roles {
+                function {
+                  plural
+                  singular
+                }
+                functionCode
+              }
+            }
+            ... on Person {
+              __typename
+              display
+              nameSort
+              roles {
+                function {
+                  plural
+                  singular
+                }
+                functionCode
+              }
+            }
+          }
+          materialTypes {
+            materialTypeGeneral {
+              code
+              display
+            }
+            materialTypeSpecific {
+              code
+              display
+  }
+          }
+          fictionNonfiction {
+            display
+          }
+          genreAndForm
+          titles {
+            main
+            full
+            parallel
+            sort
+          }
+        }
+			}
+		}`,
+    variables: { cql, offset, limit },
+    slowThreshold: 3000,
+  };
+}

src/pages/avanceret.js

@@ -1,24 +1,21 @@
 import Header from "@/components/header/Header";
 import { useRouter } from "next/router";
 import { fetchAll } from "@/lib/api/apiServerOnly";
-
 import AdvancedSearch from "@/components/search/advancedSearch/AdvancedSearch";
-import Result from "@/components/search/result/Result";
-import useQ from "@/components/hooks/useQ";
 import useDataCollect from "@/lib/useDataCollect";
-import useFilters from "@/components/hooks/useFilters";
 import { useRef } from "react";
+import AdvancedSearchResult from "@/components/search/advancedSearch/advancedSearchResult/AdvancedSearchResult";
+import isEmpty from "lodash/isEmpty";
 
 /**
  * Renders AdvancedSearch page
  */
 export default function AdvancedSearchPage() {
   const router = useRouter();
-  const q = useQ().getQuery();
-  const filters = useFilters().getQuery();
   const dataCollect = useDataCollect();
   const scrollRef = useRef();
   const { page = 1 } = router.query;
+  const cql = router?.query?.cql || "";
 
   /**
    * Updates URL query params
@@ -47,21 +44,23 @@ export default function AdvancedSearchPage() {
       <Header router={router} hideSimpleSearch />
       <AdvancedSearch />
 
-      {q && (
-        <Result
+      {!isEmpty(cql) && (
+        <AdvancedSearchResult
           page={parseInt(page, 10)}
           onPageChange={async (page, scroll) => {
             scroll = typeof scroll !== "boolean" || scroll !== false;
             await updateQueryParams({ page });
             scroll && scrollToRef(scrollRef);
           }}
+          // .. @TODO .. what to do with the datacollect ??
           onWorkClick={(index, work) => {
             dataCollect.collectSearchWorkClick({
               search_request: { q, filters },
               search_query_hit: index + 1,
               search_query_work: work.workId,
             });
           }}
+          cql={cql}
         />
       )}
     </>