List of Events

app/api/events.mjs

@@ -1,8 +1,18 @@
 import data from '../data/events.json' assert { type: 'json' }
+import { inflateSponsors } from './sponsors.mjs'
+import { inflateTalk } from './talks.mjs'
 export async function get() {
   return {
     json: { data }
   }
 }
 
 export const events = data
+
+export function inflateEvent(event) {
+  if (event.talks) {
+    event.talks = event.talks.map(inflateTalk)
+    event.sponsors = event.sponsors.map(inflateSponsors)
+  }
+  return event
+}

app/api/events/$id.mjs

@@ -1,9 +1,30 @@
-import { events } from '../events.mjs'
+import events from '../../data/events.json' assert { type: 'json' }
+import  { inflateEvent } from '../events.mjs'
 
 export async function get(req) {
-  let { id } = req.params
-  let event = events.find(s => s.id === id)
+  let { path } = req
+  const event = events.find(e => e.id === req.params.id)
+
+  if (!event) {
+    return {
+      statusCode: 404,
+      json: {
+        path,
+        notFound: true
+      }
+    }
+  } else {
+  // We have to convert event from an object to an array to inflate it
+  let inflatedEvent = [event].map(inflateEvent)
+  let eventSponsors = event.sponsors
+  let eventTalks = event.talks
+
+  // In event/$id we are reusing the element <list-talks> which expects a list of events
   return {
-    json: { event }
-  }
-}
+    json: {
+      events: inflatedEvent,
+      sponsors: eventSponsors,
+      talks: eventTalks
+    }
+  }}
+}

app/api/index.mjs

@@ -1,29 +1,7 @@
-import { events } from './events.mjs'
-import { talks } from './talks.mjs'
-import { speakers } from './speakers.mjs'
+import { events, inflateEvent } from './events.mjs'
 import { organizers } from './organizers.mjs'
 import { sponsors } from './sponsors.mjs'
 
