@vixoniccom/aqi 0.0.2-dev.0 → 0.0.2-dev.1

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Daniel Alvayay"
   },
-  "version": "0.0.2-dev.0",
+  "version": "0.0.2-dev.1",
   "scripts": {
     "prepublishOnly": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/App.tsx

@@ -15,6 +15,7 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   const backgroundImageState = parameters.backgroundImage ? `url('${downloadsPath}/${parameters.backgroundImage.filename}')` : ''
   const [formattedData, setFormattedData] = useState<AqiData>()
   const cityInput = parameters?.cityInput || "santiago"
+  const msj0 = parameters?.msj0 || 'No hay datos para mostrar'
   const updateTime = 600000
 
   useEffect(() => {
@@ -22,10 +23,10 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
 
     const fetchData = async () => {
       try {
-        const data = await getData(cityInput, updateTime)
+        const data = await getData(cityInput, updateTime, msj0)
         setFormattedData(data)
       } catch (error) {
-        console.error('Error al obtener datos:', error)
+        console.error('Error fetching data:', error)
         setFormattedData(undefined)
       }
     }
@@ -77,7 +78,7 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
           }}>
             <FontLoader paths={['formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
             <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
-              <FormattedText text={parameters?.msj0 || 'No hay datos para mostrar'} format={parameters?.formatMjs} />
+              <FormattedText text={msj0} format={parameters?.formatMjs} />
             </div>
           </div>
         )}

package/src/components/FormattedText.tsx

@@ -15,7 +15,7 @@ interface Props {
   format?: any
   lineHeight?: number
   maxChar?: number
-  style?: number
+  style?: React.CSSProperties
   text: string
   unit?: string
   paddingBottom?: string
@@ -25,15 +25,14 @@ interface Props {
 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 && text.length > maxChar)) {
+    if (isValid && text.length > maxChar) {
       const returnText = text.substring(0, maxChar - 3)
-      returnText.substr(-1, 3)
       return `${returnText.trim()}...`
     }
     return text
   }
 
-  const checkNested = (obj: any, path: any): any => {
+  const checkNested = (obj: any, path: string): any => {
     const arr = path.split('.')
     if (arr.length > 0) {
       if (obj.hasOwnProperty(arr[0])) {
@@ -51,10 +50,11 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
   }
 
   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}>

package/src/services/index.ts

@@ -3,7 +3,8 @@ import localforage from 'localforage'
 import { AirQuality, AqiData, StorageData } from '../types'
 import { API_RESPONSE_STATUS } from '../utils'
 
-const TOKEN = process.env.AQI_TOKEN ?? ''
+if (!process.env.AQI_TOKEN) console.warn('Env variable not found. Skipping API call.')
+const TOKEN = process.env.AQI_TOKEN
 
 const refetchData = (referenceDate: Date, updateTime: number): boolean => {
   const now = new Date()
@@ -13,17 +14,13 @@ const refetchData = (referenceDate: Date, updateTime: number): boolean => {
   const sameDay = referenceDate.getDate() === now.getDate()
 
   if (sameYear && sameMonth && sameDay) {
-    const differenceMinutes = Math.abs(now.getTime() - referenceDate.getTime())
-    return differenceMinutes >= updateTime
+    const differenceMilliseconds = Math.abs(now.getTime() - referenceDate.getTime())
+    return differenceMilliseconds >= updateTime
   }
   return true
 }
 
 const requestData = async (cityInput: string): Promise<AirQuality | null> => {
-  if (!TOKEN) {
-    console.warn('VITE_AQI_TOKEN no está definido en el entorno. Se omitirá la llamada a la API.')
-    return null
-  }
   const URL = `https://api.waqi.info/feed/${cityInput}/?token=${TOKEN}`
   try {
     const response = await axios.get<AirQuality>(URL)
@@ -32,13 +29,13 @@ const requestData = async (cityInput: string): Promise<AirQuality | null> => {
     }
     return null
   } catch (error) {
-    console.error('Error al obtener datos de AQI:', error)
+    console.error('Error fetching AQI data:', error)
     return null
   }
 }
 
-const processData = (response: AirQuality | null, cityInput: string): AqiData => {
-  let data: AqiData = { city: cityInput, station: "Estación desconocida" }
+const processData = (response: AirQuality | null, cityInput: string, defaultMsg: string): AqiData => {
+  let data: AqiData = { city: cityInput, station: defaultMsg }
   if (response?.status === API_RESPONSE_STATUS.OK) {
     data = {
       aqi: response.data.aqi,
@@ -49,12 +46,12 @@ const processData = (response: AirQuality | null, cityInput: string): AqiData =>
   return data
 }
 
-export const getData = async (cityInput: string, updateTime: number): Promise<AqiData> => {
+export const getData = async (cityInput: string, updateTime: number, defaultMsg: string): Promise<AqiData> => {
   const storageData: StorageData | null = await localforage.getItem('aqi')
   let data
   if (!storageData?.item || storageData?.item.city !== cityInput || !storageData?.date || refetchData(new Date(storageData.date), updateTime)) {
     data = await requestData(cityInput)
-    const processedData = processData(data, cityInput)
+    const processedData = processData(data, cityInput, defaultMsg)
     await localforage.setItem('aqi', { item: processedData, date: new Date() })
     return processedData
   } else {