From b810fabe7968046be4738c7abfc56ff967dcb0c9 Mon Sep 17 00:00:00 2001
From: gkLeo <Geek_Leo@outlook.com>
Date: Sun, 7 Apr 2024 16:12:36 +0800
Subject: [PATCH] use withDatasourceCheck in ListComponents

---
 .../src/components/List Components/Accordion.tsx  | 11 +++++++----
 .../src/components/List Components/PeopleGrid.tsx | 10 ++++++----
 .../components/List Components/SpeakersGrid.tsx   | 15 +++++++++++----
 3 files changed, 24 insertions(+), 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
index a7a0c073..781b597c 100644
--- 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
index 415bb5d0..6c16e89c 100644
--- 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 @@ 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
index 0d153311..db7e23cf 100644
--- 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);