Add list paragraph page size variables

pookmish · Feb 24, 2024 · 5c9e48b · 5c9e48b
1 parent 19f799c
commit 5c9e48b
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 72 deletions.
diff --git a/src/components/paragraphs/stanford-card/card-paragraph.tsx b/src/components/paragraphs/stanford-card/card-paragraph.tsx
@@ -43,8 +43,9 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
           }
 
           {paragraph.suCardSuperHeader &&
-            <div
-              className="order-1 font-semibold">{paragraph.suCardSuperHeader}</div>
+            <div className="order-1 font-semibold">
+              {paragraph.suCardSuperHeader}
+            </div>
           }
 
           {paragraph.suCardBody &&

diff --git a/src/components/paragraphs/stanford-lists/list-paragraph.tsx b/src/components/paragraphs/stanford-lists/list-paragraph.tsx
@@ -22,12 +22,7 @@ const ListParagraph = async ({paragraph, ...props}: Props) => {
   const behaviors = getParagraphBehaviors(paragraph);
   const viewId = paragraph.suListView?.view || '';
   const displayId = paragraph.suListView?.display || '';
-
-  let viewItems = await getViewItems(viewId, displayId, paragraph.suListView?.contextualFilter);
-  // let viewItems = (viewId && displayId) ? await getViewResults<StanfordNode>(viewId, displayId, paragraph.suListView?.contextualFilter) : [];
-  if (paragraph.suListView?.pageSize) {
-    viewItems = viewItems.slice(0, paragraph.suListView.pageSize)
-  }
+  const viewItems = await getViewItems(viewId, displayId, paragraph.suListView?.contextualFilter, paragraph.suListView?.pageSize);
 
   if (behaviors.list_paragraph?.hide_empty && viewItems.length === 0) return null;
 
@@ -64,9 +59,12 @@ const ListParagraph = async ({paragraph, ...props}: Props) => {
   )
 }
 
-const getViewItems = cache(async (viewId: string, displayId: string, contextualFilter?: Maybe<string[]>): Promise<NodeUnion[]> => {
+const getViewItems = cache(async (viewId: string, displayId: string, contextualFilter?: Maybe<string[]>, pageSize?: Maybe<number>, page?: Maybe<number>, offset?: Maybe<number>): Promise<NodeUnion[]> => {
   let items: NodeUnion[] = []
-
+  // View filters allow multiples of 3 for page sizes. If the user wants 4, we'll fetch 6 and then slice it at the end.
+  const itemsPerPage = pageSize ? Math.ceil(pageSize / 3) * 3 : undefined;
+  const queryVariables = {pageSize: itemsPerPage, page, offset};
+
   const tags = ['views'];
   switch (`${viewId}--${displayId}`) {
     case 'stanford_shared_tags--card_grid':
@@ -113,49 +111,49 @@ const getViewItems = cache(async (viewId: string, displayId: string, contextualF
     case 'stanford_basic_pages--basic_page_type_list':
     case 'stanford_basic_pages--viewfield_block_1':
       filters = getViewFilters(['term_node_taxonomy_name_depth', 'nid'], contextualFilter)
-      graphqlResponse = await client.stanfordBasicPages({filters});
+      graphqlResponse = await client.stanfordBasicPages({filters, ...queryVariables});
       items = graphqlResponse.stanfordBasicPages?.results as unknown as NodeStanfordPage[]
       break
 
     case 'stanford_courses--default_list_viewfield_block':
     case 'stanford_courses--vertical_teaser_viewfield_block':
-      graphqlResponse = await client.stanfordCourses({filters});
+      graphqlResponse = await client.stanfordCourses({filters, ...queryVariables});
       items = graphqlResponse.stanfordCourses?.results as unknown as NodeStanfordCourse[]
       break
 
     case 'stanford_events--cards':
     case 'stanford_events--list_page':
       filters = getViewFilters(['term_node_taxonomy_name_depth', 'term_node_taxonomy_name_depth_1', 'term_node_taxonomy_name_depth_2', 'term_node_taxonomy_name_depth_3'], contextualFilter)
-      graphqlResponse = await client.stanfordEventsCardGrid({filters});
+      graphqlResponse = await client.stanfordEventsCardGrid({filters, ...queryVariables});
       items = graphqlResponse.stanfordEventsCardGrid?.results as unknown as NodeUnion[]
       break
 
     case 'stanford_events--past_events_list_block':
-      graphqlResponse = await client.stanfordEventsPastEvents({filters});
+      graphqlResponse = await client.stanfordEventsPastEvents({filters, ...queryVariables});
       items = graphqlResponse.stanfordEventsPastEvents?.results as unknown as NodeUnion[]
       break
 
     case 'stanford_news--block_1':
     case 'stanford_news--vertical_cards':
-      graphqlResponse = await client.stanfordNewsDefaultList({filters});
+      graphqlResponse = await client.stanfordNewsDefaultList({filters, ...queryVariables});
       items = graphqlResponse.stanfordNewsDefaultList?.results as unknown as NodeUnion[]
       break
 
     case 'stanford_person--grid_list_all':
-      graphqlResponse = await client.stanfordPerson({filters});
+      graphqlResponse = await client.stanfordPerson({filters, ...queryVariables});
       items = graphqlResponse.stanfordPerson?.results as unknown as NodeUnion[]
       break
 
     case 'stanford_publications--apa_list':
     case 'stanford_publications--chicago_list':
-      graphqlResponse = await client.stanfordPublicationsApa({filters});
+      graphqlResponse = await client.stanfordPublicationsApa({filters, ...queryVariables});
       items = graphqlResponse.stanfordPublicationsApa?.results as unknown as NodeUnion[]
       break
 
     case 'stanford_shared_tags--card_grid':
       filters = getViewFilters(['term_node_taxonomy_name_depth', 'type'], contextualFilter)
       if (filters && Object.keys(filters).length === 2) filters.nid = '0'
-      graphqlResponse = await client.stanfordSharedTags({filters});
+      graphqlResponse = await client.stanfordSharedTags({filters, ...queryVariables});
       items = graphqlResponse.stanfordSharedTags?.results as unknown as NodeUnion[]
       break
 
@@ -164,7 +162,7 @@ const getViewItems = cache(async (viewId: string, displayId: string, contextualF
       break;
   }
 
-  return items;
+  return pageSize ? items.slice(0, pageSize) : items;
 })
 
 const getViewFilters = (keys: string[], values?: Maybe<string[]>) => {

diff --git a/src/components/views/card-view-grid.tsx b/src/components/views/card-view-grid.tsx
@@ -5,7 +5,7 @@ import {NodeUnion} from "@lib/gql/__generated__/drupal";
 const CardViewGrid = ({items, headingLevel}: { items: NodeUnion[], headingLevel?: "h2" | "h3" }) => {
   return (
     <LoadMoreList
-      ulProps={{className: "list-unstyled grid @4xl:grid-cols-2 @7xl:grid-cols-3 gap-20"}}
+      ulProps={{className: "list-unstyled grid @4xl:grid-cols-2 @7xl:grid-cols-3 gap-20 mb-20"}}
       liProps={{className: ""}}
     >
       {items.map(item =>