npm-pkg-hook 1.0.0 → 1.0.2

package/src/hooks/useClients/queries.js

@@ -0,0 +1,118 @@
+import { gql } from '@apollo/client'
+
+export const CREATE_CLIENTS = gql`
+mutation createClients ($input: IClients) {
+  createClients(input: $input) {
+    cliId
+    idStore
+    idUser
+    clState
+    ClientAddress
+    clientNumber
+    ccClient
+    gender
+    clientLastName
+    clientName
+    createAt
+    updateAt
+  }
+}
+`
+export const DELETE_ONE_CLIENTS = gql`
+mutation deleteClient($cliId: ID, $clState: Int!) {
+  deleteClient(cliId: $cliId, clState: $clState) {
+    success
+    message
+  }
+}
+`
+export const GET_ALL_CLIENTS = gql`
+query getAllClients($idStore: ID, $cId: ID, $dId: ID, $ctId: ID, $search: String,  $min: Int, $max: Int, $fromDate: DateTime, $toDate: DateTime ) {
+  getAllClients(idStore: $idStore, cId: $cId, dId: $dId, ctId: $ctId, search: $search, min: $min, max: $max, fromDate: $fromDate, toDate: $toDate) {
+    cliId
+    idStore
+    gender
+    # idUser
+    clState
+    clientNumber
+    ccClient
+    clientLastName
+    clientName
+    ClientAddress
+    createAt
+    updateAt
+
+  }
+}
+`
+export const GET_ONE_CLIENT = gql`
+query getOneClients($cliId: ID) {
+  getOneClients(cliId: $cliId) {
+    cliId
+    idStore
+    idUser
+    clState
+    clientNumber
+    ClientAddress
+    gender
+    ccClient
+    clientLastName
+    clientName
+    createAt
+    updateAt
+
+  }
+}
+`
+
+export const CREATE_SHOPPING_CARD = gql`
+mutation  registerShoppingCard($input: IShoppingCard, $idSubArray: IID_SUB_ITEMS){
+    registerShoppingCard(input: $input, idSubArray: $idSubArray){
+      ShoppingCard
+      id
+      pId
+      subProductsId
+      ShoppingCardRefCode
+      uuid
+      discountCardProduct
+      idUser
+      cName
+      idStore
+      cState
+      cDatCre
+      cDatMod
+      csDescription
+      cantProducts
+      comments
+      # idSubArray
+  }
+}
+`
+export const CREATE_SHOPPING_CARD_TO_USER_STORE = gql`
+mutation  registerSalesStore($input: [IShoppingCard], $id: ID, $idStore: ID, $pCodeRef: String, $change: String, $valueDelivery: Float, $payMethodPState: Int, $pickUp: Int, $totalProductsPrice: Float, $idSubArray: IID_SUB_ITEMS){
+    registerSalesStore(input: $input, id: $id, idStore: $idStore, pCodeRef: $pCodeRef,  change: $change, valueDelivery: $valueDelivery, payMethodPState: $payMethodPState, pickUp: $pickUp, totalProductsPrice: $totalProductsPrice,  idSubArray: $idSubArray){
+ 			ShoppingCard {
+      ShoppingCard
+      id
+      pId
+      subProductsId
+      ShoppingCardRefCode
+      uuid
+      discountCardProduct
+      idUser
+      cName
+      idStore
+      cState
+      cDatCre
+      cDatMod
+      csDescription
+      cantProducts
+      comments
+        }
+    Response {
+      success
+      message
+    }
+  }
+}
+`

package/src/hooks/useDrag/index.js

