npm-pkg-hook 1.0.0 → 1.0.2

package/src/hooks/useHover/index.js

@@ -0,0 +1,29 @@
+import { useRef, useState, useEffect } from 'react'
+
+export default function useHover() {
+  const [value, setValue] = useState(false)
+
+  const ref = useRef(null)
+
+  const handleMouseOver = () => {return setValue(true)}
+  const handleMouseOut = () => {return setValue(false)}
+
+  useEffect(
+    () => {
+      const node = ref.current
+      if (node) {
+        node.addEventListener('mouseover', handleMouseOver)
+        node.addEventListener('mouseout', handleMouseOut)
+
+        return () => {
+          node.removeEventListener('mouseover', handleMouseOver)
+          node.removeEventListener('mouseout', handleMouseOut)
+        }
+      }
+      return {}
+    },
+    [] // Recall only if ref changes
+  )
+
+  return [ref, value]
+}

package/src/hooks/useInnerHtml/index.js

@@ -0,0 +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>
+  )
+}
+
+render(<App />, document.getElementById('root'))

package/src/hooks/useIntersection/index.js

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

package/src/hooks/useKeypress/index.js

@@ -0,0 +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
+}

package/src/hooks/useLocalSorage/index.js

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+
+export default function useLocalStorage(key, initialValue) {
+  // const { setAlertBox } = useContext(Context)
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key)
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      // If error also return initialValue
+      return initialValue
+    }
+  })
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = value => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      // Save state
+      setStoredValue(valueToStore)
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+    }
+  }
+
+  return [storedValue, setValue]
+}

package/src/hooks/useLocationNavigate/index.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react'
+
+const defaultSettings = {
+  enableHighAccuracy: false,
+  timeout: Infinity,
+  maximumAge: 0
+}
+
+export const usePosition = (watch = false, settings = defaultSettings) => {
+  const [position, setPosition] = useState({})
+  const [error, setError] = useState(null)
+
+  const onChange = ({ coords, timestamp }) => {
+    setPosition({
+      latitude: coords.latitude,
+      longitude: coords.longitude,
+      accuracy: coords.accuracy,
+      speed: coords.speed,
+      timestamp
+    })
+  }
+
+  const onError = () => {
+    setError(error?.message)
+  }
+
+  useEffect(() => {
+    if (!navigator || !navigator.geolocation) {
+      setError('Geolocation is not supported')
+      return
+    }
+
+    let watcher = null
+    if (watch) {
+      watcher = navigator.geolocation.watchPosition(
+        onChange,
+        onError,
+        settings
+      )
+    } else {
+      navigator.geolocation.getCurrentPosition(onChange, onError, settings)
+    }
+
+    return () => { return watcher && navigator.geolocation.clearWatch(watcher) }
+  }, [
+    settings,
+    settings.enableHighAccuracy,
+    settings.timeout,
+    settings.maximumAge,
+    watch
+  ])
+
+  return { ...position, error }
+}

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/useRestaurant/index.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@apollo/client'
+import { GET_ALL_RESTAURANT } from './queries'
+
+export const useRestaurant = () => {
+    const {
+        data,
+        loading,
+        error,
+        fetchMore
+        } = useQuery(GET_ALL_RESTAURANT, {
+        fetchPolicy: 'cache-and-network',
+        notifyOnNetworkStatusChange: true,
+        nextFetchPolicy: 'cache-first',
+        refetchWritePolicy: 'merge',
+        context: { clientName: 'admin-store'
+    }
+    })
+    return [data, { loading, error, fetchMore }]
+}

package/src/hooks/useRestaurant/queries.js

@@ -0,0 +1,70 @@
+import { gql } from '@apollo/client'
+export const GET_ALL_RESTAURANT = gql`
+query getAllStoreInStore($search: String, $min: Int, $max: Int){
+  getAllStoreInStore(search: $search, min: $min, max: $max) {
+    idStore
+    cId
+    id
+    dId
+    ctId
+    catStore
+    neighborhoodStore
+    Viaprincipal
+    storeOwner
+    storeName
+    cateStore{
+      catStore
+      cName
+    }
+    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
+    }
+  }
+}
+`