Merge pull request #450 from gkLeo/bug/ListComponents

SUGCON24 EU: Fix Null Reference Exception bug in ListComponents
Sitecore · Jul 19, 2024 · 4f2d505 · 4f2d505
2 parents 81683ec + b810fab
commit 4f2d505
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/Accordion.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/Accordion.tsx
@@ -4,6 +4,7 @@ import {
   Text as JssText,
   RichTextField,
   RichText as JssRichText,
+  withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import {
   Accordion,
@@ -16,6 +17,7 @@ import {
 } from '@chakra-ui/react';
 import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
+import { ComponentProps } from 'lib/component-props';
 
 interface AccordionElement {
   fields: {
@@ -35,12 +37,11 @@ interface Fields {
   Elements: Array<AccordionElement>;
 }
 
-interface AccordionProps {
-  params: { [key: string]: string };
+type AccordionProps = ComponentProps & {
   fields: Fields;
-}
+};
 
-export const Default = (props: AccordionProps): JSX.Element => {
+const AccordionComponent = (props: AccordionProps): JSX.Element => {
   return (
     <LayoutFlex direction="column">
       {(isEditorActive() || props.fields?.Headline?.value !== '') && (
@@ -71,3 +72,5 @@ export const Default = (props: AccordionProps): JSX.Element => {
     </LayoutFlex>
   );
 };
+
+export const Default = withDatasourceCheck()<AccordionProps>(AccordionComponent);
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Box, Heading, SimpleGrid } from '@chakra-ui/react';
-import { TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs';
+import { TextField, Text as JssText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person';
 import clsx from 'clsx';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that People Grid will accept
 interface Fields {
@@ -32,12 +33,11 @@ export interface Person {
   url: string;
 }
 
-export type PeopleGridProps = {
-  params: { [key: string]: string };
+export type PeopleGridProps = ComponentProps & {
   fields: Fields;
 };
 
-export const Default = (props: PeopleGridProps): JSX.Element => {
+const PeopleGridComponent = (props: PeopleGridProps): JSX.Element => {
   const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 4;
 
   if (props.params && props.params.Alphabetize == '1') {
@@ -71,3 +71,5 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
     </Box>
   );
 };
+
+export const Default = withDatasourceCheck()<PeopleGridProps>(PeopleGridComponent);
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx
@@ -1,9 +1,15 @@
 import { useState, useEffect } from 'react';
 import { Box, Heading, SimpleGrid } from '@chakra-ui/react';
-import { Field, TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  Field,
+  TextField,
+  Text as JssText,
+  withDatasourceCheck,
+} from '@sitecore-jss/sitecore-jss-nextjs';
 import { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person';
 import * as cheerio from 'cheerio';
 import clsx from 'clsx';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that People Grid will accept
 interface Fields {
@@ -35,8 +41,7 @@ interface PersonItem {
   url: string;
 }
 
-export type PeopleGridProps = {
-  params: { [key: string]: string };
+export type PeopleGridProps = ComponentProps & {
   fields: Fields;
 };
 
@@ -100,7 +105,7 @@ function getPeople(sessionTitle: string, body: string) {
   return people;
 }
 
-export const Default = (props: PeopleGridProps): JSX.Element => {
+const PeopleGridComponent = (props: PeopleGridProps): JSX.Element => {
   const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 5;
 
   const [people, setPeople] = useState(Array<PersonItem>);
@@ -148,3 +153,5 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
     </Box>
   );
 };
+
+export const Default = withDatasourceCheck()<PeopleGridProps>(PeopleGridComponent);