npm-pkg-hook 1.0.2 → 1.0.4

package/src/hooks/useImagesStore/index.js

@@ -0,0 +1,171 @@
+import { useMutation } from '@apollo/client';
+import {
+  useRef,
+  useState
+} from 'react';
+import {
+  CREATE_BANNER_STORE,
+  CREATE_LOGO,
+  DELETE_ONE_BANNER_STORE,
+  DELETE_ONE_LOGO_STORE,
+  GET_ONE_BANNER_STORE
+} from '../useProductsFood/queriesStore';
+import { GET_ONE_STORE } from '../useStore/queries';
+
+export const useImageStore = (idStore) => {
+    // STATES
+    const fileInputRef = useRef(null)
+    const [{ altLogo, srcLogo }, setPreviewImgLogo] = useState({})
+    const initialState = { alt: '/images/DEFAULTBANNER.png', src: '/images/DEFAULTBANNER.png' }
+    const [{ alt, src }, setPreviewImg] = useState(initialState)
+    const fileInputRefLogo = useRef(null)
+    // HOOKS
+    const [registerBanner] = useMutation(CREATE_BANNER_STORE, {
+        onCompleted: (data) => { return console.log({ message: data?.registerBanner?.message }) },
+        context: { clientName: 'admin-server' }
+    })
+    const [setALogoStore] = useMutation(CREATE_LOGO, {
+    onCompleted: (data) => { return console.log({ message: data?.setALogoStore?.message }) },
+    context: { clientName: 'admin-server' }
+    })
+    const [DeleteOneBanner] = useMutation(DELETE_ONE_BANNER_STORE, {
+        onCompleted: (data) => { return console.log({ message: data?.DeleteOneBanner?.message }) },
+        context: { clientName: 'admin-server' }
+    })
+    const [deleteALogoStore] = useMutation(DELETE_ONE_LOGO_STORE, {
+        onCompleted: (data) => {
+        console.log({
+            message: data.deleteALogoStore.message
+        })
+        setPreviewImgLogo(initialState)
+        },
+        context: { clientName: 'admin-server' },
+        update(cache) {
+        cache.modify({
+            fields: {
+            getStore(dataOld = []) {
+                return cache.writeQuery({ query: GET_ONE_STORE, data: dataOld })
+            }
+            }
+        })
+        }
+    })
+//   HANDLESS
+    const handleDeleteLogo = () => {
+        return deleteALogoStore({
+            variables: {
+            Image: ImageName || null
+            }
+        })
+    }
+
+    const handleUpdateBanner = event => {
+        try {
+          const { files } = event.target
+          setPreviewImg(
+            files.length
+              ? {
+                src: URL.createObjectURL(files[0]),
+                alt: files[0].name
+              }
+              : initialState
+          )
+          registerBanner({
+            variables: {
+              input: {
+                bnImage: files[0],
+                idStore: idStore
+              }
+            }, update(cache) {
+              cache.modify({
+                fields: {
+                  getOneBanners(dataOld = []) {
+                    return cache.writeQuery({ query: GET_ONE_BANNER_STORE, data: dataOld })
+                  }
+                }
+              })
+            }
+          }).catch(() => {
+            console.log({ message: 'No pudimos cargar la imagen', duration: 7000 })
+            setPreviewImg(initialState)
+          })
+    
+        } catch {
+          setPreviewImg(initialState)
+          console.log({ message: 'No pudimos cargar la imagen', duration: 7000 })
+        }
+      }
+      const handleInputChangeLogo = event => {
+        const { files } = event.target
+        setPreviewImgLogo(
+          files.length
+            ? {
+              srcLogo: URL.createObjectURL(files[0]),
+              altLogo: files[0].name
+            }
+            : initialState
+        )
+        setALogoStore({
+          variables: {
+            logo: files[0],
+            idStore: idStore
+          }, update(cache) {
+            cache.modify({
+              fields: {
+                getStore(dataOld = []) {
+                  return cache.writeQuery({ query: GET_ONE_STORE, data: dataOld })
+                }
+              }
+            })
+          }
+        }).catch(() => {
+          console.log({ message: 'No pudimos cargar el banner', duration: 7000 })
+          setPreviewImgLogo(initialState)
+        })
+      }
+      const HandleDeleteBanner = async () => {
+        setPreviewImg(initialState)
+        DeleteOneBanner({
+          variables: {
+            bnState: bnState,
+            bnImageFileName: bnImageFileName,
+            idStore,
+            bnId
+          }, update(cache) {
+            cache.modify({
+              fields: {
+                getOneBanners(dataOld = []) {
+                  return cache.writeQuery({ query: GET_ONE_BANNER_STORE, data: dataOld })
+                }
+              }
+            })
+          }
+        }).then(() => {
+          setPreviewImg(initialState)
+        })
+      }
+    const onTargetClickLogo = e => {
+        e.preventDefault()
+        fileInputRefLogo.current.click()
+    }
+    const onTargetClick = e => {
+        e.preventDefault()
+        fileInputRef.current.click()
+    }
+  return {
+    fileInputRefLogo,
+    src,
+    alt,
+    initialState,
+    srcLogo,
+    altLogo,
+    fileInputRef,
+    handleDeleteLogo,
+    onTargetClick,
+    onTargetClickLogo,
+    HandleDeleteBanner,
+    handleInputChangeLogo,
+    handleUpdateBanner
+  }
+}
+

