@vixoniccom/footbal-score 1.3.0 → 1.4.0-dev.0

package/src/App.tsx

@@ -9,24 +9,24 @@ export type Props = {
   start: boolean
 }
 
-export const App = ({ data, start }: Props) => {
+export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   const [dataFixture, setDataFixture] = useState<any[]>([])
   const [league, setLeague] = useState<string>('')
   const { parameters, downloadsPath } = data
   const { backgroundImage, padding, msj0 = '', updateTime } = parameters
-  const backgroundImageState = backgroundImage && backgroundImage.filename
+  const backgroundImageState = backgroundImage?.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")`
     : ''
 
   const getData = async () => {
     const dataLocal: any = await getLocalData()
-    const momentLocalStorage: any = dataLocal ? moment().diff(dataLocal.date, 'millisecond') : undefined
+    const momentLocalStorage = dataLocal ? moment().diff(dataLocal.date, 'millisecond') : undefined
     const timeNowFormat = moment().format('h:mma')
     const timeNow = moment(timeNowFormat, 'h:mma')
-    const horaInicio = moment(parameters.timeStart, 'h:mma')
-    const horaFin = moment(parameters.timeEnd, 'h:mma')
+    const startTime = moment(parameters.timeStart, 'h:mma')
+    const endTime = moment(parameters.timeEnd, 'h:mma')
 
-    if (momentLocalStorage == undefined || (timeNow.isBetween(horaInicio, horaFin) && momentLocalStorage > updateTime!)) {
+    if (momentLocalStorage == undefined || (timeNow.isBetween(startTime, endTime) && momentLocalStorage > updateTime!)) {
       const dataRequest = await getFixture(parameters.league!, parameters.matchesYesterday, parameters.matchesTomorrow)
       setDataLocal(dataRequest)
       setDataFixture(dataRequest)
@@ -52,74 +52,60 @@ export const App = ({ data, start }: Props) => {
 
   //Request data every 5 minutes
   useEffect(() => {
-    let interval = setInterval(() => {
+    const interval = setInterval(() => {
       getData()
     }, updateTime! || 300000);
     return () => clearInterval(interval)
   }, [updateTime, data])
 
-  const setDataLocal = (data: any) => {
+  const setDataLocal = async (data: any) => {
     localforage.config({ name: 'request_api_football' })
-    localforage.setItem('football-score', {
-      date: Date.now(),
-      data: data
-    }, (err) => { if (err) console.log('err', err) })
+    try {
+      await localforage.setItem('football-score', { date: Date.now(), data })
+    } catch (err) {
+      console.log('err', err)
+    }
   }
 
   const getLocalData = async () => {
-    let dataLocal = await localforage.getItem('football-score')
+    const dataLocal = await localforage.getItem('football-score')
     return dataLocal
   }
 
   return (
     dataFixture.length > 0 ?
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          backgroundImage: backgroundImageState,
-          backgroundSize: '100% 100%',
-          padding: padding
-        }}
-      >
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundImage: backgroundImageState,
+        backgroundSize: '100% 100%',
+        padding: padding
+      }}>
         <FontLoader paths={['nameFormat.font', 'statusFormat.font', 'timeFormat.font', 'titleFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'goalsFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
-        {
-          parameters.titleEnabled &&
-          <div style={{
-            display: 'flex',
-            position: 'relative',
-            flex: '1 1 0%',
-            flexDirection: 'column',
-          }}>
+        {parameters.titleEnabled &&
+          <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
             <FormattedText text={parameters.title0 || 'Partidos Mundial'} format={parameters.titleFormat} />
           </div>
         }
         <Table dataFixture={dataFixture} parameters={parameters} />
       </div> :
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          backgroundImage: backgroundImageState,
-          backgroundSize: '100% 100%',
-          padding: padding,
-          display: 'flex',
-          alignItems: parameters.alignVerticalMsj,
-        }}
-      >
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundImage: backgroundImageState,
+        backgroundSize: '100% 100%',
+        padding: padding,
+        display: 'flex',
+        alignItems: parameters.alignVerticalMsj
+      }}>
         <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
-        <div style={{
-          display: 'flex',
-          position: 'relative',
-          flex: '1 1 0%',
-          flexDirection: 'column',
-        }}>
+        <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
           <FormattedText text={msj0 || 'Sin partidos'} format={parameters.formatMjs} />
         </div>
       </div>

package/src/components/FontLoader/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-type Props = {
-  parameters: VixonicParameters
+interface Props {
+  paths: Array<string>
+  parameters: any
   downloadsPath: string
-  paths: string[]
 }
 
-export const FontLoader = ({ parameters, downloadsPath, paths }: Props) => {
-  const _getValueByPath = (path: any, obj: any): any => {
+export const FontLoader: React.FunctionComponent<Props> = ({ paths, parameters, downloadsPath }) => {
+  const _getValueByPath = (path: string, obj: any): any => {
     const pathsArray = path.split('.')
     const propertyName = pathsArray[0]
     if (pathsArray.length === 1) return obj[propertyName]
@@ -26,8 +26,8 @@ export const FontLoader = ({ parameters, downloadsPath, paths }: Props) => {
       }
       return `
           @font-face {
-            font-family: "${font.family}";
-            src: url("${font.src}");
+            font-family: '${font.family}';
+            src: url('${font.src}');
           }
         `
     } catch (err) {

package/src/components/FormattedText/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { isNumber } from 'lodash'
 
 const alignments = {
   center: 'center',
@@ -7,35 +6,34 @@ const alignments = {
   right: 'flex-end'
 }
 
-type aligment = {
+type Aligment = {
   horizontal: keyof typeof alignments,
   vertical: keyof typeof alignments
 }
 
 interface Props {
   format?: any
-  lineHeight: number
+  lineHeight?: number
   maxChar?: number
-  style?: number
+  style?: React.CSSProperties
   text: string
-  unit: string
+  unit?: string
   paddingBottom?: string
   paddingTop?: string
 }
 
-export const FormattedText = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }: Props) => {
-  const trimText = (text: any, maxChar: any) => {
-    const isValid = maxChar && isNumber(maxChar) && maxChar >= 3
-    if (isValid && (text && text.length > maxChar) || false) {
-      let returnText = text.substring(0, maxChar - 3)
-      returnText.substr(-1, 3)
+export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }) => {
+  const trimText = (text: string, maxChar?: number) => {
+    const isValid = maxChar && maxChar >= 3
+    if (isValid && text.length > maxChar) {
+      const returnText = text.substring(0, maxChar - 3)
       return `${returnText.trim()}...`
     }
     return text
   }
 
-  const checkNested = (obj: any, path: any): any => {
-    let arr = path.split('.')
+  const checkNested = (obj: any, path: string): any => {
+    const arr = path.split('.')
     if (arr.length > 0) {
       if (obj.hasOwnProperty(arr[0])) {
         if (arr.length > 1) return checkNested(obj[arr[0]], arr.splice(1).join('.'))
@@ -44,32 +42,34 @@ export const FormattedText = ({ text, format, maxChar, lineHeight, style, unit,
     }
   }
 
-  const getHorizontalAlignment = (alignment: aligment) => {
-    if (alignment) {
-      let hA = alignment.horizontal
-      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
-    }
-    return 'flex-start'
+  const getHorizontalAlignment = (alignment?: Aligment) => {
+    if (!alignment) return 'flex-start'
+
+    const hA = alignment.horizontal
+    return alignments.hasOwnProperty(hA) ? alignments[hA] : 'flex-start'
   }
 
   const renderText = maxChar ? trimText(text, maxChar) : text
-  let containerStyle = Object.assign({
+  let containerStyle = {
     display: 'inline-flex',
-    justifyContent: getHorizontalAlignment(format.alignment)
-  }, style)
+    justifyContent: getHorizontalAlignment(format.alignment),
+    ...style
+  }
 
-  return <div style={containerStyle}>
-    <span style={{
-      color: format?.fontColor,
-      fontFamily: checkNested(format, 'font.filename') ? `"${format?.font?.filename?.replace('.', '-')}"` : '',
-      fontSize: `${format?.fontSize}${unit}`,
-      textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
-      lineHeight: lineHeight,
-      paddingBottom: paddingBottom,
-      paddingTop: paddingTop,
-      display: 'inline-flex'
-    }}>{renderText}</span>
-  </div>
+  return (
+    <div style={containerStyle}>
+      <span style={{
+        color: format?.fontColor,
+        fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
+        fontSize: `${format?.fontSize}${unit}`,
+        textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
+        lineHeight: lineHeight,
+        paddingBottom: paddingBottom,
+        paddingTop: paddingTop,
+        display: 'inline-flex'
+      }}>{renderText}</span>
+    </div>
+  )
 }
 
 FormattedText.defaultProps = {

package/src/components/Table/components/Results.tsx

@@ -2,21 +2,20 @@ import React from 'react'
 import { FormattedText } from '../../FormattedText'
 import { isNumber } from 'lodash'
 
-export const Results = ({ parameters, goals, score }: any) => {
+interface Props {
+  parameters: VixonicParameters
+  goals: any
+  score: any
+}
+
+export const Results: React.FunctionComponent<Props> = ({ parameters, goals, score }) => {
   return (
-    <div style={{
-      display: 'flex',
-      justifyContent: 'center',
-    }}>
-      {
-        isNumber(score.penalty.home) ? <FormattedText text={`(${score.penalty.home})`} format={parameters.goalsFormat} /> : ''
-      }
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      {isNumber(score.penalty.home) ? <FormattedText text={`(${score.penalty.home})`} format={parameters.goalsFormat} /> : ''}
       <FormattedText text={goals.home ? goals.home : 0} format={parameters.goalsFormat} />
       <FormattedText text={'-'} format={parameters.goalsFormat} />
       <FormattedText text={goals.away ? goals.away : 0} format={parameters.goalsFormat} />
-      {
-        isNumber(score.penalty.away) ? <FormattedText text={`(${score.penalty.away})`} format={parameters.goalsFormat} /> : ''
-      }
+      {isNumber(score.penalty.away) ? <FormattedText text={`(${score.penalty.away})`} format={parameters.goalsFormat} /> : ''}
     </div>
   )
 }

package/src/components/Table/components/Row.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Results, Status, Time  } from './'
+import { Results, Status, Time } from './'
 import { FormattedText } from '../../'
 import { translateTeams } from '../../../helpers/translateTeams'
 
@@ -8,15 +8,18 @@ type Props = {
   parameters: VixonicParameters
 }
 
-export const Row = ({ item, parameters }: Props) => {
+if (!process.env.RESULTS_FLAG_IMG) console.warn('Flag image asset is not defined')
+const FLAG_IMG = process.env.RESULTS_FLAG_IMG
+
+export const Row: React.FunctionComponent<Props> = ({ item, parameters }) => {
   const { fixture, teams, goals, score } = item
   const [homeTeam, setHomeTeam] = useState(false)
   const [awayTeam, setAwayTeam] = useState(false)
+  const imageSize = `${parameters.imageSize ?? 100}%`
   const {
     descriptionEnabled,
     widthDescription,
     descriptionFormat,
-    imageSize,
     widthImage,
     widthScore,
     columnGap,
@@ -47,7 +50,6 @@ export const Row = ({ item, parameters }: Props) => {
     } catch (error) {
       console.log(error)
       setAwayTeam(false)
-
     }
   }
 
@@ -57,87 +59,46 @@ export const Row = ({ item, parameters }: Props) => {
   }, [])
 
   return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: `${gridColumns}`,
-        columnGap: `${columnGap || '10px'}`,
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        placeContent: 'center',
-        padding: `${rowGap || '30px'} 0px`,
-        justifyContent: 'center'
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-        }}
-      >
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: `${gridColumns}`,
+      columnGap: `${columnGap || '10px'}`,
+      width: '100%',
+      height: '100%',
+      alignItems: 'center',
+      placeContent: 'center',
+      padding: `${rowGap || '30px'} 0px`,
+      justifyContent: 'center'
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Time time={Number(fixture.timestamp)} parameters={parameters} />
       </div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-        }}
-      >
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Status status={fixture.status.short} parameters={parameters} />
       </div>
-      {
-        descriptionEnabled &&
-        <div style={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          marginRight: '10px'
-        }}>
+      {descriptionEnabled && (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginRight: '10px' }}>
           <FormattedText text={nameHome} format={descriptionFormat} />
         </div>
-      }
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        alignItems: 'center',
-        marginLeft: '5px'
-      }}>
-        {
-          homeTeam ?
-            <img src={`${teams.home.logo}`} style={{ width: `${imageSize ? imageSize : 100}%`, objectFit: 'contain' }} /> :
-            <img src={`https://storage.googleapis.com/vixoniccom-emails/results_flags/0000.png`} style={{ width: `${imageSize ? imageSize : 100}%`, objectFit: 'contain' }} />
-
+      )}
+      <div style={{ display: 'flex', justifyContent: 'center', width: '100%', alignItems: 'center', marginLeft: '5px' }}>
+        {homeTeam ?
+          <img src={`${teams.home.logo}`} alt={`${nameHome} logo`} style={{ width: imageSize, objectFit: 'contain' }} /> :
+          <img src={FLAG_IMG} alt={`${nameHome} logo`} style={{ width: imageSize, objectFit: 'contain' }} />
         }
       </div>
       <Results goals={goals} score={score} parameters={parameters} />
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-start',
-          width: '100%',
-          alignItems: 'center',
-          marginRight: '5px'
-        }}
-      >
-        {
-          awayTeam ?
-            <img src={`${teams.away.logo}`} style={{ width: `${imageSize ? imageSize : 100}%`, objectFit: 'contain' }} />
-            : <img src={`https://storage.googleapis.com/vixoniccom-emails/results_flags/0000.png`} style={{ width: `${imageSize ? imageSize : 100}%`, objectFit: 'contain' }} />
+      <div style={{ display: 'flex', justifyContent: 'flex-start', width: '100%', alignItems: 'center', marginRight: '5px' }} >
+        {awayTeam ?
+          <img src={`${teams.away.logo}`} alt={`${nameAway} logo`} style={{ width: imageSize, objectFit: 'contain' }} />
+          : <img src={FLAG_IMG} alt={`${nameAway} logo`} style={{ width: imageSize, objectFit: 'contain' }} />
         }
       </div>
-      {
-        descriptionEnabled &&
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            marginLeft: '10px',
-          }}
-        >
+      {descriptionEnabled && (
+        <div style={{ display: 'flex', justifyContent: 'flex-start', marginLeft: '10px' }}>
           <FormattedText text={nameAway} format={descriptionFormat} />
         </div>
-      }
-    </div >
+      )}
+    </div>
   )
 }

package/src/components/Table/components/Status.tsx

@@ -1,7 +1,11 @@
-import React from 'react'
 import { FormattedText } from '../../'
 
-export const Status = ({ status, parameters }: { status: string, parameters: VixonicParameters }) => {
+interface Props {
+  status: string
+  parameters: VixonicParameters
+}
+
+export const Status: React.FunctionComponent<Props> = ({ status, parameters }) => {
   let translateStatus: string = ''
   switch (status) {
     case 'NS':
@@ -16,26 +20,20 @@ export const Status = ({ status, parameters }: { status: string, parameters: Vix
     case '2H':
       translateStatus = 'Segundo tiempo'
       break
-    case 'FT':
-      translateStatus = 'Finalizado'
-      break
     case 'P':
       translateStatus = 'Penales'
       break
     case 'LIVE':
       translateStatus = 'En vivo'
       break
+    case 'FT':
     default:
       translateStatus = 'Finalizado'
       break
   }
 
   return (
-    <div style={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    }}>
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
       <FormattedText text={translateStatus} format={parameters.statusFormat} />
     </div>
   )

package/src/components/Table/components/Time.tsx

@@ -2,15 +2,14 @@ import moment from 'moment'
 import React from 'react'
 import { FormattedText } from '../../'
 
-export const Time = ({ time, parameters }: { time: number, parameters: VixonicParameters }) => {
-  return (
-    <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
+interface Props {
+  time: number
+  parameters: VixonicParameters
+}
 
-    }}>
+export const Time: React.FunctionComponent<Props> = ({ time, parameters }) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
       <FormattedText text={moment.unix(time).format('DD-MM')} format={parameters.timeFormat} />
       <FormattedText text={moment.unix(time).format('h:mm a')} format={parameters.timeFormat} />
     </div>

package/src/components/Table/index.tsx

@@ -6,7 +6,7 @@ type Props = {
   parameters: VixonicParameters
 }
 
-export const Table = ({ dataFixture, parameters }: Props) => {
+export const Table: React.FunctionComponent<Props> = ({ dataFixture, parameters }) => {
   const { itemsPerPage, durationPerPage } = parameters
   const rows = Number(itemsPerPage || 4)
   const orderedData = dataFixture.sort((a, b) => a.fixture.timestamp - b.fixture.timestamp)
@@ -31,20 +31,9 @@ export const Table = ({ dataFixture, parameters }: Props) => {
     setPage(newPage)
   }
 
-  return <div
-    style={{
-      display: 'flex',
-      width: '100%',
-      height: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexDirection: 'column'
-    }}
-  >
-    {
-      items.map((item: any) => (
-        <Row item={item} parameters={parameters} />
-      ))
-    }
+  return <div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+    {items.map((item: any, index: number) => (
+      <Row key={item.fixture.id || `${item.fixture.timestamp}-${index}`} item={item} parameters={parameters} />
+    ))}
   </div>
 }

package/src/helpers/getFixture.ts

@@ -1,21 +1,24 @@
 import moment from 'moment'
 import axios from 'axios'
 
+if (!process.env.FOOTBALL_API_KEY || !process.env.FOOTBALL_API_HOST || !process.env.FOOTBALL_API_URL)
+  console.warn('Missing API credentials')
+const FOOTBALL_API_KEY = process.env.FOOTBALL_API_KEY
+const FOOTBALL_API_HOST = process.env.FOOTBALL_API_HOST
+const FOOTBALL_API_URL = process.env.FOOTBALL_API_URL
+
 export const getFixture = async (league: string, yesterday?: boolean, tomorrow?: boolean) => {
   const today = moment().format('YYYY-MM-DD')
   const year = moment().format('YYYY')
   const from = yesterday ? moment(Date.now() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD') : today
   const to = tomorrow ? moment(Date.now() + 24 * 60 * 60 * 1000).format('YYYY-MM-DD') : today
-
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
   const options = {
     method: 'GET',
-    url: 'https://v3.football.api-sports.io/fixtures',
-    params: { from, to, league, season: `${year}`, timezone: `${timezone}` },
-    headers: {
-      'X-RapidAPI-Key': '235e7dfd2220cd2347e61c8a53643fcc',
-      'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'
-    }
+    url: FOOTBALL_API_URL,
+    params: { from, to, league, season: year, timezone },
+    headers: { 'X-RapidAPI-Key': FOOTBALL_API_KEY, 'X-RapidAPI-Host': FOOTBALL_API_HOST },
   }
 
   try {