@vixoniccom/aniversarios 1.2.0-dev.1 → 1.2.1-dev.0

package/src/components/{items-container/ItemsContainer.tsx → ItemsContainer/index.tsx}

@@ -1,10 +1,8 @@
 import React, { useContext, useState, useRef, useEffect } from 'react'
-import { Item } from './Item'
-import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
-import { useStateWithCallbackLazy } from 'use-state-with-callback';
-import { ReactElementLike } from 'prop-types';
-
-
+import { Item } from './components/Item'
+import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
+import { useStateWithCallbackLazy } from 'use-state-with-callback'
+import { ReactElementLike } from 'prop-types'
 
 const stages = {
   idle: 'idle',
@@ -12,8 +10,6 @@ const stages = {
   animating: 'animating'
 }
 
-
-
 interface Props {
   items: ReactElementLike[],
   animation: Animation,
@@ -21,20 +17,17 @@ interface Props {
 }
 
 interface Animation {
-  mode: string | undefined
-  duration: number | undefined,
-  speed: number | undefined,
-  reverse: boolean | undefined
+  mode?: string
+  duration?: number,
+  speed?: number,
+  reverse?: boolean
 }
 
-
-
 export const ItemsContainer = ({ animation, items, animate }: Props) => {
-
   const { configureState } = useContext(ConfigureContext)
   const { containerColumns, containerRows, containerRowsGap, containerColumnsGap } = configureState.parameters
   const container = useRef<HTMLDivElement>(null)
-  const [animations] = useState(new (require('./animation'))())
+  const [animations] = useState(new (require('./components/animation'))())
   let itemsCount = Number(containerColumns) * Number(containerRows)
   let columns = Number(containerColumns) || 1
   let rows = Number(containerRows) || 1
@@ -46,17 +39,6 @@ export const ItemsContainer = ({ animation, items, animate }: Props) => {
   const [stage, setStage] = useStateWithCallbackLazy('idle')
   const [lastIndex, setLastIndex] = useState(0)
 
-  const configure = () => {
-    animations.configure(animation)
-    itemsCount = Number(containerColumns) * Number(containerRows)
-    columns = Number(containerColumns) || 1
-    rows = Number(containerRows) || 1
-    rowsGap = Number(containerRowsGap) || 0
-    columnsGap = Number(containerColumnsGap) || 1
-
-    if (animate && stage === stages.idle) createItems(lastIndex, items)
-  }
-
   useEffect(() => {
     configure()
   }, [animation])
@@ -73,40 +55,53 @@ export const ItemsContainer = ({ animation, items, animate }: Props) => {
     }
   }, [item, animate])
 
+  const configure = () => {
+    animations.configure(animation)
+    itemsCount = Number(containerColumns) * Number(containerRows)
+    columns = Number(containerColumns) || 1
+    rows = Number(containerRows) || 1
+    rowsGap = Number(containerRowsGap) || 0
+    columnsGap = Number(containerColumnsGap) || 1
+
+    if (animate && stage === stages.idle) createItems(lastIndex, items)
+  }
 
   const createItems = (lastIndex: number, items: any) => {
-    let count = 0
-    if (lastIndex >= (items.length - 1)) {
-      setLastIndex(lastIndex = 0)
+    if (items.length === 0) {
+      setShow(false)
+      setStage(stages.idle, () => { })
+      return
+    }
+
+    let currentIndex = lastIndex % items.length
+    const newItems: any = []
+
+    for (let i = 0; i < Math.min(itemsCount, items.length); i++) {
+      const itemIndex = (currentIndex + i) % items.length
+      const item = items[itemIndex]
+
+      newItems.push(
+        <Item
+          key={`item-${itemIndex}`}
+          containerData={{
+            ic_index: i,
+            ic_rowIndex: Math.floor(i / columns),
+            ic_columnIndex: i % columns,
+            ic_firstChild: i === 0,
+            ic_lastChild: i === (Math.min(itemsCount, items.length) - 1)
+          }}
+          style={animations.getInitialStyle()}
+          width={`${(100 - ((columnsGap * (columns - 1)))) / columns}%`}
+          height={`${(100 - ((rowsGap * (rows - 1)))) / rows}%`}
+          horizontalGap={columnsGap}
+          verticalGap={rowsGap}
+        >
+          {item}
+        </Item>
+      )
     }
-    let newItems = items.filter((_item: any, index: number) => {
-      return index >= lastIndex
-    }).map((item: any, index: any, arr: any) => {
-      if (count >= itemsCount) return null
-      setLastIndex(++lastIndex)
-      count++
-      return <Item
-        key={lastIndex} containerData={{
-          ic_index: index,
-          ic_rowIndex: index / columns,
-          ic_columnIndex: index % columns,
-          ic_firstChild: index === 0,
-          ic_lastChild: index === (arr.length - 1)
-        }} style={animations.getInitialStyle()}
-        // Item alignment. By default is center - center.
-        // alignment={alignment}
-        // Setup item width based on columns count.
-        width={`${(100 - ((columnsGap * (columns - 1)))) / columns}%`}
-        // Setup item height based on rows count. If 0 set up on auto.
-        height={`${(100 - ((rowsGap * (rows - 1)))) / rows}%`}
-        // Setup horizontal gap
-        horizontalGap={columnsGap}
-        // Setup vertical gap
-        verticalGap={rowsGap}>
-        {item}
-      </Item>
-    })
 
+    setLastIndex((currentIndex + itemsCount) % items.length)
 
     if (newItems.length > 0) {
       setShow(true)
@@ -118,7 +113,6 @@ export const ItemsContainer = ({ animation, items, animate }: Props) => {
     }
   }
 
-
   return (
     <div ref={container} style={{
       opacity: show ? 1 : 0,
@@ -133,6 +127,3 @@ export const ItemsContainer = ({ animation, items, animate }: Props) => {
     </div>
   )
 }
-
-
-

package/src/components/{Render.tsx → Render/index.tsx}

@@ -1,17 +1,16 @@
 import React, { useContext } from 'react'
-import { ConfigureContext } from '../contex/configureContext/ConfigureContext';
-import { DataContext } from '../contex/dataContext/DataContex';
-import { FontLoader } from './FontLoader';
-import { FormattedText } from './FormattedText';
-import { AnniversaryItem } from './anniversary-item/AnniversaryItem';
-import { ItemsContainer } from './items-container/ItemsContainer';
+import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
+import { DataContext } from '../../context/dataContext/DataContex'
+import { FontLoader } from '../FontLoader'
+import { FormattedText } from '../FormattedText'
+import { AnniversaryItem } from '../AnniversaryItem'
+import { ItemsContainer } from '../ItemsContainer'
 
 interface Props {
   start: boolean
 }
 
 export const Render = ({ start }: Props) => {
-
   const { configureState } = useContext(ConfigureContext)
   const { dataEmployee } = useContext(DataContext)
   const { parameters, downloadsPath } = configureState
@@ -24,11 +23,10 @@ export const Render = ({ start }: Props) => {
     animationTime,
   } = parameters
 
-  let backgroundImageState = backgroundImage && backgroundImage.filename
-    ? `url("${downloadsPath}/${backgroundImage.filename}")`
-    : ''
+  const backgroundImageState = backgroundImage && backgroundImage.filename
+    ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
-  let anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
+  const anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
     return <AnniversaryItem style={'standard'} anniversary={anniversary} />
   })
 

package/src/components/index.ts

@@ -0,0 +1,13 @@
+import { AnniversaryItem } from './AnniversaryItem';
+import { FontLoader } from './FontLoader';
+import { FormattedText } from './FormattedText';
+import { ItemsContainer } from './ItemsContainer';
+import { Render } from './Render';
+
+export {
+  AnniversaryItem,
+  FontLoader,
+  FormattedText,
+  ItemsContainer,
+  Render
+}

package/src/context/configureContext/ConfigureContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "react"
+
+type ConfigureContext = {
+  configureState: VixonicData
+  addConfiguration: (configure: VixonicData) => void
+}
+
+export const ConfigureContext = createContext<ConfigureContext>({} as ConfigureContext);

package/src/context/configureContext/ConfigureProvider.tsx

@@ -0,0 +1,72 @@
+import React, { useReducer } from "react"
+import { ConfigureContext } from './ConfigureContext'
+import { anniversaryReducer } from "./configureReducer"
+
+const INITIAL_STATE: VixonicData = {
+  downloadsPath: '',
+  parameters: {
+    abbreviatedMonths: false,
+    animationMode: "",
+    animationOrder: false,
+    animationSpeed: 1.5,
+    animationTime: "",
+    backgroundImage: { id: "", filename: "", _isAsset: true },
+    apiDomain: "",
+    containerColumns: "",
+    containerRows: "",
+    containerRowsGap: "",
+    containerColumnsGap: "",
+    dataMode: "",
+    dateAlignment: "center",
+    dateDayFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 55, alignment: { horizontal: "center" }, fontColor: "", },
+    dateEnabled: true,
+    dateMonthFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 20, alignment: { horizontal: "center" }, fontColor: "" },
+    datePosition: 1,
+    datePrimaryColor: "",
+    dateStyle: "circle",
+    descriptionEnabled: true,
+    descriptionFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: "center" }, fontColor: "" },
+    optionalEnabled: true,
+    optionalFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: "center" }, fontColor: "" },
+    excludePast: false,
+    imageAlignment: "center",
+    imageEnabled: true,
+    imagePosition: 0,
+    imageStyle: "normal",
+    imageSize: 50,
+    itemMargins: "",
+    msj0: "",
+    nameFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: "center" }, fontColor: "" },
+    orientation: "",
+    padding: "",
+    photosMode: "",
+    photosZip: { id: "0fb559ec-5da3-4b2d-95c4-d9623754c841", filename: "0fb559ec-5da3-4b2d-95c4-d9623754c841.zip", extension: "zip", _isAsset: true },
+    template: "",
+    textAlignment: "center",
+    textPosition: 0,
+    updateTime: 600000,
+    urlBaseApi: "",
+    imageMargin: "",
+    textMargin: "",
+    dateMargin: "",
+    separator: false
+  }
+}
+
+interface props {
+  children: JSX.Element | JSX.Element[]
+}
+
+export const AnniversaryProvider = ({ children }: props) => {
+  const [configureState, dispatch] = useReducer(anniversaryReducer, INITIAL_STATE)
+
+  const addConfiguration = (configure: VixonicData) => {
+    dispatch({ type: "addConfigure", payload: configure })
+  }
+
+  return (
+    <ConfigureContext.Provider value={{ configureState, addConfiguration }}>
+      {children}
+    </ConfigureContext.Provider>
+  )
+}