package/src/hooks/useImagesStore/queries.js

@@ -0,0 +1,216 @@
+import { gql } from '@apollo/client'
+
+export const CREATE_SCHEDULE_STORE = gql`
+mutation setStoreSchedule($input: IsStoreSchedule!){
+setStoreSchedule(input: $input){
+  success
+  message
+}
+}
+`
+export const GET_SCHEDULE_STORE = gql`
+ query getStoreSchedules($schDay: Int, $idStore: ID) {
+        getStoreSchedules(schDay: $schDay, idStore: $idStore){
+            schId
+            idStore
+            schDay
+            schHoSta
+            schHoEnd
+            schState
+        }
+    }
+`
+export const GET_ONE_SCHEDULE_STORE = gql`
+ query getOneStoreSchedules($schDay: Int, $idStore: ID) {
+        getOneStoreSchedules(schDay: $schDay, idStore: $idStore){
+            schId
+            schDay
+            schHoSta
+            schHoEnd
+            schState
+        }
+    }
+`
+export const GET_CAT_OF_PRODUCTS = gql`
+query getAllCatOfProducts($idStore: ID) {
+ getAllCatOfProducts(idStore: $idStore) {
+  id
+  cpId
+  catName
+  catDescription
+  schState
+  
+}
+}
+`
+export const REGISTER_CAT_OF_PRODUCTS = gql`
+mutation  updatedProducts($input: InputCatProducts){
+  updatedProducts(input: $input){
+    success
+    message
+  }
+}
+`
+export const REGISTER_CONTRACT_STORE = gql`
+mutation createOneContract($input: InputContractType) {
+  createOneContract(input: $input) {
+    success
+    message
+  }
+}
+`
+export const GET_ALL_EMPLOYEE_STORE = gql`
+query employees ($umId: ID, $cId: ID, $aId: ID){
+   employees(umId: $umId, cId: $cId, aId: $aId) {
+    eId
+    idStore
+    id
+    idEmployee
+    eSalary
+    typeContract
+    uEmail
+    termContract
+    eDatAdm
+    eState
+  }
+}
+`
+export const GET_ALL_PRODUCT_STORE = gql`
+query productFoodsAll($search: String, $min: Int, $max: Int, $gender: [String], $pState: Int, $desc: [String], $categories: [ID], $fromDate: DateTime, $toDate: DateTime ) {
+  productFoodsAll(search: $search, min: $min, max: $max, gender: $gender, desc: $desc, pState: $pState categories: $categories,  toDate: $toDate, fromDate: $fromDate) {
+    pId
+    sizeId #Talla
+    colorId #Color
+    cId  #Country
+    dId  #Department
+    ctId  #Cuidad
+    fId  #Características
+    pName
+    ProPrice
+    ProDescuento
+    free
+      ProUniDisponibles
+      ProDescription
+      ProProtegido
+      ProAssurance
+      ValueDelivery
+      ProStar
+    sTateLogistic
+      ProImage
+      ProWidth
+      ProHeight
+      ProLength
+      ProWeight
+      ProQuantity
+      ProOutstanding
+    pDatCre
+    pDatMod
+      ProDelivery
+      ProVoltaje
+    pState
+    feat {
+      fId
+      thpId
+      hpqrQuestion
+    }
+    area {
+      aId
+      aName
+    }
+    
+  }
+}
+
+`
+export const GET_ALL_RATING_START_STORE = gql`
+query getAllRatingStar($idStore: ID){
+getAllRatingStar(idStore: $idStore){
+  rSId
+  rScore
+  idStore
+  createAt 
+  }
+}
+`
+export const GET_ALL_VISITOR_STORE = gql`
+query getAllVisitorStore($idStore: ID, $search: String,  $min: Int, $max: Int, $fromDate: DateTime, $toDate: DateTime) {
+  getAllVisitorStore(idStore: $idStore, search: $search, min: $min, max: $max, fromDate: $fromDate, toDate: $toDate) {
+    visitStoreId
+    id
+    idStore
+    createAt
+    updateAt
+  }
+}
+`
+export const GET_MIN_PEDIDO = gql`
+query getMinPrice($idStore: ID){
+getMinPrice(idStore: $idStore)
+}
+`
+
+export const GET_All_RATING_STORE = gql`
+query getAllRating($idStore: ID){
+  getAllRating(idStore: $idStore){
+  idStore
+  rId
+  id
+  rAppearance
+  rTasty
+  rGoodTemperature
+  rGoodCondition
+  rState
+  createAt
+  updateAt
+  }
+}
+`
+export const CREATE_LOGO = gql`
+mutation setALogoStore($logo: Upload, $idStore: ID) {
+  setALogoStore(logo: $logo, idStore: $idStore) {
+    success
+    message
+  }
+}
+`
+export const CREATE_BANNER_STORE = gql`
+mutation registerBanner($input: IBanner) {
+  registerBanner(input: $input) {
+    success
+    message
+    
+  }
+}
+`
+export const DELETE_ONE_LOGO_STORE = gql`
+  mutation deleteALogoStore($idStore: ID, $Image: String) {
+  deleteALogoStore(idStore: $idStore, Image: $Image) {
+      message
+      success
+  }
+
+}
+`
+export const GET_ONE_BANNER_STORE = gql`
+query getOneBanners($idStore: ID, $id: ID) {
+  getOneBanners(idStore: $idStore, id: $id) {
+    bnId
+    id
+    path
+    bnImageFileName
+    idStore
+    bnState
+    createAt
+    updateAt
+  }
+}
+`
+export const DELETE_ONE_BANNER_STORE = gql`
+mutation DeleteOneBanner($bnState: Int, $idStore: ID, $bnId: ID, $bnImage: String, $bnImageFileName: String) {
+  DeleteOneBanner(bnState: $bnState, idStore: $idStore, bnId: $bnId, bnImage: $bnImage, bnImageFileName: $bnImageFileName ) {
+    success
+    message
+    
+  }
+}
+`

