SUGCON24 EU: Fix Agenda and Sessions addition error bug

src/Project/Sugcon2024/Sugcon/src/components/Events/Agenda.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import InnerHTML from 'dangerously-set-html-content';
-import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import useSWR from 'swr';
+import { ComponentProps } from 'lib/component-props';
 
 interface Fields {
   SessionizeUrl: Field<string>;
 }
 
-type AgendaProps = {
-  params: { [key: string]: string };
+type AgendaProps = ComponentProps & {
   fields: Fields;
 };
 
@@ -20,7 +20,7 @@ const AgendaDefaultComponent = (props: AgendaProps): JSX.Element => (
   </div>
 );
 
-export const Default = (props: AgendaProps): JSX.Element => {
+const AgendaComponent = (props: AgendaProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
 
   const fetcher = (url: string) => fetch(url).then((res) => res.text());
@@ -51,3 +51,5 @@ export const Default = (props: AgendaProps): JSX.Element => {
     </div>
   );
 };
+
+export const Default = withDatasourceCheck()<AgendaProps>(AgendaComponent);

src/Project/Sugcon2024/Sugcon/src/components/Events/Sessions.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import useSWR from 'swr';
 import clsx from 'clsx';
 import { Flex } from '@chakra-ui/react';
+import { ComponentProps } from 'lib/component-props';
 
 interface Fields {
   SessionizeUrl: Field<string>;
 }
 
-type SessionsProps = {
-  params: { [key: string]: string };
+type SessionsProps = ComponentProps & {
   fields: Fields;
 };
 
@@ -21,7 +21,7 @@ const SessionsDefaultComponent = (props: SessionsProps): JSX.Element => (
   </div>
 );
 
-export const Default = (props: SessionsProps): JSX.Element => {
+const SessionsComponent = (props: SessionsProps): JSX.Element => {
   const id = props.params.RenderingIdentifier || undefined;
 
   const fetcher = (url: string) => fetch(url).then((res) => res.text());
@@ -54,3 +54,5 @@ export const Default = (props: SessionsProps): JSX.Element => {
     </Flex>
   );
 };
+
+export const Default = withDatasourceCheck()<SessionsProps>(SessionsComponent);

src/Project/Sugcon2024/Sugcon/src/stories/components/Events/Agenda.stories.tsx

@@ -15,6 +15,9 @@ type Story = StoryObj<typeof meta>;
 export const AgendaStory: Story = {
   name: 'Agenda',
   args: {
+    rendering: {
+      componentName: 'Agenda',
+    },
     params: {
       styles: '',
     },

src/Project/Sugcon2024/Sugcon/src/stories/components/Events/Sessions.stories.tsx

@@ -15,6 +15,9 @@ type Story = StoryObj<typeof meta>;
 export const SessionsStory: Story = {
   name: 'Sessions',
   args: {
+    rendering: {
+      componentName: 'Sessions',
+    },
     params: {
       styles: '',
     },