package/src/context/configureContext/configureReducer.ts

@@ -0,0 +1,62 @@
+type ConfigureAction = { type: 'addConfigure', payload: VixonicData }
+
+export const anniversaryReducer = (state: VixonicData, action: ConfigureAction) => {
+  const { downloadsPath, parameters } = action.payload
+  switch (action.type) {
+    case 'addConfigure':
+      return {
+        downloadsPath: downloadsPath,
+        parameters: {
+          abbreviatedMonths: parameters.abbreviatedMonths,
+          animationMode: parameters.animationMode,
+          animationOrder: parameters.animationOrder,
+          animationSpeed: parameters.animationSpeed,
+          animationTime: parameters.animationTime,
+          apiDomain: parameters.apiDomain,
+          backgroundImage: parameters.backgroundImage,
+          containerColumns: parameters.containerColumns,
+          containerColumnsGap: parameters.containerColumnsGap,
+          containerRows: parameters.containerRows,
+          containerRowsGap: parameters.containerRowsGap,
+          dataMode: parameters.dataMode,
+          dateAlignment: parameters.dateAlignment,
+          dateDayFormat: parameters.dateDayFormat,
+          dateEnabled: parameters.dateEnabled,
+          dateMonthFormat: parameters.dateMonthFormat,
+          datePosition: parameters.datePosition,
+          datePrimaryColor: parameters.datePrimaryColor,
+          dateStyle: parameters.dateStyle,
+          descriptionEnabled: parameters.descriptionEnabled,
+          descriptionFormat: parameters.descriptionFormat,
+          optionalEnabled: parameters.optionalEnabled,
+          optionalFormat: parameters.optionalFormat,
+          excludePast: parameters.excludePast,
+          imageAlignment: parameters.imageAlignment,
+          imageEnabled: parameters.imageEnabled,
+          imagePosition: parameters.imagePosition,
+          imageSize: parameters.imageSize,
+          imageStyle: parameters.imageStyle,
+          itemMargins: parameters.itemMargins,
+          msj0: parameters.msj0,
+          nameFormat: parameters.nameFormat,
+          orientation: parameters.orientation,
+          padding: parameters.padding,
+          photosMode: parameters.photosMode,
+          photosZip: parameters.photosZip,
+          template: parameters.template,
+          textAlignment: parameters.textAlignment,
+          textPosition: parameters.textPosition,
+          updateTime: parameters.updateTime,
+          urlBaseApi: parameters.urlBaseApi,
+          imageMargin: parameters.imageMargin,
+          textMargin: parameters.textMargin,
+          dateMargin: parameters.dateMargin,
+          separator: parameters.separator,
+          nameMaxChar: parameters.nameMaxChar,
+          descriptionMaxChar: parameters.descriptionMaxChar
+        }
+      }
+    default:
+      return state;
+  }
+}