package/src/hooks/useInnerHtml/index.js

@@ -1,38 +1,38 @@
-import React from 'react'
-import { render } from 'react-dom'
-import './styles.css'
-
-const htmlText =
-  '<p style=\'display:inline;\'>Lorem ipsum</p> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
-
-function App() {
-  const [state, setState] = React.useState({
-    showOriginalHTML: false,
-    originalHTML: htmlText
-  })
-
-  const handleShowText = React.useCallback(() => {
-    setState(prevState => {return {
-      ...prevState,
-      showOriginalHTML: !prevState.showOriginalHTML
-    }})
-  }, [setState])
-
-  return (
-    <div className='container'>
-      <div
-        className='text'
-        dangerouslySetInnerHTML={{
-          __html: `${
-            state.originalHTML
-          }`
-        }}
-      />
-      <button className='read-more' onClick={handleShowText}>
-        {!state.showOriginalHTML ? 'read more' : 'show less'}
-      </button>
-    </div>
-  )
-}
-
+import React from 'react'
+import { render } from 'react-dom'
+import './styles.css'
+
+const htmlText =
+  '<p style=\'display:inline;\'>Lorem ipsum</p> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+
+function App() {
+  const [state, setState] = React.useState({
+    showOriginalHTML: false,
+    originalHTML: htmlText
+  })
+
+  const handleShowText = React.useCallback(() => {
+    setState(prevState => {return {
+      ...prevState,
+      showOriginalHTML: !prevState.showOriginalHTML
+    }})
+  }, [setState])
+
+  return (
+    <div className='container'>
+      <div
+        className='text'
+        dangerouslySetInnerHTML={{
+          __html: `${
+            state.originalHTML
+          }`
+        }}
+      />
+      <button className='read-more' onClick={handleShowText}>
+        {!state.showOriginalHTML ? 'read more' : 'show less'}
+      </button>
+    </div>
+  )
+}
+
 render(<App />, document.getElementById('root'))

