@vixoniccom/aniversarios 1.2.1-dev.1 → 1.2.1

package/src/hooks/useFetch.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from "react"
+
+type State = {
+    data: string | null
+    loading: boolean,
+    error: boolean | null
+}
+
+
+export const useFetch = (url: string): State => {
+
+    const isMounted = useRef(true);
+    const [state, setState] = useState<State>({ data: null, loading: true, error: null })
+
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        }
+    }, [])
+
+
+    useEffect(() => {
+
+        setState({ data: null, loading: true, error: null });
+
+        fetch(url, {
+            headers: {
+                'Authorization': `Token`
+            }
+        })
+            .then(resp => resp.json())
+            .then(data => {
+
+                if (isMounted.current) {
+                    setState({
+                        loading: false,
+                        error: null,
+                        data
+                    });
+                }
+
+            });
+
+    }, [url])
+
+    return state;
+}

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 './context/configureContext/ConfigureProvider';
-import { DataProvider } from './context/dataContext/DataProvider';
+import { AnniversaryProvider } from './contex/configureContext/ConfigureProvider';
+import { DataProvider } from './contex/dataContext/DataProvider';
 
 let start: boolean = false
 

package/src/model/income.ts

@@ -0,0 +1,129 @@
+// import moment from "moment"
+// import _ from 'lodash'
+
+// /**
+//  * @class Birthdays
+//  */
+// class Income {
+
+//     public _data: any
+//     public day: any
+
+//     constructor() {
+//         /** @type {Birthday[][] | undefined} */
+//         this._data = undefined
+//     }
+
+//     /**
+//      * @type {Birthday[][]}
+//      */
+//     get data() {
+//         return this._data
+//     }
+
+//     /**
+//      * @typedef BirthdaysUpdateOptions
+//      * @property {Birthday[][]} data
+//      * @property {Birthday[][]} api
+//      */
+//     /**
+//      * @param {BirthdaysUpdateOptions} options
+//      * @param {*} callback
+//      */
+
+//     update(options : any) {
+
+//         if (options.data) {
+//             this._data = options.data
+//         } else if (options.api) {
+//             this._data = this.parseFromApi(options.api)
+//         }
+//     }
+
+//     getAnniversaryFromMonth(apiData:any, month:any) {
+//         let monthArray = []
+//         for (let i  = 0; i < apiData.length; i++) {
+//             let monthA = Number(moment(apiData[i].fechaInic, 'YYYY-MM-DD').format('M')) - 1
+//             if (monthA === month) {
+//                 let dayA = Number(moment(apiData[i].fechaInic, 'YYYY-MM-DD').format('D'))
+//                 let income = new Ingress({
+//                     day: dayA,
+//                     month: month,
+//                     name: `${apiData[i].nombre} ${apiData[i].apellidoPate}`,
+//                     description: undefined,
+//                     image: apiData[i].foto
+//                 })
+//                 monthArray.push(income)
+//             }
+//         }
+
+//         monthArray.sort((a, b) => {
+//             if (a.day < b.day) return -1
+//             else if (a.day === b.day) return 0
+//             else return 1
+//         })
+//         return monthArray
+//     }
+
+//     parseFromApi(apiData:any) {
+//         let monthsArray = []
+//         for (let month = 0; month < 12; month++) {
+//             let monthArray = this.getAnniversaryFromMonth(apiData, month)
+//             monthsArray.push(monthArray)
+//         }
+
+//         return monthsArray
+//     }
+
+//     /**
+//      * @param {string} mode
+//      * @param {boolean} excludePast
+//      */
+//     getList(mode :any, excludePast:any) {
+
+//         if (!mode) mode = 'monthly'
+//         let dd = moment()
+//         let month = Number(dd.format('M'))
+//         let today = Number(dd.format('D'))
+
+//         /**
+//          * Filter method
+//          * @param {Anniversary[]} data
+//          * @inner
+//          */
+//         let filter = (data:any) => {
+
+
+//             const filterMonthDay = excludePast ? data.filter((da:any )=> da.month >= (month - 1)).filter((da:any) => da.day >= today) : data
+
+//             return filterMonthDay
+//         }
+
+
+//         return filter(_.flatten(this._data))
+
+
+//     }
+// }
+
+
+// class Ingress {
+
+//     public day
+//     public month
+//     public name
+//     public description
+//     public image
+
+//     constructor(options:any) {
+
+//         this.day = options.day
+//         this.month = options.month
+//         this.name = options.name
+//         this.description = options.description
+//         this.image = options.image
+//     }
+
+// }
+
+// module.exports = exports = Animation

package/src/test/parameters.json

