@vixoniccom/aniversarios 1.2.3-dev.1 → 1.2.3-dev.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/aniversarios",
   "alias": "Aniversarios",
-  "version": "1.2.3-dev.1",
+  "version": "1.2.3-dev.2",
   "description": "Muestra el día que el trabajador está de aniversario en la empresa.",
   "main": "main.js",
   "author": "",
@@ -32,7 +32,7 @@
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vixoniccom/module-packager": "2.12.0-dev.10",
-    "@vixoniccom/modules": "^2.20.3-dev.0",
+    "@vixoniccom/modules": "^2.20.3-dev.1",
     "standard-version": "^9.5.0"
   }
 }

package/src/App.tsx

@@ -1,125 +1,26 @@
-import React, { useContext, useEffect, useState } from "react"
+import React, { useEffect, useState } from 'react'
 import { FormattedText, Render } from './components'
-import { ConfigureContext } from "./context/configureContext/ConfigureContext"
-import { DataContext } from "./context/dataContext/DataContex"
-import { getEmployees, getEmployeesYearly } from "./helpers/getEmployees"
-import { filterEmployees } from "./helpers/filterEmployees"
-import moment from "moment"
-import { getMonth } from "./helpers/utils"
-import localforage from "localforage"
 
-type Props = {
-  data: VixonicData
+interface Props {
   start: boolean
+  appData: VixonicData
+  anniversaries: Anniversary[]
 }
 
-type Msj = 'Ningún ingreso que mostrar'
-  | 'Cargando Empleados...'
-  | 'Missing google sheets'
-  | ""
-  | 'Invalid URL'
+export const App: React.FunctionComponent<Props> = ({ start, appData, anniversaries }) => {
 
-export const App: React.FunctionComponent<Props> = ({ data, start }) => {
-  const { addConfiguration, configureState } = useContext(ConfigureContext)
-  const { addEmployee } = useContext(DataContext)
-  const [dataState, setDataState] = useState(data)
-  const [msj, setMsj] = useState<Msj>("")
-  const { apiDomain, dataMode, excludePast } = configureState.parameters
-  let updateTimer: any
-
-  const setUpdateTime = (updatedTime: number) => {
-    clearTimeout(updateTimer)
-    updateTimer = setTimeout(getData, updatedTime)
-  }
-
-  useEffect(() => {
-    if (apiDomain) localforage.config({ name: `url_request_${apiDomain}` })
-  }, [apiDomain])
-
-  useEffect(() => {
-    addConfiguration(data)
-    setDataState(configureState)
-  }, [data])
+  const parameters = appData?.parameters
+  const [aniversariesElements, setAnniversariesElements] = useState<Anniversary[]>(anniversaries)
 
   useEffect(() => {
-    const { updateTime } = configureState.parameters
-
-    if (apiDomain && dataMode) {
-      localforage.getItem<{ items: any[], date: number, mode: string }>('anniversary-docs').then((data) => {
-        if (!data || dataMode !== data.mode) {
-          getData()
-          setUpdateTime(updateTime!)
-          return
-        }
-
-        const now = Date.now()
-        const targetDate = data?.date! + updateTime!
-
-        if (now >= targetDate) {
-          getData()
-          setUpdateTime(updateTime!)
-        } else {
-          data && addEmployee(data.items)
-          setMsj("")
-          setUpdateTime(targetDate - now)
-        }
-      })
-    }
-    if (!apiDomain) setMsj("Missing google sheets")
-  }, [dataState])
-
-  const getData = async () => {
-    const urlValid = "https://docs.google.com/spreadsheets/d/"
-    let contractEmployees: any
-    let employee: any = []
-    try {
-      if (apiDomain?.includes(urlValid)) {
-        const month = Number(moment().format("M")) - 1
-        const nextMonth = (month === 11) ? 0 : (month + 1)
-        const monthTab = getMonth(month)
-        const nextMonthTab = getMonth(nextMonth)
-        if (dataMode !== 'yearly') {
-          contractEmployees = await getEmployees(apiDomain, monthTab)
-          const { values } = contractEmployees.data
-          employee.push(...filterEmployees(values, dataMode, excludePast, month))
-          if (dataMode === 'weekly') {
-            contractEmployees = await getEmployees(apiDomain, nextMonthTab)
-            const { values: valuesnextMonth } = contractEmployees.data
-            employee.push(...filterEmployees(valuesnextMonth, dataMode, excludePast, nextMonth))
-          }
-        }
-
-        if (dataMode === 'yearly') {
-          setMsj('Cargando Empleados...')
-          for (let numberMonth: number = 0; numberMonth <= 11; numberMonth++) {
-            contractEmployees = await getEmployeesYearly(apiDomain, numberMonth)
-            const { values } = contractEmployees.data
-            employee.push(...filterEmployees(values, dataMode, excludePast, numberMonth))
-          }
-        }
+    setAnniversariesElements(anniversaries)
+  }, [anniversaries])
 
-        if (contractEmployees) {
-          addEmployee(employee)
-          setMsj("")
-          localforage.setItem('anniversary-docs', {
-            items: employee,
-            date: Date.now() + updateTimer,
-            mode: dataMode
-          })
-        } else {
-          setMsj("Ningún ingreso que mostrar")
-        }
-      } else {
-        setMsj("Invalid URL")
-      }
-    } catch (error) {
-      console.log(error)
-    }
-  }
+  if (!appData) return null
 
-  return msj !== "" ? (
-    <FormattedText text={msj} format={configureState.parameters.nameFormat || configureState.parameters.descriptionFormat} />
-  ) : (
-    <Render start={start} />
+  return (
+    (aniversariesElements.length === 0) ?
+      <FormattedText text={parameters?.defaultMessage ?? 'No hay ingresos para mostrar'} format={parameters?.defaultMessageFormat} />
+      : <Render appData={appData} start={start} anniversaries={aniversariesElements} />
   )
 }

package/src/anniversary-loader.ts

@@ -0,0 +1,70 @@
+import { AnniversaryServiceParsers } from "./service-parsers"
+
+ 
+export class AnniversaryLoader {
+
+  public onData: ((birthdays: Anniversary[]) => void) | undefined = undefined
+  private updateTime: number = 86400000
+  private updateTimer: number | undefined = undefined
+  private anniversariesData: Anniversary[] = []
+  private serviceType: VixonicData['parameters']['displayService'] = 'AnniversaryAppService'
+
+  update(appData: VixonicData) {
+    console.log("🚀 ~ AnniversaryLoader ~ update ~ appData:", appData)
+    
+    let selectedServiceId: string | undefined
+    if (appData.parameters.displayService === 'AnniversaryAppService') {
+      console.log("Using AnniversaryAppService")
+      selectedServiceId = appData.parameters.documentService?.id
+    } else {
+      selectedServiceId = appData.parameters.rexmasService?.id
+    }
+    if (!selectedServiceId || !appData.services[selectedServiceId]) return
+    const serviceData = appData.services[selectedServiceId].data as Anniversary[] | undefined
+
+    const serviceTypeName = appData.parameters.displayService
+
+    this.serviceType = serviceTypeName ?? 'AnniversaryAppService'
+
+    if (Array.isArray(serviceData)) {
+      const parser = AnniversaryServiceParsers.getParser(this.serviceType)
+      this.anniversariesData = parser.parse(serviceData)
+    } else {
+      this.anniversariesData = []
+    }
+
+    this.updateTime = appData.parameters.updateTime ?? 86400000
+    this.requestBirthdays()
+  }
+
+  stop() {
+    this.setUpdateTime(undefined)
+  }
+
+  private setUpdateTime(milliseconds: number | undefined) {
+    window.clearTimeout(this.updateTimer)
+    if (milliseconds === undefined) return
+    this.updateTimer = window.setTimeout(this.requestBirthdays, milliseconds)
+  }
+
+  private dispatchData(anniversaries: Anniversary[]) {
+    this.onData && this.onData(anniversaries)
+  }
+
+  private readonly requestBirthdays = () => {
+
+    window.clearTimeout(this.updateTimer)
+    const birthdays: Anniversary[] = []
+
+    if (Array.isArray(this.anniversariesData)) {
+      this.anniversariesData.forEach(item => {
+        birthdays.push(item)
+      })
+    }
+
+    if (birthdays.length > 0) { this.dispatchData(birthdays) }
+
+    this.setUpdateTime(this.updateTime > 10000 ? this.updateTime : 10000)
+
+  }
+}

package/src/components/AnniversaryItem/components/AnniversaryDate/CircleDate/index.tsx

@@ -1,16 +1,15 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { AnniveraryDateUtils } from '../utils'
 import { FormattedText } from '../../../../FormattedText'
-import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
 
 interface Props {
   day: number,
-  month: number
+  month: number,
+  data: VixonicData
 }
 
-export const CircleDate: React.FunctionComponent<Props> = ({ day, month }) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = configureState.parameters
+export const CircleDate: React.FunctionComponent<Props> = ({ day, month, data }) => {
+  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = data.parameters
   const sizeProp = AnniveraryDateUtils.utils(orientation)
   const daySize = (dateDayFormat?.fontSize || 100) * 400 / 100
   const monthSize = (dateMonthFormat?.fontSize || 100) * 400 / 100

package/src/components/AnniversaryItem/components/AnniversaryDate/FlatDate/index.tsx

@@ -1,15 +1,14 @@
-import React, { useContext } from "react"
-import { ConfigureContext } from "../../../../../context/configureContext/ConfigureContext"
-import { AnniveraryDateUtils } from "../utils"
+import React from "react"
+ import { AnniveraryDateUtils } from "../utils"
 
 interface Props {
   month: number
   day: number
+  data: VixonicData
 }
 
-export const FlatDate: React.FunctionComponent<Props> = ({ month, day }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = configureState.parameters
+export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: Props) => {
+   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
 
   const sizeProp = AnniveraryDateUtils.utils(orientation)
   const monthSize = ((dateMonthFormat?.fontSize || 18.5) * 400) / 100

package/src/components/AnniversaryItem/components/AnniversaryDate/OutlineDate/index.tsx

@@ -1,17 +1,16 @@
-import React, { useContext, useState } from 'react'
-import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
-import { FormattedText } from '../../../../FormattedText'
+import React, { useState } from 'react'
+ import { FormattedText } from '../../../../FormattedText'
 import { AnniveraryDateUtils } from '../utils'
 
 
 interface Props {
   day: number
   month: number
+  data: VixonicData
 }
 
-export const OutlineDate: React.FunctionComponent<Props> = ({ day, month }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = configureState.parameters
+export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
+   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
   const sizeProp = AnniveraryDateUtils.utils(orientation)
 
   const parseFormat = (format: any, defaultSize: any) => {

package/src/components/AnniversaryItem/components/AnniversaryDate/TextCalendarDate/index.tsx

@@ -1,16 +1,15 @@
-import React, { useContext, useState } from 'react'
-import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
+import React, { useState } from 'react'
 import { FormattedText } from '../../../../FormattedText'
 import { AnniveraryDateUtils } from '../utils'
 
 interface Props {
   day: number
   month: number
+  data: VixonicData
 }
 
-export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { dateMonthFormat, dateDayFormat, abbreviatedMonths, orientation } = configureState.parameters
+export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
+  const { dateMonthFormat, dateDayFormat, abbreviatedMonths, orientation } = data.parameters
   const sizeProp = AnniveraryDateUtils.utils(orientation, '100%')
 
   const parseFormat = (format: any, defaultSize: any) => {

package/src/components/AnniversaryItem/components/AnniversaryDate/TextDate/index.tsx

@@ -1,15 +1,14 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { FormattedText } from '../../../../FormattedText'
-import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
 
 interface Props {
   day: number
   month: number
+  data: VixonicData
 }
 
-export const TextDate: React.FunctionComponent<Props> = ({ day, month }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { dateMonthFormat, dateDayFormat } = configureState.parameters
+export const TextDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
+  const { dateMonthFormat, dateDayFormat } = data.parameters
 
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>

package/src/components/AnniversaryItem/components/AnniversaryDate/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { CircleDate } from './CircleDate'
 import { FlatDate } from './FlatDate'
 import { TextCalendarDate } from './TextCalendarDate'
@@ -24,12 +23,13 @@ interface itemStyles {
 interface Props {
   style: keyof typeof itemStyles,
   day: number,
-  month: number
+  month: number,
+  data: VixonicData
 }
 
-export const AnniversaryDate = ({ style, day, month }: Props) => {
+export const AnniversaryDate = ({ style, day, month, data }: Props) => {
   const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles[style] : itemStyles.text
   return (
-    <StyledItem day={day} month={month} />
+    <StyledItem day={day} month={month} data={data} />
   )
 }

package/src/components/AnniversaryItem/components/ClassicItem/index.tsx

@@ -1,18 +1,17 @@
-import React, { useContext, useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { AnniversaryDate, AnniversaryImage, Separator } from '..'
 import { FormattedText } from "../../../FormattedText"
-import { ConfigureContext } from "../../../../context/configureContext/ConfigureContext"
 import { getPhotoUrl, parseBorderMargin, parseParameters } from '../utils'
 
 interface Props {
-  anniversary: DataEmployee
+  anniversary: Anniversary
+  data: VixonicData
 }
 
-export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary }: Props) => {
+export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data }: Props) => {
   let month = anniversary.month
   const cont = useRef(null)
-  const { configureState } = useContext(ConfigureContext)
-  const { parameters, downloadsPath } = configureState
+  const { parameters, downloadsPath } = data
   const { orientation, separatorColor, separatorWidth, imageSize } = parameters
   const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
   const [state, setState] = useState(Object.assign({}, parseParameters(parameters)))
@@ -73,7 +72,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary }: Pro
         />
         {state.descriptionEnabled && (
           <FormattedText
-            text={anniversary.position}
+            text={anniversary.position || ''}
             format={parameters.descriptionFormat}
             maxChar={Number(parameters.descriptionMaxChar)}
             lineHeight={1.2}
@@ -81,7 +80,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary }: Pro
         )}
         {state.optionalEnabled && (
           <FormattedText
-            text={anniversary.optional}
+            text={anniversary.optional || ''}
             format={parameters.optionalFormat}
             maxChar={Number(parameters.descriptionMaxChar)}
             lineHeight={1.2}
@@ -98,6 +97,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary }: Pro
             style={parameters.dateStyle}
             day={anniversary.day}
             month={month}
+            data={data}
           />
         </div>
       )}

package/src/components/AnniversaryItem/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ClassicItem } from './components'
 
 const itemStyles = {
@@ -7,11 +6,12 @@ const itemStyles = {
 
 interface Props {
   style: 'standard' | 'custom',
-  anniversary: DataEmployee
+  anniversary: Anniversary,
+  data: VixonicData
 }
 
-export const AnniversaryItem = ({ style, anniversary }: Props) => {
+export const AnniversaryItem = ({ style, anniversary, data }: Props) => {
   const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles['standard'] : itemStyles.standard
 
-  return <StyledItem anniversary={anniversary} />
+  return <StyledItem anniversary={anniversary} data={data} />
 }

package/src/components/FontLoader/index.tsx

@@ -1,14 +1,12 @@
-import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
 
 interface Props {
   paths: Array<string>
+  data: VixonicData
 }
 
-export const FontLoader = ({ paths }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { parameters, downloadsPath } = configureState
+export const FontLoader = ({ paths, data }: Props) => {
+  const { parameters, downloadsPath } = data
 
   const _getValueByPath = (path: string, obj: any): any => {
     const pathsArray = path.split('.')
@@ -44,14 +42,11 @@ export const FontLoader = ({ paths }: Props) => {
 }
 
 FontLoader.defaultProps = {
-  paths: [],
-  parameters: {},
-  downloadsPath: ''
+  paths: []
 }
 
 FontLoader.propTypes = {
   paths: PropTypes.arrayOf(PropTypes.string).isRequired,
-  parameters: PropTypes.object,
-  downloadsPath: PropTypes.string
+  data: PropTypes.object.isRequired
 }
 

package/src/components/ItemsContainer/components/animation.ts

@@ -58,7 +58,7 @@ const animationModes = {
   },
 }
 
-class Animation {
+export class AnimationController {
   public mode: any
   public duration: number
   public speed: number
@@ -73,12 +73,12 @@ class Animation {
     this.reverse = true
   }
 
-  configure(options: Options) {
-    this.mode = animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
+  configure(options: Partial<Options>) {
+    this.mode = options.mode && animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
     this.duration = options.duration || 10000
     this.speed = 1000 * (options.speed || 1)
     this.stagger = this.speed / (options.stagger || 4)
-    this.reverse = options.reverse
+    this.reverse = options.reverse !== undefined ? options.reverse : true
   }
 
   getInitialStyle() {
@@ -126,5 +126,3 @@ class Animation {
     animation.play()
   }
 }
-
-module.exports = exports = Animation

package/src/components/ItemsContainer/index.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { Item } from './components/Item'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
 import { useStateWithCallbackLazy } from 'use-state-with-callback'
 import { ReactElementLike } from 'prop-types'
+import { AnimationController } from './components/animation'
 
 const stages = {
   idle: 'idle',
@@ -14,20 +14,20 @@ interface Props {
   items: ReactElementLike[],
   animation: Animation,
   animate: boolean
+  data: VixonicData
 }
 
 interface Animation {
-  mode?: string
+  mode?: "fade" | "slideRight" | "slideLeft"
   duration?: number,
   speed?: number,
   reverse?: boolean
 }
 
-export const ItemsContainer = ({ animation, items, animate }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { containerColumns, containerRows, containerRowsGap, containerColumnsGap } = configureState.parameters
+export const ItemsContainer = ({ animation, items, animate, data }: Props) => {
+  const { containerColumns, containerRows, containerRowsGap, containerColumnsGap } = data.parameters
   const container = useRef<HTMLDivElement>(null)
-  const [animations] = useState(new (require('./components/animation'))())
+  const [animations] = useState(new AnimationController())
   let itemsCount = Number(containerColumns) * Number(containerRows)
   let columns = Number(containerColumns) || 1
   let rows = Number(containerRows) || 1

package/src/components/Render/index.tsx

@@ -1,6 +1,3 @@
-import React, { useContext } from 'react'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
-import { DataContext } from '../../context/dataContext/DataContex'
 import { FontLoader } from '../FontLoader'
 import { FormattedText } from '../FormattedText'
 import { AnniversaryItem } from '../AnniversaryItem'
@@ -8,15 +5,16 @@ import { ItemsContainer } from '../ItemsContainer'
 
 interface Props {
   start: boolean
+  appData: VixonicData
+  anniversaries: Anniversary[]
 }
 
-export const Render = ({ start }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { dataEmployee } = useContext(DataContext)
-  const { parameters, downloadsPath } = configureState
+
+export const Render = ({ start, appData, anniversaries }: Props) => {
+  const { parameters, downloadsPath } = appData
   const { backgroundImage,
     padding,
-    msj0 = '',
+    defaultMessage = '',
     animationMode,
     animationOrder,
     animationSpeed,
@@ -26,8 +24,8 @@ export const Render = ({ start }: Props) => {
   const backgroundImageState = backgroundImage && backgroundImage.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
-  const anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
-    return <AnniversaryItem style={'standard'} anniversary={anniversary} />
+  const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
+    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} />
   })
 
   return (
@@ -41,8 +39,8 @@ export const Render = ({ start }: Props) => {
       backgroundSize: '100% 100%',
       padding: padding
     }}>
-      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} />
-      {(dataEmployee.dataEmployee && dataEmployee.dataEmployee.length > 0) ?
+      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} data={appData} />
+      {( anniversaries.length > 0) ?
         <ItemsContainer
           items={anniversaryItems}
           animation={{
@@ -52,6 +50,7 @@ export const Render = ({ start }: Props) => {
             reverse: animationOrder
           }}
           animate={start}
+          data={appData}
         /> :
         <div style={{
           width: '100%',
@@ -60,7 +59,7 @@ export const Render = ({ start }: Props) => {
           justifyContent: 'center',
           alignItems: 'center'
         }}>
-          <FormattedText text={msj0.trim() || 'Sin ingresos'} format={parameters.nameFormat || parameters.descriptionFormat} />
+          <FormattedText text={defaultMessage.trim() || 'Sin ingresos'} format={parameters.nameFormat || parameters.descriptionFormat} />
         </div>
       }
     </div >

package/src/global.d.ts

@@ -0,0 +1,8 @@
+declare interface Anniversary {
+  month: number
+  day: number
+  name: string
+  image?: string
+  position?: string
+  optional?: string
+}

package/src/main.ts

@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './App'
+import { AnniversaryLoader } from './anniversary-loader'
+const { ipcRenderer } = require('electron')
+
+let start: boolean = false
+let appData: VixonicData
+let anniversaries: Anniversary[] = []
+
+const anniversariesLoader = new AnniversaryLoader()
+
+anniversariesLoader.onData = (update) => {
+  anniversaries = update
+  render()
+}
+
+ipcRenderer.on('preload', (_event: any, data: VixonicData) => {
+  appData = data
+  anniversariesLoader.update(data)
+  render()
+})
+
+ipcRenderer.on('start', (_event: any, data: VixonicData) => {
+  appData = data
+  anniversariesLoader.update(data)
+  start = true
+  render()
+})
+
+ipcRenderer.on('update', (_event: any, data: VixonicData) => {
+  appData = data
+  anniversariesLoader.update(data)
+  render()
+})
+
+ipcRenderer.on('finish', (_event: any) => {
+  anniversariesLoader.stop()
+  console.log('finish')
+})
+
+function render() {
+  ReactDOM.render(
+    React.createElement(App, { start, appData, anniversaries }), document.getElementById('root')
+  )
+}