@@ -0,0 +1,57 @@
+import { useEffect } from 'react'
+
+export function useDrag2(ref) {
+  useEffect(() => {
+    const target = ref.current
+    if (!target) return
+    const previousOffset = { x: 0, y: 0 }
+    let originMouseX
+    let originMouseY
+    function onMousemove(e) {
+      const { pageX, pageY } = e
+      const x = pageX - originMouseX + previousOffset.x
+      const y = pageY - originMouseY + previousOffset.y
+      target.style.transform = `translate(${ x }px, ${ y }px)`
+    }
+    function onMouseup(e) {
+      previousOffset.x += e.pageX - originMouseX
+      previousOffset.y += e.pageY - originMouseY
+      window.removeEventListener('mousemove', onMousemove)
+      window.removeEventListener('mouseup', onMouseup)
+    }
+    function onMousedown(e) {
+      originMouseX = e.pageX
+      originMouseY = e.pageY
+      window.addEventListener('mousemove', onMousemove)
+      window.addEventListener('mouseup', onMouseup)
+    }
+    target.addEventListener('mousedown', onMousedown)
+    return () => {
+      target?.removeEventListener('mousedown', onMousedown)
+      window?.removeEventListener('mouseup', onMouseup)
+      window?.removeEventListener('mousemove', onMousemove)
+    }
+  }, [ref])
+}
+import { useState } from 'react'
+
+export const useDrag = (x, y) => {
+  const [move, setMove] = useState(false)
+  const [moveTo, setMoveTo] = useState([x, y])
+  const moveIcon = e => {
+    const xcoord = moveTo[0] + e.movementX
+    const ycoord = moveTo[1] + e.movementY
+    setMoveTo([xcoord, ycoord])
+  }
+  const handleMove = e => {
+    move && moveIcon(e)
+  }
+  const handelDown = () => {
+    setMove(true)
+  }
+  const handelUp = () => {
+    setMove(false)
+  }
+
+  return { move, moveTo, handelDown, handelUp, handleMove }
+}

package/src/hooks/useEvent/index.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+export const on = ({ eventType, callBack }) => {
+    document.addEventListener(eventType, callBack);
+};
+export const off = ({ eventType, callBack }) => {
+    document.removeEventListener(eventType, callBack);
+};
+export const once = ({ eventType, callBack }) => {
+    const handleEventOnce = (event) => {
+        callBack(event);
+        off({ eventType, callBack: handleEventOnce });
+    };
+    on({ eventType, callBack: handleEventOnce });
+};
+export const trigger = ({ eventType, data }) => {
+    const event = new CustomEvent(eventType, { detail: data });
+    document.dispatchEvent(event);
+};
+//This function is used to subscribe components an any event
+export const useEvents = ({ eventType, callBack }) => {
+    useEffect(() => {
+        on({ eventType, callBack: callBack });
+        return () => {
+            off({ eventType, callBack: callBack });
+        };
+    }, [eventType, callBack]);
+};
+// This function create and dispatch event
+export const useTrigerEvent = () => {
+    return {
+        trigger
+    };
+};

package/src/hooks/useFetchJson/index.js

@@ -0,0 +1,25 @@
+/**
+ * It fetches a json response, and if the response is not ok, it throws an error with the response and
+ * the data
+ * @param args - The arguments to pass to fetch.
+ */
+export const fetchJson = async (...args) =>  {
+    try {
+      const response = await fetch(...args)
+      // if the server replies, there's always some data in json
+      // if there's a network error, it will throw at the previous line
+      const data = await response.json()
+      if (response.ok) {
+        return data
+      }
+      const error = new Error(response.statusText)
+      error.response = response
+      error.data = data
+      throw error
+    } catch (error) {
+      if (!error.data) {
+        error.data = { message: error.message }
+      }
+      throw error
+    }
+  }

package/src/hooks/useFetchMoreInteractions/index.jsx

@@ -0,0 +1,35 @@
+import React, {
+    useState,
+    useEffect,
+    useRef
+} from 'react'
+
+export const useFetchMoreInteractions = ({ render, fetchMore = true, callback = () => {} }) => {
+    const loadingRef = useRef()
+
+    const useOnScreen = ref => {
+        const [isIntersecting, setIsIntersecting] = useState(false)
+
+        const observer = new IntersectionObserver(
+            ([entry]) => setIsIntersecting(entry.isIntersecting)
+        )
+
+        useEffect(() => {
+            if (ref.current) observer.observe(ref.current)
+            // Remove the observer as soon as the component is unmounted
+            return () => { observer.disconnect() }
+        }, [ref, observer])
+
+        return isIntersecting
+    }
+
+    const isVisible = useOnScreen(loadingRef)
+
+    useEffect(() => {
+        if (isVisible && fetchMore) callback()
+    }, [isVisible, callback, fetchMore])
+
+    return <div ref={loadingRef}>
+        {isVisible && fetchMore ? render || <div style={{ background: 'red' }} >Loading...{isVisible && 'lol'}</div> : <></>}
+    </div>
+}

