npm-pkg-hook 1.0.1 → 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/useIntersection/index.js

@@ -28,4 +28,57 @@ export const useOnScreen = (threshold = 0.6) => {
   )
 
   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/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;
+};
+

package/src/hooks/useLocationNavigate/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 const defaultSettings = {
   enableHighAccuracy: false,

package/src/hooks/useMobile/index.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+export const useMobile = (props) => {
+    const { callBack = () => { return null; } } = props || {};
+    const [innerHeight, setInnerHeight] = useState();
+    const [innerWidth, setInnerWidth] = useState();
+    let isMobile = false;
+    useEffect(() => {
+        setInnerHeight(window.innerHeight);
+        setInnerWidth(window.innerWidth);
+        callBack();
+    }, []);
+    useEffect(() => {
+        const handleResize = () => {
+            if (!isNaN(window === null || window === void 0 ? void 0 : window.innerHeight) && (window === null || window === void 0 ? void 0 : window.innerHeight) != innerHeight) {
+                setInnerHeight(window.innerHeight);
+            }
+            if (!isNaN(window.innerWidth) && window.innerWidth != innerWidth) {
+                setInnerWidth(window.innerWidth);
+            }
+            callBack();
+        };
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    });
+    if (typeof window !== 'undefined' && /Mobile/i.test((navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) || (navigator === null || navigator === void 0 ? void 0 : navigator.vendor))) {
+        isMobile = true;
+    }
+    return {
+        isMobile,
+        innerHeight,
+        innerWidth
+    };
+};

package/src/hooks/useMutateHeight/index.js

@@ -0,0 +1,37 @@
+import {
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+
+export const  useMutateHeight = ({ isCollapsed = false }) => {
+  const [collapsed, setCollapsed] = useState(isCollapsed);
+  const childrenContainerRef = useRef(null);
+
+  useEffect(() => {
+    setCollapsed(isCollapsed);
+    if (childrenContainerRef.current !== null) {
+      const height = isCollapsed
+        ? childrenContainerRef.current.scrollHeight
+        : 0;
+      childrenContainerRef.current.style.height = `${height}px`;
+    }
+  }, [isCollapsed]);
+
+  const handleCollapsed = visible => {
+    setCollapsed(visible);
+    if (childrenContainerRef.current !== null) {
+      const height = visible ? childrenContainerRef.current.scrollHeight : 0;
+      childrenContainerRef.current.style.height = `${height}px`;
+    }
+  };
+
+  return {
+    handleCollapsed,
+    childrenContainerRef,
+    collapsed
+  };
+};
+
+// https://codesandbox.io/s/dropdown-navigation-9fx6r?file=/src/Navigation/Navigation.js:357-775