clean up block typing

web/src/components/blocks/Blocks.tsx

@@ -1,84 +1,168 @@
 import dynamic from "next/dynamic";
-import { RichTextBlock } from "./RichTextBlock";
+import type {
-import { ImageWithTextBlock } from "./ImageWithTextBlock";
+  AccordionBlockFragment,
-import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
+  ContactEntityBlockFragment,
-
+  ContactListBlockFragment,
-const ImageSliderBlock = dynamic(() =>
+  ContactSectionBlockFragment,
-  import("./ImageSliderBlock").then((m) => m.ImageSliderBlock)
+  ContactSubsectionBlockFragment,
-);
+  EmbedBlockFragment,
-import { FeaturedBlock } from "./FeaturedBlock";
+  FactBoxBlockFragment,
+  FeaturedBlockFragment,
+  HorizontalRuleBlockFragment,
+  ImageSliderBlockFragment,
+  ImageWithTextBlockFragment,
+  PageSectionBlockFragment,
+  RichTextBlockFragment,
+  ScheduleBlockFragment,
+} from "@/gql/graphql";
 import { AccordionBlock } from "./AccordionBlock";
+import { ContactEntityBlock } from "./ContactEntityBlock";
+import { ContactListBlock } from "./ContactListBlock";
+import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
-import { ScheduleBlock } from "./ScheduleBlock";
+import { FeaturedBlock } from "./FeaturedBlock";
-import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
+import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
-import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
+import { ImageWithTextBlock } from "./ImageWithTextBlock";
-import { ContactListBlock } from "./ContactListBlock";
-import { ContactEntityBlock } from "./ContactEntityBlock";
 import { NeufAddressSectionBlock } from "./NeufAddressSectionBlock";
 import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
+import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
+import { RichTextBlock } from "./RichTextBlock";
+import { ScheduleBlock } from "./ScheduleBlock";
 