package/src/context/dataContext/DataContex.tsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+type DataContext = {
+  dataEmployee: any,
+  addEmployee: (employee: DataEmployee[]) => void
+}
+
+export const DataContext = createContext<DataContext>({} as DataContext)

package/src/context/dataContext/DataProvider.tsx

@@ -0,0 +1,25 @@
+import React, { useReducer } from 'react'
+import { DataContext } from './DataContex'
+import { dataReducer } from './dataReducer'
+
+const INITIAL_STATE: Employees = {
+  dataEmployee: []
+}
+
+interface props {
+  children: JSX.Element | JSX.Element[]
+}
+
+export const DataProvider = ({ children }: props) => {
+  const [dataEmployee, dispatch] = useReducer(dataReducer, INITIAL_STATE)
+
+  const addEmployee = (employee: DataEmployee[]) => {
+    dispatch({ type: 'addAnniversary', payload: employee })
+  }
+
+  return (
+    <DataContext.Provider value={{ dataEmployee, addEmployee }}>
+      {children}
+    </DataContext.Provider>
+  )
+}

package/src/context/dataContext/dataReducer.ts

@@ -0,0 +1,12 @@
+type DataAction = { type: 'addAnniversary', payload: DataEmployee[] }
+
+export const dataReducer = (state: Employees, action: DataAction): Employees => {
+  switch (action.type) {
+    case 'addAnniversary':
+      return {
+        dataEmployee: action.payload
+      }
+    default:
+      return state
+  }
+}