package/src/hooks/useIntersection/index.js

@@ -1,31 +1,84 @@
-import { useEffect, useState } from 'react'
-
-export const useOnScreen = (threshold = 0.6) => {
-  const [isVisible, setIsVisible] = useState(false)
-  const [ref, setRef] = useState(null)
-
-  useEffect(
-    () => {
-      let observer
-      if (ref) {
-        observer = new IntersectionObserver(
-          ([entry]) => {
-            setIsVisible(entry.isIntersecting)
-          },
-          {
-            // rootMargin,
-            threshold
-          }
-        )
-        observer.observe(ref)
-      }
-
-      return () => {
-        if (ref && observer) observer.unobserve(ref)
-      }
-    },
-    [ref]
-  )
-
-  return [setRef, isVisible]
-}
+import { useEffect, useState } from 'react'
+
+export const useOnScreen = (threshold = 0.6) => {
+  const [isVisible, setIsVisible] = useState(false)
+  const [ref, setRef] = useState(null)
+
+  useEffect(
+    () => {
+      let observer
+      if (ref) {
+        observer = new IntersectionObserver(
+          ([entry]) => {
+            setIsVisible(entry.isIntersecting)
+          },
+          {
+            // rootMargin,
+            threshold
+          }
+        )
+        observer.observe(ref)
+      }
+
+      return () => {
+        if (ref && observer) observer.unobserve(ref)
+      }
+    },
+    [ref]
+  )
+
+  return [setRef, isVisible]
+}
+
+const defaultObserverOptions = {
+    root: null,
+    threshold: 0.1,
+    rootMargin: "0px"
+};
+
+export const useIntersectionObserver = ({
+  active = true,
+  disconnect,
+  el,
+  options = defaultObserverOptions,
+  onEnter = () => {},
+  out = () => {}
+}) => {
+  const [onScreen, setOnScreen] = useState()
+  useEffect(() => {
+    let observer
+    const refEl = el.current
+    if (IntersectionObserver && active && refEl) {
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (disconnect) {
+            if (entry.isIntersecting) {
+              onEnter()
+              setOnScreen(true)
+            } else {
+              out()
+              setOnScreen(false)
+            }
+          }
+          if (!disconnect) {
+            onEnter()
+            setOnScreen(true)
+          }
+        })
+      }, options)
+      observer.observe(refEl)
+    }
+    return () => {
+      if (disconnect) {
+        // eslint-disable-next-line no-void
+        observer === null || observer === void 0 ? void 0 : observer.disconnect(refEl)
+      }
+      if (!disconnect) {
+        if (el && observer) observer.unobserve(refEl)
+      }
+    }
+  }, [el, onEnter, active, options])
+  return {
+    onScreen
+  }
+}

