stream/src/components/Info/index.js
2021-03-11 21:24:44 +01:00

52 lines
1.4 KiB
JavaScript

/* eslint-disable react/prop-types */
import { h, Fragment } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import { isBefore } from 'date-fns'
import { P } from '../Text'
import translations from '../../data/strings'
import InfoLayout from '../InfoLayout'
import { VideoCard, Title, InfoContent } from './styles'
const Info = ({ data, loading }) => {
const now = new Date()
const pastStreams =
data && data.length
? data.filter(feeditem => isBefore(new Date(feeditem.end), now))
: []
const futureStreams =
data && data.length
? data.filter(feeditem => isBefore(now, new Date(feeditem.start)))
: []
return (
<InfoLayout
title={
data && data.length
? `${translations.en.nextStream}:`
: translations.en.noStreams
}
loading={loading}
>
{!loading && (
<InfoContent>
{futureStreams.map(feeditem => (
<VideoCard key={feeditem.start} {...feeditem} />
))}
{pastStreams.length ? (
<Fragment>
<Title>{translations.en.pastStream}:</Title>
{pastStreams.map(feeditem => (
<VideoCard key={feeditem.start} hasPassed {...feeditem} />
))}
</Fragment>
) : null}
</InfoContent>
)}
</InfoLayout>
)
}
export default Info