Merge pull request #406 from ericsanner/feature/38-speakers-list

Add Speakers component to read data from Sessionize

src/Project/Sugcon2024/Sugcon/package.json

@@ -48,6 +48,7 @@
     "@sitecore/engage": "^1.4.1",
     "@types/react-slick": "^0.23.13",
     "bootstrap": "^5.1.3",
+    "cheerio": "^1.0.0-rc.12",
     "font-awesome": "^4.7.0",
     "framer-motion": "^10.18.0",
     "graphql": "~15.8.0",

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

@@ -23,6 +23,7 @@ import {
   Link as JssLink,
   TextField,
   Text as JssText,
+  RichText as JssRichText,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 
@@ -131,7 +132,7 @@ export const Default = (props: PersonProps): JSX.Element => {
                 <Box w={{ base: '100%', md: 'inherit' }} px={10} mb={{ base: 10, md: 0 }}>
                   <Image src={props.fields.Image?.value?.src} w={200} borderRadius={15} />
                 </Box>
-                <Box>
+                <Box w={{ base: '100%', md: '55%', lg: '60%' }}>
                   <Heading as="h3" size="lg">
                     {props.fields.Name?.value}
                   </Heading>
@@ -141,9 +142,7 @@ export const Default = (props: PersonProps): JSX.Element => {
                   <Text fontSize="12px" mb={0}>
                     {props.fields.Company?.value}
                   </Text>
-                  <Text fontSize="12px" mb={0}>
-                    {props.fields.Biography?.value}
-                  </Text>
+                  <Text as={JssRichText} fontSize="12px" mb={0} field={props.fields.Biography} />
                 </Box>
               </Flex>
             </ModalBody>

src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx

@@ -0,0 +1,150 @@
+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 { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person';
+import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
+import * as cheerio from 'cheerio';
+
+// Define the type of props that People Grid will accept
+interface Fields {
+  /** Headline */
+  Headline: TextField;
+
+  /** Sessions List Title */
+  SessionsListTitle: Field<string>;
+
+  /** Url for sessionize speaker data */
+  SessionizeSpeakerUrl: Field<string>;
+}
+
+// Define the type of props for an Person
+interface PersonItem {
+  /** Display name of the person item */
+  displayName: string;
+
+  /** The details of a person */
+  fields: PersonFields;
+
+  /** The item id of the person item */
+  id: string;
+
+  /** Name of the person item */
+  name: string;
+
+  /** Url of the person item */
+  url: string;
+}
+
+export type PeopleGridProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+function getPeople(sessionTitle: string, body: string) {
+  const people: Array<PersonItem> = [];
+  const $ = cheerio.load(body);
+
+  const speakers = $('.sz-speaker--full');
+  for (let i = 0; i < speakers.length; i++) {
+    const image = $('.sz-speaker__photo img', speakers[i])[0];
+    const name = $('.sz-speaker__name', speakers[i]).text();
+    const tagline = $('.sz-speaker__tagline', speakers[i]).text().trim();
+    let bio = $('.sz-speaker__bio', speakers[i]).text();
+    const sessions = $('.sz-speaker__sessions li a', speakers[i]);
+
+    if (sessions.length > 0) {
+      bio = bio.concat('<h4>' + sessionTitle + '</h4>');
+      bio = bio.concat('<ul>');
+
+      sessions.each((_i, el) => {
+        bio = bio.concat('<li>' + $(el).text() + '</li>');
+      });
+
+      bio = bio.concat('</ul>');
+    }
+
+    const prsn: PersonItem = {
+      displayName: name,
+      fields: {
+        Twitter: { value: {} },
+        Company: {
+          value: '',
+        },
+        Name: {
+          value: name,
+        },
+        JobRole: {
+          value: tagline,
+        },
+        Biography: {
+          value: bio,
+        },
+        Linkedin: { value: {} },
+        Image: {
+          value: {
+            src: image.attribs.src,
+            alt: image.attribs.alt,
+            width: '400',
+            height: '400',
+          },
+        },
+      },
+      id: '',
+      name: name,
+      url: '',
+    };
+
+    people.push(prsn);
+  }
+
+  return people;
+}
+
+export const Default = (props: PeopleGridProps): JSX.Element => {
+  const styles = props.params && props.params.Styles ? props.params.Styles : '';
+  const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 4;
+
+  const [people, setPeople] = useState(Array<PersonItem>);
+
+  useEffect(() => {
+    fetch(props.fields.SessionizeSpeakerUrl?.value)
+      .then((response) => {
+        if (response.ok) {
+          return response.text();
+        } else {
+          throw response;
+        }
+      })
+      .then((data) => {
+        setPeople(getPeople(props.fields.SessionsListTitle?.value, data));
+      })
+      .catch((error) => {
+        console.log('Error fetching data: ' + error);
+      });
+  });
+
+  if (props.params && props.params.Alphabetize == '1') {
+    people.sort((a, b) => (a.fields?.Name?.value + '' > b.fields?.Name?.value + '' ? 1 : -1));
+  }
+
+  return (
+    <Box w="100%" mt={20} className={styles}>
+      <Box w="80%" pt={10} m="auto">
+        {(isEditorActive() || props.fields?.Headline?.value !== '') && (
+          <Heading as="h2" size="lg">
+            <JssText field={props.fields.Headline} />
+          </Heading>
+        )}
+        <SimpleGrid columns={{ base: 1, md: cols }} mt={10}>
+          {people.map((person, idx) => {
+            const pp: PersonProps = {
+              params: props.params,
+              fields: person.fields,
+            };
+            return <Person key={idx} {...pp}></Person>;
+          })}
+        </SimpleGrid>
+      </Box>
+    </Box>
+  );
+};

src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/SpeakerGrid.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Default as SpeakersGrid } from '../../../components/List Components/SpeakersGrid';
+import '../../../assets/sass/components/people-grid/index.scss';
+const meta = {
+  title: 'Components/SpeakersGrid',
+  component: SpeakersGrid,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof SpeakersGrid>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Teaser: Story = {
+  name: 'Speakers Grid',
+  args: {
+    params: {
+      Columns: '4',
+      Alphabetize: '1',
+      LinkToBio: '1',
+      DisplaySocialLinks: '0',
+      Styles: '',
+    },
+    fields: {
+      Headline: {
+        value: 'Speakers',
+      },
+      SessionsListTitle: {
+        value: 'Sessions',
+      },
+      SessionizeSpeakerUrl: {
+        value: '/speakers.html',
+      },
+    },
+  },
+};

src/Project/Sugcon2024/items/SiteEU/EU/Data/Speakers Grid.yml

@@ -0,0 +1,31 @@
+---
+ID: "7025d00d-feca-479b-8458-e28b3e7e5943"
+Parent: "968dab46-6eda-4775-8a0f-85037e2d92f2"
+Template: "cfa6fba3-8317-4494-8e61-2f7f2c19e369"
+Path: /sitecore/content/Sugcon2024/EU/Data/Speakers Grid
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240314T134853Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "6746a675-9d3f-41c0-bf66-59ef73cc886e"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240314T134853Z

src/Project/Sugcon2024/items/SiteShared/Shared/Data/Speakers Grid.yml

@@ -0,0 +1,31 @@
+---
+ID: "ed2f5f2f-88d6-4b45-a8b4-85456d32c9b1"
+Parent: "0c5c8db1-5dc6-4a54-a232-750f004bfb84"
+Template: "cfa6fba3-8317-4494-8e61-2f7f2c19e369"
+Path: /sitecore/content/Sugcon2024/Shared/Data/Speakers Grid
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240314T134829Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "9ebd26ef-b707-4edd-a26a-4c76010132e0"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240314T134829Z