added data hook for calling events API

This commit is contained in:
Sunda 2021-10-11 13:48:17 +02:00
parent 0d26e273a6
commit fe85d93700
6 changed files with 61 additions and 15 deletions

View File

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

22
.vscode/settings.json vendored Normal file
View File

@ -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
}
}

17
app.js
View File

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

View File

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

View File

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

View File

@ -1,9 +1,9 @@
import { useEffect, useState, useRef } from 'preact/hooks' import { useEffect, useState } from 'preact/hooks'
import axios from 'axios' import axios from 'axios'
import ICAL from 'ical.js' import ICAL from 'ical.js'
import config from '../data/config' import config from '../data/config'
export const useEventStream = () => { export const useEventCalendar = () => {
const [data, setData] = useState([]) const [data, setData] = useState([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
@ -93,3 +93,28 @@ export const useEventStream = () => {
return { loading, data } 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 }
}