package/src/hooks/useFormTools/index.js

@@ -0,0 +1,71 @@
+import {
+  useCallback,
+  useEffect,
+  useState
+  } from 'react'
+import { validationSubmitHooks } from '../../utils'
+/**
+ * @version 0.0.1
+ * @description Hook con herramientas de validación y eventos de cambio
+ * @return {Array} devuelve la función onChange a ejecutar y el estado de error de cada input
+ */
+export const useFormTools = () => {
+  const [dataForm, setDataForm] = useState({})
+  const [errorForm, setErrorForm] = useState({})
+  const [errorSubmit, setErrorSubmit] = useState(false)
+  const [calledSubmit, setCalledSubmit] = useState(false)
+
+  // Handle Change
+  const handleChange = useCallback((e, error) => {
+    setDataForm({ ...dataForm, [e.target.name]: e.target.value })
+    setErrorForm({ ...errorForm, [e.target.name]: error })
+  }, [setDataForm, dataForm, errorForm, setErrorForm])
+
+  // Forzar datos desde una ventana externa
+  const handleForcedData = useCallback(data => {
+    setDataForm(data)
+  }, [setDataForm])
+
+  // Forzar datos de error desde una ventana externa
+  const setForcedError = useCallback(errors => {
+    setErrorForm(errors)
+  }, [setErrorForm])
+
+  // Handle submit, al enviar formulario
+  const handleSubmit = useCallback(({ event, action, msgSuccess, msgError, actionAfterSuccess }) => {
+    !!event && event.preventDefault()
+    setCalledSubmit(true)
+    let errSub = false
+
+    // Valida los errores locales
+    for (const x in errorForm) {
+      if (errorForm[x]) errSub = true
+    }
+
+    // if (errSub) return setErrorSubmit(errSub)
+
+    // Valida los errores desde el evento
+    const errores = validationSubmitHooks(event.target.elements)
+    setErrorForm(errores)
+    for (const x in errores) {
+      if (errores[x]) errSub = true
+    }
+
+    // Ejecuta la petición si es válido
+    if (!errSub && action) {
+      action().then(res => {
+        if (res) {
+          // setAlertBox({ message: msgSuccess || 'Operación exitosa', color: PColor })
+          !!actionAfterSuccess && actionAfterSuccess()
+        }
+
+      }).catch(e => {return console.log({ message: msgError || e?.message || 'Ha ocurrido un error', color: WColor })})
+    }
+
+    setErrorSubmit(errSub)
+  }, [errorForm, setErrorForm])
+
+  useEffect(() => {return setCalledSubmit(false)}, [calledSubmit])
+
+  return [handleChange, handleSubmit, handleForcedData, { dataForm, errorForm, errorSubmit, calledSubmit, setForcedError }]
+}

package/src/hooks/useFullScreenMode/index.js

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect } from 'react'
+import styled from 'styled-components'
+
+const useFullscreenMode = () => {
+  const [isFullscreen, setFullscreen] = useState(false)
+  const elementRef = useRef()
+
+  useEffect(() => {
+    const changeHandler = () => {return setFullscreen(mode => {return !mode})}
+
+    document.addEventListener('fullscreenchange', changeHandler, false)
+    document.addEventListener('mozfullscreenchange', changeHandler, false)
+    document.addEventListener('MSFullScreenChange', changeHandler, false)
+    document.addEventListener(
+      'webkitfullscreenchange',
+      changeHandler,
+      false
+    )
+
+    return () => {
+      document.removeEventListener('fullscreenchange', changeHandler)
+      document.removeEventListener('mozfullscreenchange', changeHandler)
+      document.removeEventListener('MSFullScreenChange', changeHandler)
+      document.removeEventListener(
+        'webkitfullscreenchange',
+        changeHandler
+      )
+    }
+  }, [])
+
+  const goFullscreen = () => {
+    if (elementRef.current.requestFullscreen) {
+      elementRef.current.requestFullscreen()
+    } else if (elementRef.current.mozRequestFullscreen) {
+      //Firefox
+      elementRef.current.mozRequestFullscreen()
+    } else if (elementRef.current.webkitRequestFullscreen) {
+      //Chrome, safari, opera
+      elementRef.current.webkitRequestFullscreen()
+    } else if (elementRef.current.msRequestFullscreen) {
+      //IE, edge
+      elementRef.current.msRequestFullscreen()
+    }
+  }
+
+  const exitFullScreen = () => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen()
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen()
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen()
+    }
+  }
+
+  const ToggleIcon = (
+    <Button onDoubleClick={() => {return (!isFullscreen ? goFullscreen() : exitFullScreen())}}>{!isFullscreen ? 'FullScreen' : 'Normal'}</Button>
+  )
+  return [elementRef, ToggleIcon] //Icon, ref
+}
+const Button = styled.button`
+
+`
+export default useFullscreenMode

