Merge pull request #449 from gkLeo/bug/BasicComponents

SUGCON24 EU: Fix Null Reference Exception bug in BasicComponents

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ErrorMessage.tsx

@@ -5,7 +5,9 @@ import {
   Text as JssText,
   RichTextField,
   RichText as JssRichText,
+  withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that ErrorMessage will accept
 interface Fields {
@@ -19,12 +21,11 @@ interface Fields {
   StatusCode: TextField;
 }
 
-export type ErrorMessageProps = {
-  params: { [key: string]: string };
+export type ErrorMessageProps = ComponentProps & {
   fields: Fields;
 };
 
-export const Default = (props: ErrorMessageProps): JSX.Element => {
+const ErrorMessageComponent = (props: ErrorMessageProps): JSX.Element => {
   return (
     <Flex
       direction={{ base: 'column', md: 'row' }}
@@ -56,3 +57,5 @@ export const Default = (props: ErrorMessageProps): JSX.Element => {
     </Flex>
   );
 };
+
+export const Default = withDatasourceCheck()<ErrorMessageProps>(ErrorMessageComponent);

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx

@@ -7,6 +7,7 @@ import {
   LinkField,
   Text as JssText,
   Link as JssLink,
+  withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 import { ButtonLink } from '../../basics/ButtonLink';
@@ -17,6 +18,7 @@ import {
 } from 'lib/utils/sitecoreUtils';
 import { PaddingX, Template } from 'components/Templates/LayoutConstants';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that Hero will accept
 interface Fields {
@@ -36,12 +38,11 @@ interface Fields {
   Image: ImageField;
 }
 
-export type HeroProps = {
-  params: { [key: string]: string };
+export type HeroProps = ComponentProps & {
   fields: Fields;
 };
 
-export const HeroHomepage = (props: HeroProps): JSX.Element => {
+const HeroHomepageComponent = (props: HeroProps): JSX.Element => {
   return (
     <Flex flexDir={{ base: 'column', md: 'row' }} width="100%" paddingRight="0px" paddingLeft="0px">
       <Box
@@ -89,7 +90,9 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
   );
 };
 
-export const HeroEvent = (props: HeroProps): JSX.Element => {
+export const HeroHomepage = withDatasourceCheck()<HeroProps>(HeroHomepageComponent);
+
+const HeroEventComponent = (props: HeroProps): JSX.Element => {
   return (
     <>
     <Flex 
@@ -145,7 +148,9 @@ export const HeroEvent = (props: HeroProps): JSX.Element => {
   );
 };
 
-export const HeroJustificationLetter = (props: HeroProps): JSX.Element => {
+export const HeroEvent = withDatasourceCheck()<HeroProps>(HeroEventComponent);
+
+const HeroJustificationLetterComponent = (props: HeroProps): JSX.Element => {
   return (
     <Flex position="relative" width="full" alignItems="center" mt="30px">
       {/* Content */}
@@ -200,3 +205,7 @@ export const HeroJustificationLetter = (props: HeroProps): JSX.Element => {
     </Flex>
   );
 };
+
+export const HeroJustificationLetter = withDatasourceCheck()<HeroProps>(
+  HeroJustificationLetterComponent
+);

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Link.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Box, Link } from '@chakra-ui/react';
 import { ButtonLink } from 'src/basics/ButtonLink';
-import { LinkField, Link as JssLink } from '@sitecore-jss/sitecore-jss-nextjs';
+import { LinkField, Link as JssLink, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that Link will accept
 interface Fields {
   /** Link */
   Link: LinkField;
 }
 
-export type LinkProps = {
-  params: { [key: string]: string };
+export type LinkProps = ComponentProps & {
   fields: Fields;
 };
 
-export const Default = (props: LinkProps): JSX.Element => {
+const LinkComponent = (props: LinkProps): JSX.Element => {
   return (
     <Box>
       <Link
@@ -26,6 +26,10 @@ export const Default = (props: LinkProps): JSX.Element => {
   );
 };
 
-export const Button = (props: LinkProps): JSX.Element => {
+export const Default = withDatasourceCheck()<LinkProps>(LinkComponent);
+
+const LinkButton = (props: LinkProps): JSX.Element => {
   return <ButtonLink field={props.fields.Link} />;
 };
+
+export const Button = withDatasourceCheck()<LinkProps>(LinkButton);

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/TextImage.tsx

@@ -7,8 +7,10 @@ import {
   RichText as JssRichText,
   ImageField,
   Image as JssImage,
+  withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that TextImage will accept
 interface Fields {
@@ -22,12 +24,11 @@ interface Fields {
   Image: ImageField;
 }
 
-export type TextImageProps = {
-  params: { [key: string]: string };
+export type TextImageProps = ComponentProps & {
   fields: Fields;
 };
 
-export const Default = (props: TextImageProps): JSX.Element => {
+const TextImageComponent = (props: TextImageProps): JSX.Element => {
   return (
     <LayoutFlex flexWrap="wrap">
       <Container minW={{ base: '100%', lg: '50%' }} flex="1" pr={{ base: '0', lg: '120' }} pl="0">
@@ -54,3 +55,5 @@ export const Default = (props: TextImageProps): JSX.Element => {
     </LayoutFlex>
   );
 };
+
+export const Default = withDatasourceCheck()<TextImageProps>(TextImageComponent);

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx

@@ -6,6 +6,7 @@ import {
   RichText as JssRichText,
   Text as JssText,
   Item,
+  withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { Box, Flex, Heading, Icon, Image, Stack } from '@chakra-ui/react';
 import { ButtonLink } from 'src/basics/ButtonLink';
@@ -14,6 +15,7 @@ import styled from '@emotion/styled';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
 import { PaddingX } from 'components/Templates/LayoutConstants';
 import clsx from 'clsx';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the fields that the Venue component will accept
 interface Fields {
@@ -26,8 +28,7 @@ interface Fields {
   VenueImages: Item[];
 }
 
-export type VenueProps = {
-  params: { [key: string]: string };
+export type VenueProps = ComponentProps & {
   fields: Fields;
 };
 
@@ -58,7 +59,7 @@ const settings = {
   ),
 };
 
-export const Default = (props: VenueProps): JSX.Element => {
+const VenueComponent = (props: VenueProps): JSX.Element => {
   const [slider, setSlider] = React.useState<Slider | null>(null);
   const id = props?.params?.RenderingIdentifier || undefined;
 
@@ -120,6 +121,8 @@ export const Default = (props: VenueProps): JSX.Element => {
   );
 };
 
+export const Default = withDatasourceCheck()<VenueProps>(VenueComponent);
+
 interface VenueInformationBlockProps {
   FieldTitle: TextField;
   FieldText: RichTextField;

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx

@@ -5,9 +5,11 @@ import {
   Text as JssText,
   RichTextField,
   RichText as JssRichText,
+  withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
+import { ComponentProps } from 'lib/component-props';
 
 // Define the type of props that VideoText will accept
 interface Fields {
@@ -24,11 +26,10 @@ interface Fields {
   Text: RichTextField;
 }
 
-export type VideoTextProps = {
-  params: { [key: string]: string };
+export type VideoTextProps = ComponentProps & {
   fields: Fields;
 };
-export const Default = (props: VideoTextProps): JSX.Element => {
+const VideoTextComponent = (props: VideoTextProps): JSX.Element => {
   return (
     <Box w="100%">
       <LayoutFlex direction="column">
@@ -71,3 +72,5 @@ export const Default = (props: VideoTextProps): JSX.Element => {
     </Box>
   );
 };
+
+export const Default = withDatasourceCheck()<VideoTextProps>(VideoTextComponent);