@@ -1,106 +1,106 @@
 {
-  "parameters": {
-    "apiDomain": "https://docs.google.com/spreadsheets/d/1LA_3Opjllcu3aeMLFV795hMRd6Xn30dlawyPsc-kJzU/edit?usp=sharing",
-    "msj0": "No ingresos",
-    "padding": "365px 25px 80px 40px",
-    "dataMode": "monthly",
-    "template": "standard",
-    "dateStyle": "circle",
-    "photosZip": {
-      "id": "d1093778-f3c9-42c8-9b07-9f8736390aeb",
-      "filename": "d1093778-f3c9-42c8-9b07-9f8736390aeb.zip",
-      "__isAsset": true,
-      "extension": "zip"
-    },
-    "imageStyle": "circle",
-    "nameFormat": {
-      "font": {
-        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-        "__isAsset": true
-      },
-      "fontSize": 3.8,
-      "alignment": {
-        "horizontal": "left"
-      },
-      "fontColor": "#585858"
-    },
-    "photosMode": "zip",
-    "updateTime": 60000,
-    "dateEnabled": true,
-    "excludePast": false,
-    "itemMargins": "5px",
-    "orientation": "h",
-    "datePosition": 1,
-    "imageEnabled": true,
-    "textPosition": 3,
-    "animationMode": "fade",
-    "animationTime": "5",
-    "containerRows": "3",
-    "dateAlignment": "center",
-    "dateDayFormat": {
-      "font": {
-        "id": "c705a739-312e-4334-9231-e73a05e9d382",
-        "filename": "c705a739-312e-4334-9231-e73a05e9d382.ttf",
-        "__isAsset": true
+    "parameters": {
+      "apiDomain": "https://docs.google.com/spreadsheets/d/1g-tvPAIk7tCXgn6DuwHp3zC8Gmx55C3wyxZkfSK4VcE/edit?usp=sharing",
+      "msj0": " No ingresos ",
+      "padding": "365px 25px 80px 40px",
+      "dataMode": "yearly",
+      "template": "standard",
+      "dateStyle": "circle",
+      "photosZip": {
+        "id": "d1093778-f3c9-42c8-9b07-9f8736390aeb",
+        "filename": "d1093778-f3c9-42c8-9b07-9f8736390aeb.zip",
+        "__isAsset": true,
+        "extension": "zip"
       },
-      "fontSize": 55,
-      "alignment": {
-        "horizontal": "center"
+      "imageStyle": "circle",
+      "nameFormat": {
+        "font": {
+          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+          "__isAsset": true
+        },
+        "fontSize": 3.8,
+        "alignment": {
+          "horizontal": "left"
+        },
+        "fontColor": "#585858"
       },
-      "fontColor": "#ffffff"
-    },
-    "imagePosition": 2,
-    "textAlignment": "center",
-    "animationOrder": false,
-    "animationSpeed": 1.5,
-    "imageAlignment": "center",
-    "backgroundImage": {
-      "id": "cumples",
-      "filename": "cumples.png",
-      "__isAsset": true
-    },
-    "dateMonthFormat": {
-      "font": {
-        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-        "__isAsset": true
-      },
-      "fontSize": 20,
-      "alignment": {
-        "horizontal": "center"
+      "photosMode": "zip",
+      "updateTime": 600000,
+      "dateEnabled": true,
+      "excludePast": false,
+      "itemMargins": "5px",
+      "orientation": "h",
+      "datePosition": 1,
+      "imageEnabled": true,
+      "textPosition": 3,
+      "animationMode": "fade",
+      "animationTime": "5",
+      "containerRows": "3",
+      "dateAlignment": "center",
+      "dateDayFormat": {
+        "font": {
+          "id": "c705a739-312e-4334-9231-e73a05e9d382",
+          "filename": "c705a739-312e-4334-9231-e73a05e9d382.ttf",
+          "__isAsset": true
+        },
+        "fontSize": 55,
+        "alignment": {
+          "horizontal": "center"
+        },
+        "fontColor": "#ffffff"
       },
-      "fontColor": "#ffffff"
-    },
-    "containerColumns": "1",
-    "containerRowsGap": "5",
-    "datePrimaryColor": "#d13139",
-    "abbreviatedMonths": false,
-    "descriptionFormat": {
-      "font": {
-        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+      "imagePosition": 2,
+      "textAlignment": "center",
+      "animationOrder": false,
+      "animationSpeed": 1.5,
+      "imageAlignment": "center",
+      "backgroundImage": {
+        "id": "cumples",
+        "filename": "cumples.png",
         "__isAsset": true
       },
-      "fontSize": 3.8,
-      "alignment": {
-        "horizontal": "left"
-      },
-      "fontColor": "#585858"
-    },
-    "descriptionEnabled": true,
-    "optionalEnabled": true,
-    "optionalFormat": {
-      "font": {
-        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-        "__isAsset": true
+      "dateMonthFormat": {
+        "font": {
+          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+          "__isAsset": true
+        },
+        "fontSize": 20,
+        "alignment": {
+          "horizontal": "center"
+        },
+        "fontColor": "#ffffff"
       },
-      "fontSize": 3.8,
-      "alignment": {
-        "horizontal": "left"
+      "containerColumns": "1",
+      "containerRowsGap": "5",
+      "datePrimaryColor": "#d13139",
+      "abbreviatedMonths": false,
+      "descriptionFormat": {
+        "font": {
+          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+          "__isAsset": true
+        },
+        "fontSize": 3.8,
+        "alignment": {
+          "horizontal": "left"
+        },
+        "fontColor": "#585858"
       },
-      "fontColor": "#585858"
+      "descriptionEnabled": true,
+      "optionalEnabled": true,
+      "optionalFormat": {
+        "font": {
+          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+          "__isAsset": true
+        },
+        "fontSize": 3.8,
+        "alignment": {
+          "horizontal": "left"
+        },
+        "fontColor": "#585858"
+      }
     }
-  }
-}
+  }

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

@@ -1,31 +0,0 @@
-import React, { useContext } from 'react'
-import { AnniveraryDateUtils } from '../utils'
-import { FormattedText } from '../../../../FormattedText'
-import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
-
-interface Props {
-  day: number,
-  month: number
-}
-
-export const CircleDate: React.FunctionComponent<Props> = ({ day, month }) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = configureState.parameters
-  const sizeProp = AnniveraryDateUtils.utils(orientation)
-  const daySize = (dateDayFormat?.fontSize || 100) * 400 / 100
-  const monthSize = (dateMonthFormat?.fontSize || 100) * 400 / 100
-
-  return (
-    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
-      <g>
-        <circle fill={datePrimaryColor} cx='200' cy='200' r='200' />
-        <foreignObject width='400' height='400'>
-          <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-            <FormattedText text={AnniveraryDateUtils.getMonth(month, true)} format={Object.assign({}, dateMonthFormat, { fontSize: monthSize })} unit='px' />
-            <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={Object.assign({}, dateDayFormat, { fontSize: daySize })} unit='px' />
-          </div>
-        </foreignObject>
-      </g>
-    </svg>
-  )
-}

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

@@ -1,47 +0,0 @@
-import React, { useContext } from "react"
-import { ConfigureContext } from "../../../../../context/configureContext/ConfigureContext"
-import { AnniveraryDateUtils } from "../utils"
-
-interface Props {
-  month: number
-  day: number
-}
-
-export const FlatDate: React.FunctionComponent<Props> = ({ month, day }: Props) => {
-  const { configureState } = useContext(ConfigureContext)
-  const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = configureState.parameters
-
-  const sizeProp = AnniveraryDateUtils.utils(orientation)
-  const monthSize = ((dateMonthFormat?.fontSize || 18.5) * 400) / 100
-  const daySize = ((dateDayFormat?.fontSize || 57.5) * 400) / 100
-
-  const getFontFamily = (format: any) => {
-    if (format?.font?.filename) return format.font.filename.replace('.', '-')
-    return ''
-  }
-
-  return (
-    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
-      <g>
-        <path fill={datePrimaryColor} d='M349.5,393.5h-299c-24.3,0-44-19.7-44-44v-299c0-24.3,19.7-44,44-44h299c24.3,0,44,19.7,44,44v299C393.5,373.8,373.8,393.5,349.5,393.5z' />
-        <path fill='#FFFFFF' d='M349.5,389.5h-299c-22,0-40-18-40-40v-299c0-22,18-40,40-40h299c22,0,40,18,40,40v299C389.5,371.5,371.5,389.5,349.5,389.5z' />
-        <path fill={datePrimaryColor} d='M9,99.9V50.5c0-22.2,18.1-40.3,40.3-40.3h301.4c22.2,0,40.3,18.1,40.3,40.3v49.4H9z' />
-        <text fontFamily={`"${getFontFamily(dateMonthFormat)}"`}
-          textAnchor='middle'
-          alignmentBaseline='central' x='200' y='55'
-          fontSize={monthSize} preserveAspectRatio='none'
-          fill={dateMonthFormat?.fontColor || '#fff'} fontSizeAdjust=''>
-          {AnniveraryDateUtils.getMonth(month, abbreviatedMonths)}
-        </text>
-
-        <text fontFamily={`"${getFontFamily(dateDayFormat)}"`}
-          textAnchor='middle'
-          alignmentBaseline='central' x='200' y='245'
-          fontSize={daySize} preserveAspectRatio='none'
-          fill={dateDayFormat?.fontColor || '#fff'} fontSizeAdjust=''>
-          {AnniveraryDateUtils.getZeroLeadedText(day)}
-        </text>
-      </g>
-    </svg>
-  )
-}

package/src/components/AnniversaryItem/components/AnniversaryDate/utils.ts

@@ -1,18 +0,0 @@
-import { utils } from '../utils'
-
-const Months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
-
-export class AnniveraryDateUtils {
-  static getZeroLeadedText(text: any) {
-    return `0${text}`.slice(-2)
-  }
-
-  static getMonth(index: any, abbreviated: any) {
-    if (!abbreviated) return Months[index]
-    return Months[index].substring(0, 3).toUpperCase()
-  }
-
-  static utils(orientation: any, size: any = undefined) {
-    return utils(orientation, size)
-  }
-}

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

@@ -1,109 +0,0 @@
-import React, { useContext, 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
-}
-
-export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary }: Props) => {
-  let month = anniversary.month
-  const cont = useRef(null)
-  const { configureState } = useContext(ConfigureContext)
-  const { parameters, downloadsPath } = configureState
-  const { orientation, separatorColor, separatorWidth, imageSize } = parameters
-  const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
-  const [state, setState] = useState(Object.assign({}, parseParameters(parameters)))
-
-  useEffect(() => {
-    setMargins(parseBorderMargin(parameters.itemMargins))
-    setState(Object.assign({}, parseParameters(parameters)))
-  }, [])
-
-  const separatorProps = {
-    orientation: orientation,
-    size: separatorWidth,
-    color: separatorColor,
-    margins: orientation === "v"
-      ? `${margins.r} 0 ${margins.l} 0`
-      : `0 ${margins.r} 0 ${margins.l}`,
-  }
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: orientation === "v" ? "column" : "row",
-        backgroundColor: "transparent",
-        overflow: "hidden",
-        alignItems: "center",
-        height: "100%",
-        width: "100%",
-      }}
-      ref={cont}
-    >
-      {state.imageEnabled && parameters.imageStyle && (
-        <div style={state.imageStyle}>
-          {
-            <AnniversaryImage
-              url={anniversary.image ? getPhotoUrl(anniversary.image, parameters, downloadsPath) : null}
-              orientation={orientation}
-              size={Number(imageSize) || 100}
-              borderStyle={parameters.imageStyle}
-            />
-          }
-        </div>
-      )}
-      {state.imageEnabled && parameters.separator && (
-        <Separator order={state.imageStyle.order} {...separatorProps} />
-      )}
-      <div
-        style={{
-          ...state.textStyle,
-          flexDirection: "column",
-        }}
-      >
-        <FormattedText
-          text={anniversary.name}
-          format={parameters.nameFormat}
-          maxChar={Number(parameters.nameMaxChar)}
-          lineHeight={1.2}
-        />
-        {state.descriptionEnabled && (
-          <FormattedText
-            text={anniversary.position}
-            format={parameters.descriptionFormat}
-            maxChar={Number(parameters.descriptionMaxChar)}
-            lineHeight={1.2}
-          />
-        )}
-        {state.optionalEnabled && (
-          <FormattedText
-            text={anniversary.optional}
-            format={parameters.optionalFormat}
-            maxChar={Number(parameters.descriptionMaxChar)}
-            lineHeight={1.2}
-          />
-        )
-        }
-      </div>
-      {parameters.separator && (
-        <Separator order={state.textStyle.order} {...separatorProps} />
-      )}
-      {state.dateEnabled && parameters.dateStyle && (
-        <div style={state.dateStyle}>
-          <AnniversaryDate
-            style={parameters.dateStyle}
-            day={anniversary.day}
-            month={month}
-          />
-        </div>
-      )}
-      {state.dateEnabled && parameters.separator && (
-        <Separator order={state.dateStyle.order} {...separatorProps} />
-      )}
-    </div>
-  )
-}

package/src/components/AnniversaryItem/components/index.ts

@@ -1,11 +0,0 @@
-import { AnniversaryDate } from './AnniversaryDate'
-import { AnniversaryImage } from './AnniversaryImage'
-import { ClassicItem } from './ClassicItem'
-import { Separator } from './Separator/Separator'
-
-export {
-  AnniversaryDate,
-  AnniversaryImage,
-  ClassicItem,
-  Separator
-}