-function inflateTalk(talk_id) {
-  let talk = talks.find(t => t.id === talk_id)
-  if (talk.speaker_id) {
-    talk.speaker = speakers.find(s => s.id === talk.speaker_id)
-  }
-  return talk
-}
-
-function inflateSponsors(sponsor_id) {
-  return sponsors.find(s => s.id === sponsor_id)
-}
-
-function inflateEvent(event) {
-  if (event.talks) {
-    event.talks = event.talks.map(inflateTalk)
-    event.sponsors = event.sponsors.map(inflateSponsors)
-  }
-  return event
-}
-
 function filterFutureEvents() {
   const TWELVE_HOURS = 1000 * 60 * 60 * 12
   return events.filter(

app/api/sponsors.mjs

@@ -6,3 +6,8 @@ export async function get() {
 }
 
 export const sponsors = data
+
+export
+function inflateSponsors(sponsor_id) {
+  return sponsors.find(s => s.id === sponsor_id)
+}

app/api/talks.mjs

@@ -1,8 +1,28 @@
 import data from '../data/talks.json' assert { type: 'json' }
+import speakers from '../data/speakers.json' assert { type: 'json' }
+
 export async function get() {
+
   return {
-    json: data
+    json: data.map(t => {
+        let speaker = speakers.find(s => s.id === t.speaker_id)
+        return {
+          id: t.id,
+          event_id: t.event_id,
+          title: t.title,
+          abstract: t.abstract,
+          speaker,
+        }
+      })
   }
 }
 
 export const talks = data
+
+export function inflateTalk(talk_id) {
+  let talk = talks.find(t => t.id === talk_id)
+  if (talk.speaker_id) {
+    talk.speaker = speakers.find(s => s.id === talk.speaker_id)
+  }
+  return talk
+}

app/data/events.json

@@ -2,7 +2,7 @@
     {
         "id": "may-2022",
         "title": "SeattleJS May 2022",
-        "date": "2022-10-12",
+        "date": "2022-05-11",
         "sponsors": [
             "collective-seattle"
         ],
@@ -13,7 +13,7 @@
     {
         "id": "june-2022",
         "title": "SeattleJS June 2022",
-        "date": "2022-10-12",
+        "date": "2022-06-08",
         "sponsors": [
             "collective-seattle"
         ],
@@ -24,29 +24,29 @@
     {
         "id": "july-2022",
         "title": "SeattleJS July 2022",
-        "date": "2022-10-12",
+        "date": "2022-07-13",
         "sponsors": [
             "collective-seattle"
-        ]
+        ],
+        "talks": []
     },
     {
         "id": "august-2022",
         "title": "SeattleJS August 2022",
-        "date": "2022-10-12",
+        "date": "2022-08-10",
         "sponsors": [
             "collective-seattle"
-        ]
+        ],
+        "talks": []
     },
     {
         "id": "september-2022",
         "title": "SeattleJS September 2022",
-        "date": "2022-10-12",
+        "date": "2022-09-14",
         "sponsors": [
             "collective-seattle"
         ],
-        "talks": [
-            "rachel-lee-nabors"
-        ]
+        "talks": []
     },
     {
         "id": "october-2022",
@@ -85,7 +85,7 @@
         "title": "SeattleJS January 2023",
         "date": "2023-01-11",
         "sponsors": [
-            "aws-skills-center"
+            "aws-skills-center-seattle"
         ],
         "talks": [
             "calvin-kipperman-january-2023",

app/elements/events-list.mjs

@@ -0,0 +1,43 @@
+export default function EventsList({ html, state }) {
+    const { store } = state
+    const allEvents = store.data.sort((a,b) => new Date(b.date) - new Date(a.date))
+
+    let now = new Date().toISOString().split('T')[0]
+    let pastEvents  = allEvents.filter(e => e.date < now)
+
+    if (pastEvents.length > 0) {
+      return html`
+      <style>
+      @media only screen and (min-width: 768px) {
+        :host {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: flex-start;
+        }
+      }
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+      li {
+        list-style-type: none;
+      }
+    </style>
+    <ul>
+        ${pastEvents.map(
+            e => `
+            <li >
+              <a href="/events/${e.id}">
+                ${e.title}
+              </a>
+            </li>`
+          )
+          .join('')}
+    </ul>
+      `
+    }else {
+        return `
+        <p>Wait for it...</p>
+        `
+    }
+  }

app/elements/list-sponsors.mjs

@@ -21,7 +21,7 @@ export default function ListSponsors({ html, state = {} }) {
       ${sponsors
         .map(
           s => html` <div>
-            <a target="_sponsor" href="${s.url}"
+            <a target="_blank" href="${s.url}"
               ><img src="/_public/images/sponsors/${s.image}"
             /></a>
           </div>`

app/elements/view-event.mjs

@@ -2,6 +2,7 @@ import { marked } from 'marked'
 
 export default function ViewEvent({ html, state = {} }) {
   const { attrs, store } = state
+
   let { events } = store
   let { id } = attrs
   let event = events.find(e => e.id === id)
@@ -27,5 +28,10 @@ export default function ViewEvent({ html, state = {} }) {
       ></a>
     </div>
     <list-talks event_id="${event.id}"></list-talks>
+    <div class="">
+      <a target="_self" href="/events">
+        See all past events <i class="fa-solid fa-arrow-right"></i>
+      </a>
+    </div>
   `
 }

app/pages/events.mjs

@@ -1,16 +1,10 @@
-export default function ({ html, state = {} }) {
-  let { store = {} } = state
-  let { events } = store
-  //console.log(events)
+export default function events({ html }) {
+
   return html`
     <my-layout>
       <div id="page">
-        <div class="page-title"><h1>Our Events</h1></div>
-        <div class="page-body">
-          <ul>
-            ${events.map(e => /*html*/ `<li>${e.title}</li>`).join('')}
-          </ul>
-        </div>
+        <div class=""><h1>Our Past Events</h1></div>
+          <events-list></events-list>
       </div>
     </my-layout>
   `

app/pages/events/$id.mjs

@@ -1,9 +1,23 @@
+import { marked } from "marked"
+
 export default function ({ html, state = {} }) {
   let { store = {} } = state
-  let { event } = store
+  let event = store.events[0]
+  let hasTalks = event.talks && event.talks.length > 0
+  let { id, title, sponsors, description } = event
+
   return html`
-    <page-layout title=${event.title}>
-      <pre>${JSON.stringify(event, null, 2)}</pre>
+  <page-layout title=${title}>
+      <h3>${title}</h3>
+      ${description && `<p>${marked(description)}</p>` }
+      <h4>Thanks to our Sponsors ❤️</h4>
+      ${sponsors ? html`<list-sponsors></list-sponsors>` : null}
+      ${hasTalks ? html`<list-talks event_id="${id}"></list-talks>`: html`<p>No talks were given durring this event.</p>`}
+      <div class="">
+        <a target="_self" href="/events">
+          See all past events <i class="fa-solid fa-arrow-right"></i>
+        </a>
+      </div>
     </page-layout>
   `
 }

app/pages/talks.mjs

@@ -1,13 +1,27 @@
 export default function ({ html, state = {} }) {
-  let { store = {} } = state
-  let { talks } = store
+  let { store } = state
+  let talks = [...Object.values(store)]
+
   return html`
+    <style>
+      ul {
+        padding: 0;
+      }
+      li {
+        list-style-type: none;
+        padding-bottom: 0.5em;
+      }
+    </style>
     <my-layout>
       <div id="page">
-        <div class="page-title"><h1>Talk List</h1></div>
+        <div class="page-title"><h1>Past Talks</h1></div>
         <div class="page-body">
           <ul>
-            ${talks.map(t => /*html*/ `<li>${t.title}</li>`).join('')}
+            ${talks
+              .map(
+                t => /*html*/ `<li>${t.title} - Speaker: ${t.speaker.name}</li>`
+              )
+              .join('')}
           </ul>
         </div>
       </div>

app/pages/talks/$id.mjs

@@ -20,7 +20,7 @@ export default function ({ html, state = {} }) {
       </div>
       `
   }
-  else {  
+  else {
     // set the "photo" property with an absolute path (so that the <person-detail> element will work)
     let speakerClone = { ...speaker }
     speakerClone.photo = '/_public/images/speakers/' + speaker.photo
@@ -40,9 +40,9 @@ export default function ({ html, state = {} }) {
             padding:8px;
         }
       </style>
-      <page-layout title=${talk.title}>      
+      <page-layout title=${talk.title}>
         <h2>${ title }</h2>
-        <div class="topics">${ topics.map(t => `<div class=topic>${ t }</div>`).join('') }</div>
+        ${topics ? html`<div class="topics">${ topics.map(t => `<div class=topic>${ t }</div>`).join('') }</div>` : null }
         <div class="abstract">${ marked.parse(abstract) }</div>
         <person-detail ${ speakerProps }></person-detail>
       </page-layout>