-export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boolean }) => {
+const ImageSliderBlock = dynamic(() =>
-  const sections = blocks.filter(
+  import("./ImageSliderBlock").then((m) => m.ImageSliderBlock),
-    (block: any) => block?.__typename === "PageSectionBlock"
+);
-  );
 
-  return blocks.map((block: any) => {
+export type StreamFieldBlock = {
-    switch (block?.blockType) {
+  id?: string | null;
+  blockType?: string;
+  __typename?: string;
+  [key: string]: unknown;
+};
+
+export const Blocks = ({
+  blocks,
+  pageContent,
+}: {
+  blocks?: Array<StreamFieldBlock | null> | null;
+  pageContent?: boolean;
+}) => {
+  const sections = (blocks ?? []).filter(
+    (block) => block?.__typename === "PageSectionBlock",
+  ) as PageSectionBlockFragment[];
+
+  return (blocks ?? []).map((block) => {
+    if (!block) {
+      return null;
+    }
+    switch (block.blockType) {
       case "RichTextBlock":
-        return <RichTextBlock key={block.id} block={block} />;
+        return (
-        break;
+          <RichTextBlock
+            key={block.id}
+            block={block as RichTextBlockFragment}
+          />
+        );
       case "ImageWithTextBlock":
-        return <ImageWithTextBlock key={block.id} block={block} />;
+        return (
-        break;
+          <ImageWithTextBlock
-        case "EmbedBlock":
+            key={block.id}
-          return <EmbedBlock key={block.id} block={block} />;
+            block={block as ImageWithTextBlockFragment}
-          break;
+          />
+        );
+      case "EmbedBlock":
+        return (
+          <EmbedBlock key={block.id} block={block as EmbedBlockFragment} />
+        );
       case "ImageSliderBlock":
-        return <ImageSliderBlock key={block.id} block={block} pageContent />;
+        return (
-        break;
+          <ImageSliderBlock
+            key={block.id}
+            block={block as ImageSliderBlockFragment}
+            pageContent
+          />
+        );
       case "HorizontalRuleBlock":
-        return <HorizontalRuleBlock key={block.id} block={block} />;
+        return (
-        break;
+          <HorizontalRuleBlock
+            key={block.id}
+            block={block as HorizontalRuleBlockFragment}
+          />
+        );
       case "FeaturedBlock":
-        return <FeaturedBlock key={block.id} block={block} />;
+        return (
-        break;
+          <FeaturedBlock
+            key={block.id}
+            block={block as FeaturedBlockFragment}
+          />
+        );
       case "AccordionBlock":
-        return <AccordionBlock key={block.id} block={block} />;
+        return (
-        break;
+          <AccordionBlock
+            key={block.id}
+            block={block as AccordionBlockFragment}
+          />
+        );
       case "FactBoxBlock":
-        return <FactBoxBlock key={block.id} block={block} />;
+        return (
-        break;
+          <FactBoxBlock key={block.id} block={block as FactBoxBlockFragment} />
+        );
       case "ScheduleBlock":
-        return <ScheduleBlock key={block.id} block={block} />;
+        return (
-        break;
+          <ScheduleBlock
+            key={block.id}
+            block={block as ScheduleBlockFragment}
+          />
+        );
       case "PageSectionBlock":
-        return <PageSectionBlock key={block.id} block={block} />;
+        return (
-        break;
+          <PageSectionBlock
+            key={block.id}
+            block={block as PageSectionBlockFragment}
+          />
+        );
       case "PageSectionNavigationBlock":
-        return <PageSectionNavigationBlock sections={sections} />;
+        return (
-        break;
+          <PageSectionNavigationBlock key={block.id} sections={sections} />
+        );
       case "ContactSectionBlock":
-        return <ContactSectionBlock key={block.id} block={block} />;
+        return (
-        break;
+          <ContactSectionBlock
+            key={block.id}
+            block={block as ContactSectionBlockFragment}
+          />
+        );
       case "ContactSubsectionBlock":
-        return <ContactSubsectionBlock key={block.id} block={block} />;
+        return (
-        break;
+          <ContactSubsectionBlock
+            key={block.id}
+            block={block as ContactSubsectionBlockFragment}
+          />
+        );
       case "ContactListBlock":
-        return <ContactListBlock key={block.id} block={block} />;
+        return (
-        break;
+          <ContactListBlock
+            key={block.id}
+            block={block as ContactListBlockFragment}
+          />
+        );
       case "ContactEntityBlock":
-        return <ContactEntityBlock key={block.id} block={block} />;
+        return (
-        break;
+          <ContactEntityBlock
+            key={block.id}
+            block={block as ContactEntityBlockFragment}
+          />
+        );
       case "NeufAddressSectionBlock":
-        return <NeufAddressSectionBlock />;
+        return <NeufAddressSectionBlock key={block.id} />;
-        break;
       case "OpeningHoursSectionBlock":
-        return <OpeningHoursSectionBlock />;
+        return <OpeningHoursSectionBlock key={block.id} />;
-        break;
       default:
         console.log("unsupported block", block);
-        return <div>Unsupported block type {block?.blockType}</div>;
+        return (
+          <div key={block.id}>Unsupported block type {block.blockType}</div>
+        );
     }
   });
 };

web/src/components/general/PageContent.tsx

@@ -1,7 +1,13 @@
-import { Blocks } from "@/components/blocks/Blocks";
+import { Blocks, type StreamFieldBlock } from "@/components/blocks/Blocks";
 import styles from './pageContent.module.scss';
 
-export const PageContent = ({ blocks, className }: { blocks: any; className?: string }) => {
+export const PageContent = ({
+  blocks,
+  className,
+}: {
+  blocks?: Array<StreamFieldBlock | null> | null;
+  className?: string;
+}) => {
   return (
     <div className={`${styles.pageContent}${className ? ` ${className}` : ''}`}>
       <Blocks blocks={blocks} pageContent />