added data hook for calling events API

.eslintrc

@@ -4,6 +4,7 @@
     "indent": ["error", 2],
     "import/prefer-default-export": 0,
     "react/require-default-props": 0,
-    "react/forbid-prop-types": 0
+    "react/forbid-prop-types": 0,
+    "react/prop-types": 1
   }
 }

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "eslint.enable": true,
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#233b4a",
+    "titleBar.inactiveForeground": "#F1CFCD",
+    "titleBar.activeForeground": "#F1CFCD",
+    "titleBar.inactiveBackground": "#233b4a"
+  },
+  "files.exclude": {
+    // Directories
+    // "public/": true,
+    ".cache/": true,
+    "node_modules/": true,
+    // Files
+    // ".npmrc": true,
+    // "gatsby-ssr.js": true,
+    "LICENSE": true,
+    // "README.md": true,
+    "yarn.lock": true
+    // "gatsby-node.js": true
+  }
+}

app.js

@@ -1,13 +1,12 @@
 import { h } from 'preact'
 import { useState, useEffect } from 'preact/hooks'
-import { isWithinInterval, subHours } from 'date-fns'
+import { isWithinInterval, subHours, addHours } from 'date-fns'
 import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
-import { addHours } from 'date-fns/esm'
 
 import Video from './src/components/Video'
 import config from './src/data/config'
 import Info from './src/components/Info'
-import { useEventStream } from './src/hooks/data'
+import { useEventCalendar, useEventApi } from './src/hooks/data'
 import { useTimeout } from './src/hooks/timerHooks'
 
 export default () => {
@@ -15,15 +14,16 @@ export default () => {
   const [streamIsLive, setStreamIsLive] = useState(false)
   const [infoActive, setInfoActive] = useState(false)
   const [minLoadTimePassed, setMinTimeUp] = useState(false)
-  const { data, loading } = useEventStream()
+  const { data: calData, loading } = useEventCalendar()
+  const { data: eventsData, loading: eventsLoading } = useEventApi()
 
   useTimeout(() => {
     setMinTimeUp(true)
   }, 1500)
 
   useEffect(() => {
-    if (data && data.length) {
+    if (calData && calData.length) {
-      data.forEach((stream, index) => {
+      calData.forEach((stream, index) => {
         const utcStartDate = zonedTimeToUtc(
           new Date(stream.start),
           'Europe/Berlin'
@@ -51,7 +51,7 @@ export default () => {
         }
       })
     }
-  }, [data])
+  }, [calData, eventsData, eventsLoading])
 
   return (
     <div>
@@ -59,10 +59,9 @@ export default () => {
         <Video video={currentVideo} setInfoActive={setInfoActive} />
       ) : (
         <Info
-          data={data}
+          data={calData}
           loading={loading || !minLoadTimePassed}
           infoActive={infoActive}
-          // infoActive
           currentVideo={currentVideo}
           setInfoActive={setInfoActive}
         />

src/components/Video/index.js

@@ -1,8 +1,6 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import {
-  bool,
-  func,
   instanceOf,
   number,
   object,

src/data/config.js

@@ -1,5 +1,6 @@
 export default {
   peertube_root: 'https://tv.undersco.re',
+  EVENTS_API_URL: 'http://localhost:3031',
   seriesTrailerId: 'b-JQ5Bo4JnI',
 
   calendarId: 'Nt767W2KeKFSTZ8x',

src/hooks/data.js

@@ -1,9 +1,9 @@
-import { useEffect, useState, useRef } from 'preact/hooks'
+import { useEffect, useState } from 'preact/hooks'
 import axios from 'axios'
 import ICAL from 'ical.js'
 import config from '../data/config'
 
-export const useEventStream = () => {
+export const useEventCalendar = () => {
   const [data, setData] = useState([])
   const [loading, setLoading] = useState(true)
 
@@ -24,7 +24,7 @@ export const useEventStream = () => {
           vevent.getFirstPropertyValue('status') === null ||
           (vevent.getFirstPropertyValue('status') &&
             vevent.getFirstPropertyValue('status').toUpperCase() ===
-              'CONFIRMED')
+            'CONFIRMED')
       )
       .map(vevent => {
         const event = new ICAL.Event(vevent)
@@ -93,3 +93,28 @@ export const useEventStream = () => {
 
   return { loading, data }
 }
+
+
+
+export const useEventApi = () => {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  async function fetchData() {
+    setLoading(true)
+
+    const { data: responseData } = await axios.get(
+      `${config.EVENTS_API_URL}/events`
+    )
+
+    setData(responseData)
+
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  return { loading, data }
+}