npm-pkg-hook 1.0.0 → 1.0.1

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/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/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
+    }
+  }
+}
+`

package/src/hooks/useSetState/index.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+export const useSetState = initialState => {
+  const [state, setState] = useState(initialState)
+  const increase = () => {return setState(state + 1)}
+  const decrease = () => {return setState(state - 1)}
+  const reset = () => {return setState(0)}
+  useEffect(() => {
+    if (state === -1) return reset()
+    return {}
+  }, [state])
+  // Cambio de estado
+  const changeState = () => {
+    setState(!state)
+  }
+  return {
+    state,
+    increase,
+    decrease,
+    reset,
+    changeState,
+    setState
+  }
+}

package/src/hooks/useTimeAgo/useTimeAgo.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+
+const DATE_UNITS = [
+  ['day', 86400],
+  ['hour', 3600],
+  ['minute', 60],
+  ['second', 1]
+]
+
+const getDateDiffs = (timestamp) => {
+  const now = Date.now()
+  const elapsed = (timestamp - now) / 1000
+
+  for (const [unit, secondsInUnit] of DATE_UNITS) {
+    if (Math.abs(elapsed) > secondsInUnit || unit === 'second') {
+      const value = Math.round(elapsed / secondsInUnit)
+      return { value, unit }
+    }
+  }
+}
+
+export const useTimeAgo = (timestamp) =>  {
+  const [timeAgo, setTimeAgo] = useState(() => { return getDateDiffs(timestamp) })
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const newTimeAgo = getDateDiffs(timestamp)
+      setTimeAgo(newTimeAgo)
+    }, 5000)
+
+    return () => { return clearInterval(interval) }
+  }, [timestamp])
+
+  const rtf = new Intl.RelativeTimeFormat('es', { style: 'short' })
+
+  const { value, unit } = timeAgo
+
+  return rtf && rtf?.format(value, unit)
+}

package/src/hooks/useUpdateCart/index.js

@@ -0,0 +1,123 @@
+import debounce from 'lodash.debounce'
+import { useState } from 'react'
+import { useEffect } from 'react'
+import { getCurrentDomain } from '../../utils'
+import { trigger } from '../useEvent'
+// EXAMPLE
+// https://codesandbox.io/s/nextjs-cart-system-tfg1e?file=/pages/_app.js
+
+// Method to execute the event to add all items of the app.cart cookie
+const updateCart = debounce((items = []) => {
+  trigger({ eventType: 'app.cart', data: { loading: true, items } })
+}, 3000)
+
+const EMPTY_CART = {
+  items: [],
+  total: 0
+}
+
+export const useUpdateCart = () => {
+  const domain = getCurrentDomain()
+  const keyToSaveData = 'app.cart'
+  const saveDataState = JSON.parse(Cookies.get(keyToSaveData) || '[]')
+  const [cart, setCart] = useState(EMPTY_CART)
+
+  useEffect(() => {
+    // restore cart from cookie, this could also be tracked in a db
+    const cart = Cookies.get(keyToSaveData)
+
+    // if items in cart, set items and total to state
+    if (typeof cart === 'string' && cart !== 'undefined') {
+      const cartData = JSON.parse(cart)
+      const total = cartData.reduce(
+        (total, item) => {return total + item.price * item.quantity},
+        0
+      )
+
+      setCart({ items: cartData, total })
+    }
+  }, [])
+
+  useEffect(() => {
+    Cookies.set(keyToSaveData, JSON.stringify(cart.items), { domain, path: '/' })
+  }, [cart, domain])
+
+  const handleAdd = (item) => {
+    // check for item already in cart
+    // if not in cart, add item else if item is found increment quantity
+    const itemExists = cart.items.find((i) => {return i.pId === item.pId})
+
+    if (!itemExists) {
+      setCart((prevCart) => {return {
+        items: [...prevCart.items, { ...item, quantity: 1 }],
+        total: prevCart.total + item.price
+      }})
+
+      return
+    }
+
+    setCart((prevCart) => {return {
+      items: prevCart.items.map((i) => {
+        if (i.pId === item.pId) {
+          return { ...i, quantity: i.quantity + 1 }
+        }
+
+        return i
+      }),
+      total: prevCart.total + item.price
+    }})
+    updateCart(cart)
+  }
+
+  const deleteProductCart = (item) => {
+    setCart((prevCart) => {
+      const items = prevCart.items
+      const index = items.findIndex((i) => {return i.pId === item.pId})
+
+      items.splice(index, 1)
+
+      const total = items.reduce((t, i) => {return t + i.quantity * i.price}, 0)
+
+      return { items, total }
+    })
+  }
+
+  const decreaseItemFromCart = (item) => {
+    // check for item already in cart
+    // if quantity is more then  in cart, subtract item else remove item
+    const itemInCart = cart.items.find((i) => {return i.pId === item.pId})
+
+    if (!itemInCart) {
+      return
+    }
+
+    if (itemInCart.quantity === 1) {
+      deleteProductCart(item)
+
+      return
+    }
+
+    setCart((prevCart) => {return {
+      items: prevCart.items.map((i) => {
+        if (i.pId === item.pId) {
+          return { ...i, quantity: item.quantity - 1 }
+        }
+
+        return i
+      }),
+      total: prevCart.total - item.price
+    }})
+  }
+
+  const clearCart = () => {
+    setCart(EMPTY_CART)
+  }
+
+  return {
+    saveDataState,
+    clearCart,
+    deleteProductCart,
+    decreaseItemFromCart,
+    handleAdd
+  }
+}

package/src/hooks/useUser/index.js

@@ -0,0 +1,3 @@
+export const useUser = () => {
+  return []
+}