Update and display talk teasers

One last thing to make the event page complete. The teasers on the page need to show talk teasers and link to associated talks.

final event page

Create the talk-lib file

Create the talk-lib.ts file so you have a dedicated function to query talk data.

To create the talk-lib file:

  1. In Visual Studio Code, open the starter kit repository and go to the /lib/Events folder.

  2. Create a copy of the event-lib.ts file and name it talk-lib.ts.

  3. Open this file and modify it as shown in the following table and code sample.

    Search for

    Change from

    Change to

    Functions that use Event in the title.

    Event

    Talk

    import Event statement

    import Event, {EventResults} from "../../types/Events/event-type";

    (import Talk, { TalkResults } from "../../types/Events/talk-type";)

    import Event statement

    N/A

    import ALL_AGENDA_QUERY, {AGENDA_QUERY} from "../../graphQl/Events/agenda-query";).

    getAllTalk function

    Promise Event[]

    Promise Talk[] .

    getAllTalk function

    ALL_EVENT_QUERY

    ALL_AGENDA_QUERY to pass into the function

    getTalkById function

    Promise Event

    Promise Talk

    getTalkById function

    const queryEvent

    const queryTalk

    getTalkById function

    await fetchAPI(queryEvent)

    await fetchAPI(queryTalk)

    getAllEventsWithIds function

    Promise Event

    Promise Talk .

    getAllEventsWithIds function

    data:allEvent

    data:allTalk

    getAllTalksWithIds function

    EVENT_QUERY

    AGENDA_QUERY

    extractPosts function

    data:Event

    data:Talk

    extractPosts function

    data:EventResults

    data:TalkResults

    extractPost function

    data:Event

    data:Talk

  4. Remove unused imports for events.

  5. Save the file. The final code looks like this.

Create the talkTeaser component file

To create the talkTeaser component file:

  1. In Visual Studio Code, open the starter kit repository, make a copy of the /components/Recipe folder and name it Events.

  2. Open the Events folder and rename the recipeTeaser-component.tsx file talkTeaser-component.tsx.

  3. Open the talkTeaser-component.tsx file and change all mentions of recipe to equivalent mentions of talk.

  4. Save the file. The final code looks like this.

Create the talk details page

Create the talk details pages so the talk IDs are passed through the URL and query for data.

To create the talk details page:

  1. In Visual Studio Code, open the starter kit repository and go to the /pages folder.

  2. Create a copy of the recipes folder and name it talk.

  3. Open the /pages/talk/[slug].tsx file.

  4. Modify it as follows to create the talk detail pages, changing all instances of recipe to equivalent instances of talk.

    Search for

    Change from

    Change to

    import Recipe

    import Recipe, {RecipeResults} from "../../types/Recipe/recipe-type";

    import Talk, {TalkResults} from "../../types/Events/talk-type";

    import {getRecipeById

    import {getRecipeById,getAllRecipeWithIds} from "../../lib/Recipe/recipe-lib";

    import {getTalkById,getAllTalksWithIds} from "../../lib/Events/talk-lib";

    getStaticProps function

    const recipe

    const talk

    getStaticProps function

    get recidpeById

    getTalkById

    getStaticProps function

    props: {recipe,homepage}

    props: {talk,homepage}

    getStaticPaths function

    const allRecipePost

    const allTalksPost

    getStaticPaths function

    getAllRecipesWithIds

    getAllTalksWithIds

    getStaticPaths function

    allRecipePosts.map(({ id }) = /recipes/${id})

    allTalkPosts.map(({ id }) = /talk/${id})

    props definition

    recipe: Recipe

    talk: Talk

    Post property

    recipe

    talk

    title tags

    recipe?.Title

    talk?.talkTitle

    HeroBanner

    recipeImage (recipe?.image?.results[0].fileUrl)

    talkImage (talk?.image?.results[0].fileUrl)

    h1 tag

    h1 {recipe?.Title} /h1

    h1 {talk?.talkTitle} /h1

    strong Duration: /strong

    {recipe?.Duration}

    {talk?.time}

    strong Ingredients: /strong

    p strong Ingredients: /strong {recipe?.Ingredients}/p

    Remove or comment out.

  5. Remove Output Duration and Ingredients as these are not needed.

  6. Remove the RichText Component as this is not needed because talkDescription is not rich text.

  7. Add Talk Data. The final code looks like this.

Update the event.tsx file

To update the event.tsx file:

  1. In Visual Studio Code, open the starter kit repository and go to the /pages folder.

  2. Open the event.tsx file.

  3. Add the line import TalkTeaserComponent from '../components/Talk/talkTeaser-component'; after the import FooterComponent statement.

  4. Add the following lines before the FooterComponent.

    RequestResponse
    
         TalkTeaserComponent
          allTalks={event.agenda}
         / 
    
    
  5. Save the file.

  6. If the website is not still running locally, run npm run dev.

  7. Navigate to http://localhost:3000/event to open the event page and see your changes.

The final code should look like this.

Your first foray into Content Hub ONE development is complete! You're now ready to continue your developer journey to build and deliver great applications.

Do you have some feedback for us?

If you have suggestions for improving this article,