npm-pkg-hook 1.0.1 → 1.0.2

package/src/hooks/useFetchMoreInteractions/index.jsx

@@ -1,35 +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>
+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

@@ -1,71 +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 }]
+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

@@ -1,66 +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`
-
-`
+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

@@ -1,21 +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 }]
+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

@@ -1,78 +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
-      
-    }
-  }
-  }
-}
+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
+    }
+  ]
+}