added footer images on series type + other dertails

index.js

@@ -60,8 +60,6 @@ const App = () => {
     }
   }, [eventsLoading])
 
-  // console.log({ episodes: data.episodes, series: data.series })
-
   const seriesData = data.series ? Object.values(data.series) : []
 
   return (

src/components/SeriesCard/index.js

@@ -22,9 +22,8 @@ const SeriesCard = ({
       ? strings.en.nextStream
       : strings.en.lastStream
 
-    console.log({ el1: episodes })
-
     const episodesList = episodes[hasFutureEpisodes ? 'future' : 'past']
+
     const mainText = formatDistanceToNow(
       new Date(
         episodesList[hasFutureEpisodes ? 0 : episodesList.length - 1][

src/hooks/data.js

@@ -4,101 +4,101 @@ import { useEffect, useState } from 'preact/hooks'
 
 import { secondsToMilliseconds } from 'date-fns'
 import axios from 'axios'
-import ICAL from 'ical.js'
+// import ICAL from 'ical.js'
 import config from '../data/config'
 import { useSeriesStore, useStreamStore } from '../store/index'
 import { useInterval } from './timerHooks'
 
-export const useEventCalendar = () => {
+// export const useEventCalendar = () => {
-  const [data, setData] = useState([])
+//   const [data, setData] = useState([])
-  const [loading, setLoading] = useState(true)
+//   const [loading, setLoading] = useState(true)
 
-  async function fetchData() {
+//   async function fetchData() {
-    setLoading(true)
+//     setLoading(true)
 
-    const { data: responseData } = await axios.get(
+//     const { data: responseData } = await axios.get(
-      `https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
+//       `https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
-    )
+//     )
-    const jCalData = ICAL.parse(responseData)
+//     const jCalData = ICAL.parse(responseData)
-    const comp = new ICAL.Component(jCalData)
+//     const comp = new ICAL.Component(jCalData)
 
-    const vevents = comp.getAllSubcomponents('vevent')
+//     const vevents = comp.getAllSubcomponents('vevent')
 
-    const calEvents = vevents
+//     const calEvents = vevents
-      .filter(
+//       .filter(
-        vevent =>
+//         vevent =>
-          vevent.getFirstPropertyValue('status') === null ||
+//           vevent.getFirstPropertyValue('status') === null ||
-          (vevent.getFirstPropertyValue('status') &&
+//           (vevent.getFirstPropertyValue('status') &&
-            vevent.getFirstPropertyValue('status').toUpperCase() ===
+//             vevent.getFirstPropertyValue('status').toUpperCase() ===
-              'CONFIRMED')
+//               'CONFIRMED')
-      )
+//       )
-      .map(vevent => {
+//       .map(vevent => {
-        const event = new ICAL.Event(vevent)
+//         const event = new ICAL.Event(vevent)
-        return event
+//         return event
-      })
+//       })
-      .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
+//       .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
 
-    await Promise.all(
+//     await Promise.all(
-      calEvents.map(async calItem => {
+//       calEvents.map(async calItem => {
-        const url = calItem.component.getAllProperties('url')[0]
+//         const url = calItem.component.getAllProperties('url')[0]
-        if (url) {
+//         if (url) {
-          const id = url
+//           const id = url
-            .getFirstValue()
+//             .getFirstValue()
-            .split('/')
+//             .split('/')
-            .pop()
+//             .pop()
-          const {
+//           const {
-            data: {
+//             data: {
-              account,
+//               account,
-              category,
+//               category,
-              channel,
+//               channel,
-              embedPath,
+//               embedPath,
-              language,
+//               language,
-              state,
+//               state,
-              previewPath,
+//               previewPath,
-              views,
+//               views,
-              duration,
+//               duration,
-            },
+//             },
-          } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
+//           } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
 
-          const item = {
+//           const item = {
-            title: calItem.summary,
+//             title: calItem.summary,
-            account,
+//             account,
-            category,
+//             category,
-            channel,
+//             channel,
-            description: calItem.description,
+//             description: calItem.description,
-            embedPath,
+//             embedPath,
-            language,
+//             language,
-            state,
+//             state,
-            previewPath,
+//             previewPath,
-            views,
+//             views,
-            start: calItem.startDate.toJSDate(),
+//             start: calItem.startDate.toJSDate(),
-            end: calItem.endDate.toJSDate(),
+//             end: calItem.endDate.toJSDate(),
-            id,
+//             id,
-            duration,
+//             duration,
-            videoUrl: url.getFirstValue(),
+//             videoUrl: url.getFirstValue(),
-          }
+//           }
-          setData(arr => [...arr, item])
+//           setData(arr => [...arr, item])
-        } else {
+//         } else {
-          const item = {
+//           const item = {
-            title: calItem.summary,
+//             title: calItem.summary,
-            description: calItem.description,
+//             description: calItem.description,
-            start: calItem.startDate.toJSDate(),
+//             start: calItem.startDate.toJSDate(),
-            end: calItem.endDate.toJSDate(),
+//             end: calItem.endDate.toJSDate(),
-          }
+//           }
-          setData(arr => [...arr, item])
+//           setData(arr => [...arr, item])
-        }
+//         }
-      })
+//       })
-    )
+//     )
 
-    setLoading(false)
+//     setLoading(false)
-  }
+//   }
 
-  useEffect(() => {
+//   useEffect(() => {
-    fetchData()
+//     fetchData()
-  }, [])
+//   }, [])
 
-  return { loading, data }
+//   return { loading, data }
-}
+// }
 
 export const useEventApi = () => {
   const [data, setData] = useSeriesStore(store => [
@@ -116,9 +116,7 @@ export const useEventApi = () => {
         const { data: responseData } = await axios.get(
           `${config.EVENTS_API_URL}/events`
         )
-        console.log({ responseData })
         setData(responseData)
-        console.log({ data: responseData })
         setLoading(false)
       } catch (err) {
         console.log('ERROR')

src/pages/SeriesPage/index.js

@@ -14,6 +14,7 @@ import {
   InfoContent,
   Row,
   LogosRow,
+  FooterImage,
   ActionButton as Button,
   TrailerContainer,
 } from './styles'
@@ -34,12 +35,13 @@ const SeriesPage = ({ data }) => {
     : null
 
   const orgsList = Object.values(orgs || {})
-  console.log({ orgsList })
+
+  const footerImages = data?.resources?.filter(({ title }) =>
+    title.includes('FOOTER_IMG')
+  )
 
   const links = data.links.length ? splitArray(data.links, 2) : null
 
-  console.log({ description: data.description })
-
   return (
     <Page title={data.title} theme={data.theme} withHeader={false}>
       <InfoLayout
@@ -122,6 +124,14 @@ const SeriesPage = ({ data }) => {
             ))}
           </LogosRow>
         ) : null}
+        {footerImages.length
+          ? footerImages.map(image => (
+              <FooterImage
+                src={image.resourceUrl}
+                alt={`${image.orgName} logo`}
+              />
+            ))
+          : null}
       </InfoLayout>
     </Page>
   )

src/pages/SeriesPage/styles.js

@@ -80,6 +80,11 @@ export const LogosRow = styled(Row)`
   }
 `
 
+export const FooterImage = styled.img`
+  max-width: 600px;
+  padding: 32px 0;
+`
+
 export const InfoContent = styled.div`
   max-width: 600px;
   margin: 0 0 0em 2px;