[OLD] Map Event Data to text on Page

[ethmth]

Background Information on Book

Right now, our "Book" has the potential for multiple pages defined in the 'src/components/Pages.jsx' file. Upon inspection of that file, you will see that a page is defined as an array of length 2 of two components, which can be custom components like "HomePageLeft" and "HomePageRight," or just plain divs. These 2-arrays are put together in a parent array to form the pages of our book.

For specific types of pages, like Speaker pages or Event pages, I call custom functions like "getSpeakerPages" or "getEventsPages" to return those pages. You can find these functions in their respective folders in 'src/components/pages.'

After gaining a basic understanding of how this "pages" array is formed by inspecting "Pages.jsx" and some function like "getEventsPages", please begin working on the appropriate task outlined below.

Mapping Event Data to Components

Right our book's event pages have nothing

And we want to fill these pages up with the different events that devfest will have (here's an example from last year's site, 2023.devfestcu.com).

However, this year, instead of hardcoding the events into the webpage, we are fetching the data directly from a json file hosted on the web, which I've made available as the "data" prop. The "getEventsPages" function is passed this "data" prop, and I encourage you to inspect it by doing console.log(data) the data so you know how its formatted.

Note: in order to see the sample data I've provided, you will need to update/create a file named .env.local at the root of the project and add set the 'DATA_URL=' variable to a URL that I will provide if you dm me in Slack (this GitHub repo is public and we don't want to make this URL public, because someone would be able to change the Event data to anything they want). This is the type of data you should be getting if you've done it right:

Your task is to map the "Events" values in this data variable to text on the page. There can be an arbitrary number of events. Right now, the formatting doesn't matter. You can choose to create 1 page per event, or you can display them all on one page, or something in between. We will work on making it look good later.

This is the same way we will display "Workshops," and similar to how we will display "Speakers" and "Instructors" as well, so if you can make your code re-usable, please do so.