@vixoniccom/aqi 0.0.1 → 0.0.2-dev.1

package/build/main.js.LICENSE.txt

@@ -0,0 +1,46 @@
+/*!
+    localForage -- Offline Storage, Improved
+    Version 1.10.0
+    https://localforage.github.io/localForage
+    (c) 2013-2017 Mozilla, Apache License 2.0
+*/
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/build/test/parameters.json

@@ -0,0 +1,36 @@
+{
+  "parameters": {
+    "backgroundImage": {
+      "id": "earthquakes",
+      "filename": "Earthquakes.png",
+      "__isAsset": true
+    },
+    "cityInput": "Santiago",
+    "topSeparationCard": 200,
+    "leftSeparationCard": 600,
+    "cardWidth": 700,
+    "cardHeight": 600,
+    "cardGap": 2,
+    "aqiFormat": {
+      "fontSize": 18,
+      "fontColor": "#000000",
+      "alignment": {
+        "horizontal": "center"
+      }
+    },
+    "stationFormat": {
+      "fontSize": 8,
+      "fontColor": "#000000",
+      "alignment": {
+        "horizontal": "center"
+      }
+    },
+    "qualityFormat": {
+      "fontSize": 4,
+      "fontColor": "#000000",
+      "alignment": {
+        "horizontal": "center"
+      }
+    }
+  }
+}

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Daniel Alvayay"
   },
-  "version": "0.0.1",
+  "version": "0.0.2-dev.1",
   "scripts": {
     "prepublishOnly": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",
@@ -22,14 +22,14 @@
   "dependencies": {
     "axios": "^1.6.0",
     "localforage": "^1.10.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
-    "@vixoniccom/module-packager": "^2.10.0",
-    "@vixoniccom/modules": "^2.19.0",
-    "standard-version": "^9.3.1"
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vixoniccom/module-packager": "^2.13.0-dev.1",
+    "@vixoniccom/modules": "^2.20.5-dev.1",
+    "standard-version": "^9.5.0"
   }
 }

package/sonar-project.properties

@@ -0,0 +1 @@
+sonar.projectKey=Vixonic_store-air-quality-index_de6b8e55-8f87-4d53-b9d5-7e514a2702d9

package/src/App.tsx

@@ -1,11 +1,9 @@
-import axios from 'axios'
-import localforage from 'localforage'
 import React, { useEffect, useState } from 'react'
 import { Card } from './components/Card'
 import { FontLoader } from './components/FontLoader'
 import { FormattedText } from './components/FormattedText'
-import { AirQuality, AqiData, StorageData } from './types'
-import { API_RESPONSE_STATUS, TOKEN } from './utils'
+import { AqiData } from './types'
+import { getData } from './services'
 
 interface Props {
   data: VixonicData
@@ -17,67 +15,28 @@ 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
 
-  const refetchData = (referenceDate: Date): boolean => {
-    const now = new Date()
-
-    const sameYear = referenceDate.getFullYear() === now.getFullYear()
-    const sameMonth = referenceDate.getMonth() === now.getMonth()
-    const sameDay = referenceDate.getDate() === now.getDate()
-
-    if (sameYear && sameMonth && sameDay) {
-      const differenceMinutes = Math.abs(now.getTime() - referenceDate.getTime())
-      return differenceMinutes >= updateTime
-    }
-    return true
-  }
-
-  const requestData = async (): Promise<AirQuality | null> => {
-    const URL = `https://api.waqi.info/feed/${cityInput}/?token=${TOKEN}`
-    try {
-      const response = await axios.get<AirQuality>(URL)
-      if (response?.status === 200) {
-        return response.data
-      }
-      return null
-    } catch (error) {
-      return null
-    }
-  }
+  useEffect(() => {
+    if (!start) return
 
-  const processData = (response: AirQuality | null): AqiData => {
-    let data: AqiData = { city: cityInput, station: "Estación desconocida" }
-    if (response && response.status === API_RESPONSE_STATUS.OK) {
-      data = {
-        aqi: response.data.aqi,
-        city: cityInput,
-        station: response.data.city.name
+    const fetchData = async () => {
+      try {
+        const data = await getData(cityInput, updateTime, msj0)
+        setFormattedData(data)
+      } catch (error) {
+        console.error('Error fetching data:', error)
+        setFormattedData(undefined)
       }
     }
-    return data
-  }
 
-  const getData = async () => {
-    const storageData: StorageData | null = await localforage.getItem('aqi')
-    let data
-    if (!storageData?.item || storageData?.item.city !== parameters.cityInput || !storageData?.date || refetchData(new Date(storageData.date))) {
-      data = await requestData()
-      const processedData = processData(data)
-      await localforage.setItem('aqi', { item: processedData, date: new Date() })
-      setFormattedData(processedData)
-    } else {
-      data = storageData.item
-      setFormattedData(data)
-    }
-  }
+    fetchData()
 
-  useEffect(() => {
-    if (!start) return
-    getData()
     const interval = setInterval(() => {
-      getData()
+      fetchData()
     }, updateTime)
+
     return () => clearInterval(interval)
   }, [start, updateTime, parameters.cityInput])
 
@@ -92,11 +51,7 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
       backgroundImage: backgroundImageState,
       backgroundSize: '100% 100%',
     }}>
-      <div style={{
-        width: "100%",
-        height: "100%",
-        position: "relative"
-      }}>
+      <div style={{ width: "100%", height: "100%", position: "relative" }}>
         {formattedData ? (
           <div style={{
             position: "absolute",
@@ -122,17 +77,12 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
             left: `${parameters.leftSeparationCard || 0}px`
           }}>
             <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} />
+            <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
+              <FormattedText text={msj0} format={parameters?.formatMjs} />
             </div>
           </div>
         )}
       </div>
     </div>
   )
-}
+}

