initial commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/build
+/*.log

manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "kultar-events-app",
+  "short_name": "kultar-events-app",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "name": "kultar-events-app",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "preact build",
+    "serve": "sirv build --cors --single",
+    "dev": "preact watch",
+    "lint": "eslint src"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-synacor"
+  },
+  "eslintIgnore": [
+    "build/*"
+  ],
+  "devDependencies": {
+    "eslint": "^6.0.1",
+    "eslint-config-synacor": "^3.0.4",
+    "preact-cli": "^3.0.0-rc.6",
+    "sirv-cli": "^0.4.5"
+  },
+  "dependencies": {
+    "preact": "^10.1.0",
+    "preact-render-to-string": "^5.1.2"
+  }
+}

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+}

src/Events.js

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'preact/hooks'
+
+const endpoint = 'https://kultar.sout.no/events/'
+const fetch_options = {}
+
+function Tickets({ ticket_link }) {
+  console.log(ticket_link)
+  return <a href="">Biletter</a>
+}
+
+function Time({ date }) {
+  const hasTime = date.getHours() === 0
+  const time_option = hasTime ? undefined : 'numeric'
+  const options = {
+    month: 'long',
+    weekday: 'long',
+    day: 'numeric',
+    hour: time_option,
+    minute: time_option,
+  }
+  return <h4>{new Intl.DateTimeFormat('no', options).format(date)}</h4>
+}
+
+function Location({ location }) {
+  const { location: area, host } = location
+  const hasHost = host.length !== 0
+  const hasArea = area.length !== 0
+
+  if (hasHost && hasArea) {
+    return (
+      <p>
+        {host}, {area}.
+      </p>
+    )
+  }
+
+  if (hasHost) {
+    return <p>{host}.</p>
+  }
+
+  if (hasArea) {
+    return <p>{area}.</p>
+  }
+
+  return ''
+}
+
+function EventCard({ event }) {
+  const { event_id, name, location, date, ticket_link } = event
+
+  return (
+    <div>
+      <h3>{name}</h3>
+      <Time date={new Date(date)} />
+      <Tickets ticket_link={ticket_link} />
+      <Location location={location} />
+    </div>
+  )
+}
+
+function Event({ event, index }) {
+  const isFirstEvent = index === 0
+
+  /* if (isFirstEvent) {
+   *   return <EventCard event={event} />
+   * } */
+
+  return (
+    <>
+      <EventCard event={event} />
+      <hr />
+    </>
+  )
+}
+
+export default function Events() {
+  const [events, setEvents] = useState(null)
+
+  useEffect(async () => {
+    const res = await fetch(endpoint, fetch_options)
+    const result = await res.json()
+    setEvents(result)
+  }, [])
+
+  if (events === null) {
+    return <p>Laster arrangement...</p>
+  }
+
+  if (events.length <= 0) {
+    return <p>Det er ingen fremtidige arrangement.</p>
+  }
+
+  return (
+    <>
+      {events.map((event, index) => (
+        <Event event={event} index={index} />
+      ))}
+    </>
+  )
+}

src/index.js

@@ -0,0 +1,6 @@
+import './style'
+import Events from './Events.js'
+
+export default function App() {
+  return <Events />
+}

src/style.css

@@ -0,0 +1,9 @@
+html,
+body {
+  font: 14px/1.21 'Helvetica Neue', arial, sans-serif;
+  font-weight: 400;
+}
+
+h1 {
+  text-align: center;
+}