Improve union types

src/components/elements/load-more-list.tsx

@@ -12,7 +12,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   itemsPerPage?: number
 }
 
-const LoadMoreList = ({buttonText, children, ulProps, liProps, itemsPerPage = 20, ...props}: Props) => {
+const LoadMoreList = ({buttonText, children, ulProps, liProps, itemsPerPage = 15, ...props}: Props) => {
   const id = useId();
   const {count: shownItems, setCount: setShownItems} = useCounter(itemsPerPage)
   const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)

src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "@components/elements/link";
 import {H2, H3} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
-import {NodeStanfordNews, TermUnion} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordNews, TermStanfordNewsTopic} from "@lib/gql/__generated__/drupal";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
@@ -12,7 +12,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
   const image = node.suNewsFeaturedMedia?.mediaImage
 
-  const topics: TermUnion[] = node.suNewsTopics ? node.suNewsTopics.slice(0, 3) : [];
+  const topics: TermStanfordNewsTopic[] = node.suNewsTopics ? node.suNewsTopics.slice(0, 3) : [];
   const Heading = headingLevel === 'h3' ? H3 : H2;
 
   const publishDate = node.suNewsPublishingDate ? new Date(node.suNewsPublishingDate.time).toLocaleDateString("en-us", {

src/components/paragraphs/get-paragraph-behaviors.tsx

@@ -1,7 +1,7 @@
 import {ParagraphBehaviors} from "@lib/drupal/drupal-jsonapi.types";
-import {ParagraphUnion} from "@lib/gql/__generated__/drupal";
+import {ParagraphInterface} from "@lib/gql/__generated__/drupal";
 
-export const getParagraphBehaviors = (paragraph: ParagraphUnion): ParagraphBehaviors => {
+export const getParagraphBehaviors = (paragraph: ParagraphInterface): ParagraphBehaviors => {
   if (paragraph.behaviors) return JSON.parse(paragraph.behaviors)
   return {}
 }

src/components/paragraphs/stanford-lists/list-paragraph.tsx

@@ -5,8 +5,8 @@ import {H2} from "@components/elements/headers";
 import {cache, HtmlHTMLAttributes} from "react";
 import {
   Maybe,
-  NodeStanfordCourse,
-  NodeStanfordPage,
+  NodeStanfordCourse, NodeStanfordEvent, NodeStanfordNews,
+  NodeStanfordPage, NodeStanfordPerson, NodeStanfordPublication,
   NodeUnion,
   ParagraphStanfordList
 } from "@lib/gql/__generated__/drupal";
@@ -125,29 +125,29 @@ const getViewItems = cache(async (viewId: string, displayId: string, contextualF
     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, ...queryVariables});
-      items = graphqlResponse.stanfordEventsCardGrid?.results as unknown as NodeUnion[]
+      items = graphqlResponse.stanfordEventsCardGrid?.results as unknown as NodeStanfordEvent[]
       break
 
     case 'stanford_events--past_events_list_block':
       graphqlResponse = await client.stanfordEventsPastEvents({filters, ...queryVariables});
-      items = graphqlResponse.stanfordEventsPastEvents?.results as unknown as NodeUnion[]
+      items = graphqlResponse.stanfordEventsPastEvents?.results as unknown as NodeStanfordEvent[]
       break
 
     case 'stanford_news--block_1':
     case 'stanford_news--vertical_cards':
       graphqlResponse = await client.stanfordNewsDefaultList({filters, ...queryVariables});
-      items = graphqlResponse.stanfordNewsDefaultList?.results as unknown as NodeUnion[]
+      items = graphqlResponse.stanfordNewsDefaultList?.results as unknown as NodeStanfordNews[]
       break
 
     case 'stanford_person--grid_list_all':
       graphqlResponse = await client.stanfordPerson({filters, ...queryVariables});
-      items = graphqlResponse.stanfordPerson?.results as unknown as NodeUnion[]
+      items = graphqlResponse.stanfordPerson?.results as unknown as NodeStanfordPerson[]
       break
 
     case 'stanford_publications--apa_list':
     case 'stanford_publications--chicago_list':
       graphqlResponse = await client.stanfordPublicationsApa({filters, ...queryVariables});
-      items = graphqlResponse.stanfordPublicationsApa?.results as unknown as NodeUnion[]
+      items = graphqlResponse.stanfordPublicationsApa?.results as unknown as NodeStanfordPublication[]
       break
 
     case 'stanford_shared_tags--card_grid':

src/components/views/stanford-events/events-filtered-list-view.tsx

@@ -7,12 +7,12 @@ import {useMemo, useState} from "react";
 import LoadMoreList from "@components/elements/load-more-list";
 import StanfordEventListItem from "@components/nodes/list-item/stanford-event/stanford-event-list-item";
 import {SelectOptionDefinition, SelectValue} from "@mui/base/useSelect";
-import {NodeStanfordEvent, TermUnion} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordEvent, TermStanfordEventType} from "@lib/gql/__generated__/drupal";
 
-const getTopicOptions = (eventItems: NodeStanfordEvent[] = [], topicTree: TermUnion[] = []): SelectOptionDefinition<string>[] => {
+const getTopicOptions = (eventItems: NodeStanfordEvent[] = [], topicTree: TermStanfordEventType[] = []): SelectOptionDefinition<string>[] => {
   const topicOptions: SelectOptionDefinition<string>[] = [];
 
-  const cleanTopic = (topic: TermUnion): boolean => {
+  const cleanTopic = (topic: TermStanfordEventType): boolean => {
     if (topic.parent?.id) return false;
 
     return !!eventItems.find(event => {
@@ -27,12 +27,12 @@ const getTopicOptions = (eventItems: NodeStanfordEvent[] = [], topicTree: TermUn
   return topicOptions.sort((a, b) => a.label < b.label ? -1 : (a.label > b.label ? 1 : 0));
 }
 
-const EventsFilteredListView = ({items, topics}: { items: NodeStanfordEvent[], topics: TermUnion[] }) => {
+const EventsFilteredListView = ({items, topics}: { items: NodeStanfordEvent[], topics: TermStanfordEventType[] }) => {
 
   const [chosenTopic, setChosenTopic] = useState<string>('');
   const [displayedEvents, setDisplayedEvents] = useState<NodeStanfordEvent[]>(items);
 
-  const topicTree = useMemo(() => getTaxonomyTree(topics), [topics]);
+  const topicTree = useMemo(() => getTaxonomyTree<TermStanfordEventType>(topics), [topics]);
   const topicOptions = useMemo(() => getTopicOptions(items, topicTree), [items, topicTree]);
 
   const filterEvents = () => {
@@ -43,7 +43,7 @@ const EventsFilteredListView = ({items, topics}: { items: NodeStanfordEvent[], t
     }
     const topicIds: string[] = [];
 
-    const buildChosenTopicIds = (topicTerm: TermUnion | undefined): void => {
+    const buildChosenTopicIds = (topicTerm: TermStanfordEventType | undefined): void => {
       if (!topicTerm) return;
 
       topicIds.push(topicTerm.id);

src/components/views/stanford-events/events-list-view.tsx

@@ -1,7 +1,7 @@
 import StanfordEventListItem from "@components/nodes/list-item/stanford-event/stanford-event-list-item";
 import LoadMoreList from "@components/elements/load-more-list";
 import EventsFilteredListView from "@components/views/stanford-events/events-filtered-list-view";
-import {NodeStanfordEvent, TermUnion} from "@lib/gql/__generated__/drupal";
+import {NodeStanfordEvent, TermStanfordEventType} from "@lib/gql/__generated__/drupal";
 
 interface Props {
   headingLevel?: "h2" | "h3"
@@ -10,7 +10,7 @@ interface Props {
 
 const EventsListView = async ({items = [], headingLevel}: Props) => {
   if (items.length >= 5) {
-    const topics: TermUnion[] = [];
+    const topics: TermStanfordEventType[] = [];
     items.map(event => event.suEventType?.map(topic => topics.push(topic)))
     const uniqueTopics = [...new Map(topics.map((t) => [t.id, t])).values()];
 

src/lib/drupal/get-taxonomy-tree.tsx

@@ -1,18 +1,18 @@
 import {TermUnion} from "@lib/gql/__generated__/drupal";
 
-export type TermTree = TermUnion & {
-  below?: TermUnion[]
+export type TermTree<T extends TermUnion> = T & {
+  below?: TermTree<T>[]
 }
 
-export const getTaxonomyTree = (terms: TermUnion[]): TermTree[] => {
-  const {below} = buildTaxonomyTree(terms);
+export const getTaxonomyTree = <T extends TermUnion, >(terms: T[]): TermTree<T>[] => {
+  const {below} = buildTaxonomyTree<T>(terms);
   return below || terms;
 }
 
-export const buildTaxonomyTree = (
-  terms: TermUnion[],
-  parent: TermUnion["id"] = ""
-): { below?: TermUnion[] } => {
+export const buildTaxonomyTree = <T extends TermUnion, >(
+  terms: T[],
+  parent: T["id"] = ""
+): { below?: T[] } => {
 
   if (!terms?.length) return {below: []}