package/src/helpers/filterEmployees.ts

@@ -1,44 +1,38 @@
-import moment from "moment";
+import moment from "moment"
 
 export const filterEmployees = (values: any, dataMode: string = 'month', excludePast: boolean = false, month: number) => {
-    let today = moment()
-    const day = moment().format("D");
-    const numberMonth = Number(moment().format("M"))-1
- 
-    let employee = values
-        .map((val: any, index: number) => {
-            if (index == 0) {
-                return;
-            }
-            return {
-                day: Number(val[0]),
-                name: val[1],
-                position: val[2],
-                image: val[3],
-                optional: val[4],
-                month
-            };
-        })
-        .filter((val: any) => val !== undefined);
+  const today = moment()
+  const day = moment().format("D")
+  const numberMonth = Number(moment().format("M")) - 1
+  let employees = values.map((val: any, index: number) => {
+    if (index == 0) return
+    return {
+      day: Number(val[0]),
+      name: val[1],
+      position: val[2],
+      image: val[3],
+      optional: val[4],
+      month
+    }
+  }).filter((val: any) => val !== undefined)
 
-    if (dataMode == "daily")
-        employee = employee.filter((contract: any) => contract.day == day);
-    if (dataMode == "weekly")
-        employee = employee.filter(
-            (contract: any) => {
-                let bdayDate = moment([today.year(), contract.month, contract.day])
-                return bdayDate.isoWeek() === today.isoWeek()
-            }
-        );
-
-    employee.sort((a: any, b: any) => {
-        if (a.day < b.day) return -1
-        else if (a.day === b.day) return 0
-        else return 1
+  if (dataMode === "daily")
+    employees = employees.filter((contract: any) => contract.day == day)
+  if (dataMode === "weekly") {
+    employees = employees.filter((contract: any) => {
+      const bdayDate = moment([today.year(), contract.month, contract.day])
+      return bdayDate.isoWeek() === today.isoWeek()
     })
+  }
+
+  employees.sort((a: any, b: any) => {
+    if (a.day < b.day) return -1
+    else if (a.day === b.day) return 0
+    else return 1
+  })
 
-    if (excludePast && (numberMonth >= month))
-        employee = employee.filter((contract: any) => (contract.day >= day && contract.month >=numberMonth))
+  if (excludePast && (numberMonth >= month))
+    employees = employees.filter((contract: any) => (contract.day >= day && contract.month >= numberMonth))
 
-    return employee
+  return employees
 }

package/src/helpers/getEmployees.ts

@@ -1,33 +1,29 @@
-import axios from "axios";
+import axios from "axios"
+import { getMonth } from "./utils"
+
 const API_KEY = 'AIzaSyDQcTlxfd5IyjbeSJooRtNt6OF04DLykqc'
-import { getMonth } from "./utils";
 
-export const getEmployees = async(apiDomain: string, _dataMode: string = 'month', monthTab: string) => {
-  let idGoogle = apiDomain.split("/")[5]
-  let URL = `https://sheets.googleapis.com/v4/spreadsheets/${idGoogle}/values`
+export const getEmployees = async (apiDomain: string, monthTab: string) => {
+  const idGoogle = apiDomain.split("/")[5]
+  const URL = `https://sheets.googleapis.com/v4/spreadsheets/${idGoogle}/values`
   try {
-    const response = await axios({
-      url: `${URL}/${monthTab}?key=${API_KEY}`
-    });
-    return response;
+    const response = await axios({ url: `${URL}/${monthTab}?key=${API_KEY}` })
+    return response
   } catch (error) {
-    console.error(error);
-    return error;
+    console.error(error)
+    return error
   }
 }
 
-export const getEmployeesYearly = (apiDomain: string, numberMonth: number) => {
-  let monthTab = getMonth(numberMonth)
-  let idGoogle = apiDomain.split("/")[5]
-  let URL = `https://sheets.googleapis.com/v4/spreadsheets/${idGoogle}/values`
+export const getEmployeesYearly = async (apiDomain: string, numberMonth: number) => {
+  const idGoogle = apiDomain.split("/")[5]
+  const URL = `https://sheets.googleapis.com/v4/spreadsheets/${idGoogle}/values`
+  const monthTab = getMonth(numberMonth)
   try {
-    const response = axios({
-      url: `${URL}/${monthTab}?key=${API_KEY}`
-    });
-    return response;
+    const response = await axios({ url: `${URL}/${monthTab}?key=${API_KEY}` })
+    return response
   } catch (error) {
-    console.error(error);
-    return error;
+    console.error(error)
+    return error
   }
 }
-

package/src/helpers/utils.ts

@@ -1,52 +1,46 @@
-export const getMonth = (numberMonth:number) => {
+export const getMonth = (numberMonth: number) => {
+  let month
+  switch (numberMonth) {
+    case 0:
+      month = 'Enero'
+      break
+    case 1:
+      month = 'Febrero'
+      break
+    case 2:
+      month = 'Marzo'
+      break
+    case 3:
+      month = 'Abril'
+      break
+    case 4:
+      month = 'Mayo'
+      break
+    case 5:
+      month = 'Junio'
+      break
+    case 6:
+      month = 'Julio'
+      break
+    case 7:
+      month = 'Agosto'
+      break
+    case 8:
+      month = 'Septiembre'
+      break
+    case 9:
+      month = 'Octubre'
+      break
+    case 10:
+      month = 'Noviembre'
+      break
+    case 11:
+      month = 'Diciembre'
+      break
+    default:
+      month = 'ENERO'
+      break
+  }
 
-    let month
-    switch (numberMonth) {
-        case 0:
-            month = 'Enero'
-            break
-        case 1:
-            month = 'Febrero'
-            break
-        case 2:
-            month = 'Marzo'
-            break
-        case 3:
-            month = 'Abril'
-            break
-        case 4:
-            month = 'Mayo'
-            break
-        case 5:
-            month = 'Junio'
-            break
-        case 6:
-            month = 'Julio'
-            break
-        case 7:
-            month = 'Agosto'
-            break
-        case 8:
-            month = 'Septiembre'
-            break
-        case 9:
-            month = 'Octubre'
-            break
-        case 10:
-            month = 'Noviembre'
-            break
-        case 11:
-            month = 'Diciembre'
-            break
-        default:
-            month = 'ENERO'
-            break
-    }
-
-    return month
+  return month
 }
-
-export const getNumberWeek = (day:string) =>{
-    const prefixes = [0,1,2,3,4,5]
-    return prefixes[0 | Number(day)/7]
-}

package/src/main.tsx

@@ -2,8 +2,8 @@ import ReactDOM from 'react-dom'
 import React from 'react'
 const { ipcRenderer } = require('electron')
 import { App } from './App';
-import { AnniversaryProvider } from './contex/configureContext/ConfigureProvider';
-import { DataProvider } from './contex/dataContext/DataProvider';
+import { AnniversaryProvider } from './context/configureContext/ConfigureProvider';
+import { DataProvider } from './context/dataContext/DataProvider';
 
 let start: boolean = false