package/src/hooks/useKeypress/index.js

@@ -1,28 +1,28 @@
-import { useEffect, useState } from 'react'
-
-export const useKeyPress = (targetKey) => {
-  const [keyPressed, setKeyPressed] = useState(false)
-  
-  useEffect(() => {
-    const downHandler = ({ key }) => {
-      if (key === targetKey) {
-        setKeyPressed(true)
-      }
-    }
-    const upHandler = ({ key }) => {
-      if (key === targetKey) {
-        setKeyPressed(false)
-      }
-    }
-  
-    window.addEventListener('keydown', downHandler)
-    window.addEventListener('keyup', upHandler)
-  
-    return () => {
-      window.removeEventListener('keydown', downHandler)
-      window.removeEventListener('keyup', upHandler)
-    }
-  }, [targetKey])
-  
-  return keyPressed
+import { useEffect, useState } from 'react'
+
+export const useKeyPress = (targetKey) => {
+  const [keyPressed, setKeyPressed] = useState(false)
+  
+  useEffect(() => {
+    const downHandler = ({ key }) => {
+      if (key === targetKey) {
+        setKeyPressed(true)
+      }
+    }
+    const upHandler = ({ key }) => {
+      if (key === targetKey) {
+        setKeyPressed(false)
+      }
+    }
+  
+    window.addEventListener('keydown', downHandler)
+    window.addEventListener('keyup', upHandler)
+  
+    return () => {
+      window.removeEventListener('keydown', downHandler)
+      window.removeEventListener('keyup', upHandler)
+    }
+  }, [targetKey])
+  
+  return keyPressed
 }

package/src/hooks/useLazyScript/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export const useLazyScript = (src, delay = null) => {
+  const [status, setStatus] = React.useState(src ? 'loading' : 'idle');
+
+  React.useEffect(() => {
+    if (!src) {
+      setStatus('idle');
+      return 'idle';
+    }
+
+    let script = document.querySelector(`script[src='${src}']`);
+    let timeout = null;
+
+    if (!script) {
+      if (delay) {
+        timeout = setTimeout(() => {
+          injectScript();
+          // Add event listener after the script is added
+          script.addEventListener('load', setStateStatus);
+          script.addEventListener('error', setStateStatus);
+        }, delay);
+      } else {
+        injectScript();
+      }
+    } else {
+      setStatus(script.getAttribute('data-status'));
+    }
+
+    const setStateStatus = (event) => {
+      setStatus(event.type === 'load' ? 'ready' : 'error');
+    };
+
+    //code to inject script
+    function injectScript() {
+      script = document.createElement('script');
+      script.src = src;
+      script.async = true;
+      script.setAttribute('data-status', 'loading');
+      document.body.appendChild(script);
+
+      const setDataStatus = (event) => {
+        script.setAttribute(
+          'data-status',
+          event.type === 'load' ? 'ready' : 'error'
+        );
+      };
+
+      script.addEventListener('load', setDataStatus);
+      script.addEventListener('error', setDataStatus);
+    }
+
+    if (script) {
+      //script will be be undefined available when its delayed hence check it before adding listener
+      script.addEventListener('load', setStateStatus);
+      script.addEventListener('error', setStateStatus);
+    }
+
+    return () => {
+      if (script) {
+        script.removeEventListener('load', setStateStatus);
+        script.removeEventListener('error', setStateStatus);
+      }
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [src]);
+
+  return status;
+};
+