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],
"import/prefer-default-export": 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 { 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) {
data.forEach((stream, index) => {
if (calData && calData.length) {
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}
/>

View File

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

View File

@ -1,5 +1,6 @@
export default {
peertube_root: 'https://tv.undersco.re',
EVENTS_API_URL: 'http://localhost:3031',
seriesTrailerId: 'b-JQ5Bo4JnI',
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 ICAL from 'ical.js'
import config from '../data/config'
export const useEventStream = () => {
export const useEventCalendar = () => {
const [data, setData] = useState([])
const [loading, setLoading] = useState(true)
@ -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 }
}