package/src/hooks/useGetCategorieStore/index.js

@@ -0,0 +1,21 @@
+import { useQuery } from '@apollo/client'
+import { useEffect, useState } from 'react'
+import { GET_ONE_STORE_IN_CATEGORY } from './queries'
+
+export const useGetCategorieStore = ({ catStoreId }) => {
+
+  const { data: dataCatSto, loading, error } = useQuery(GET_ONE_STORE_IN_CATEGORY, {
+    variables: {
+      catStore: catStoreId
+    },
+    onError: () => {
+      console.log({ message: '', duration: 5000 })
+
+    }
+  })
+  const [categories, setCategorieStore] = useState([])
+  useEffect(() => {
+    setCategorieStore(dataCatSto?.getOneCatStore || [])
+  }, [dataCatSto])
+  return [categories, { loading, error }]
+}

package/src/hooks/useGetCategorieStore/queries.js

@@ -0,0 +1,78 @@
+import { gql } from "@apollo/client";
+
+export const GET_ONE_STORE_IN_CATEGORY = gql`
+query getOneCatStore($catStore: ID){
+getOneCatStore(catStore: $catStore){
+  catStore
+  idUser
+  cName
+  cState
+  cDatCre
+  cPathImage
+  cDatMod
+  csDescription
+  getAllStore {
+      idStore
+      cId
+      id
+      dId
+      ctId
+      catStore
+      neighborhoodStore
+      Viaprincipal
+      storeOwner
+      storeName
+      emailStore
+      storePhone
+      socialRaz
+      Image
+      banner
+      documentIdentifier
+      uPhoNum
+      ULocation
+      upLat
+      upLon
+      uState
+      siteWeb
+      description
+      NitStore
+      typeRegiments
+      typeContribute
+      secVia
+      addressStore
+      createdAt
+      pais {
+        cId
+        cName
+        cCalCod
+        cState
+        cDatCre
+        cDatMod
+      }
+      city {
+        ctId
+        dId
+        cName
+        cState
+        cDatCre
+        cDatMod
+      } 
+      department {
+        dId
+        cId
+        dName
+        dState
+        dDatCre
+        dDatMod
+      }
+      getAllRatingStar {
+      rSId
+      rScore
+      idStore
+      createAt
+      
+    }
+  }
+  }
+}
+`

package/src/hooks/useGetProductsFood/index.js

@@ -0,0 +1,46 @@
+import { useQuery } from '@apollo/client'
+import { useEffect, useState } from 'react'
+import { GET_ALL_PRODUCT_STORE } from './queriesStore'
+
+export const useGetProductsFood = ({
+  categories,
+  desc,
+  fetchPolicy = 'network-only',
+  fromDate,
+  gender,
+  max = 50,
+  min,
+  pState,
+  search = null,
+  toDate
+}) => {
+  const [productsFood, setProductsFood] = useState([])
+  const [showMore, setShowMore] = useState(50)
+  const { data, loading, fetchMore, error } = useQuery(GET_ALL_PRODUCT_STORE, {
+    fetchPolicy: fetchPolicy,
+    variables:
+    {
+      categories: categories || [],
+      desc: desc || [],
+      fromDate: fromDate || null,
+      gender: gender || [],
+      max: max || null,
+      min: min || null,
+      pState: pState || 0,
+      search: search ?? search,
+      toDate: toDate || null
+    }
+  })
+  useEffect(() => {
+    setProductsFood(data?.productFoodsAll || [])
+  }, [data, productsFood])
+  return [
+    productsFood, {
+      error,
+      loading,
+      showMore,
+      fetchMore,
+      setShowMore
+    }
+  ]
+}