package/src/components/Card.tsx

@@ -52,4 +52,4 @@ export const Card: React.FunctionComponent<Props> = ({ data, format }) => {
       </div>
     </div>
   )
-}
+}

package/src/components/FontLoader.tsx

@@ -38,4 +38,4 @@ export const FontLoader: React.FunctionComponent<Props> = ({ paths, parameters,
   return (
     <style>{fonts}</style>
   )
-}
+}

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
@@ -23,18 +23,17 @@ interface Props {
 }
 
 export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }) => {
-  const trimText = (text: any, maxChar: any) => {
+  const trimText = (text: string, maxChar?: number) => {
     const isValid = maxChar && maxChar >= 3
-    if (isValid && (text && text.length > maxChar) || false) {
-      let returnText = text.substring(0, maxChar - 3)
-      returnText.substr(-1, 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('.'))
@@ -43,19 +42,19 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
     }
   }
 
-  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}>
@@ -78,4 +77,4 @@ FormattedText.defaultProps = {
   lineHeight: 1,
   unit: 'vh',
   maxChar: undefined
-}
+}

package/src/index.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
-<html style='position: absolute; height:100%; width: 100%; overflow: hidden;'>
-<head>
-<title></title>
-<meta charset='utf-8'>
-</head>
-<body style='margin:0; overflow: hidden;'>
-	<div id='root' style='position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;'>
-	</div>
-</body>
-</html>
+<html
+  lang="en"
+  style="position: absolute; height: 100%; width: 100%; overflow: hidden">
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+  </head>
+  <body style="margin: 0; overflow: hidden">
+    <div
+      id="root"
+      style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden"></div>
+  </body>
+</html>

package/src/main.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { App } from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './App'
 
 const { ipcRenderer } = require('electron')
 let start: boolean = false

package/src/services/index.ts

@@ -0,0 +1,61 @@
+import axios from 'axios'
+import localforage from 'localforage'
+import { AirQuality, AqiData, StorageData } from '../types'
+import { API_RESPONSE_STATUS } from '../utils'
+
+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()
+
+  const sameYear = referenceDate.getFullYear() === now.getFullYear()
+  const sameMonth = referenceDate.getMonth() === now.getMonth()
+  const sameDay = referenceDate.getDate() === now.getDate()
+
+  if (sameYear && sameMonth && sameDay) {
+    const differenceMilliseconds = Math.abs(now.getTime() - referenceDate.getTime())
+    return differenceMilliseconds >= updateTime
+  }
+  return true
+}
+
+const requestData = async (cityInput: string): Promise<AirQuality | null> => {
+  const URL = `https://api.waqi.info/feed/${cityInput}/?token=${TOKEN}`
+  try {
+    const response = await axios.get<AirQuality>(URL)
+    if (response?.status === 200) {
+      return response.data
+    }
+    return null
+  } catch (error) {
+    console.error('Error fetching AQI data:', error)
+    return null
+  }
+}
+
+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,
+      city: cityInput,
+      station: response.data.city.name
+    }
+  }
+  return data
+}
+
+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, defaultMsg)
+    await localforage.setItem('aqi', { item: processedData, date: new Date() })
+    return processedData
+  } else {
+    data = storageData.item
+    return data
+  }
+}

package/src/utils.ts

@@ -1,11 +1,9 @@
-const TOKEN = '9fa7d8df1a621c9d518a351a13ff9b94093b9dac'
-
-const API_RESPONSE_STATUS = {
+export const API_RESPONSE_STATUS = {
   OK: 'ok',
   ERROR: 'error',
 }
 
-const assingAirQuality = (magnitude: number): { color: string; quality: string } => {
+export const assingAirQuality = (magnitude: number): { color: string; quality: string } => {
   let color = '#9D9F93'
   let quality = ''
   if (0 <= magnitude && magnitude <= 50) {
@@ -29,5 +27,3 @@ const assingAirQuality = (magnitude: number): { color: string; quality: string }
   }
   return { color, quality }
 }
-
-export { TOKEN, API_RESPONSE_STATUS, assingAirQuality }

package/tsconfig.json

@@ -1,37 +1,28 @@
 {
-    "compilerOptions": {
-      "target": "es2015",
-      "module": "es2015",
-      "moduleResolution": "node",
-      "jsx": "preserve",
-      "allowJs": true,
-      "checkJs": true,
-      "allowSyntheticDefaultImports": true,
-      "emitDecoratorMetadata": true,
-      "experimentalDecorators": true,
-      "downlevelIteration": true,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "noFallthroughCasesInSwitch": true,
-      "noImplicitReturns": true,
-      "noImplicitAny": true,
-      "noImplicitThis": true,
-      "noUnusedLocals": true,
-      "noUnusedParameters": true,
-      "sourceMap": true,
-      "types": [
-        "node"
-      ],
-      "typeRoots": [
-        "./node_modules/@types",
-        "./src",
-        "./src/global.d.ts"
-      ]
-    },
-    "include": [
-      "./src/**/*"
-      ],
-    "exclude": [
-      "./node_modules/**/*"
-    ]
-  }
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "checkJs": true,
+    "allowSyntheticDefaultImports": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "typeRoots": ["./node_modules/@types", "./src"]
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./node_modules/**/*"]
+}