npm-pkg-hook 1.0.2 → 1.0.4

package/src/hooks/useCheckbox/index.js

@@ -1,114 +1,114 @@
-import { useCallback, useState } from 'react'
-
-/**
- * Hook for managing multiple checkbox states
- *
- * @param {Array<String | Number>} elem - list of all elem
- * @param {Array<String | Number>} selectedIds - list of selected elem (optional)
- *
- * @returns {Object}
- *  - checkboxStates (state object),
- *  - numSelectedItems (number),
- *  - handleChangeCheck (callback),
- *  - toggleAll (callback),
- *  - selectAll (callback),
- *  - clearAll (callback)
- */
-
-export const useCheckboxState = (elem, selectedIds = [], disabledIds = []) => {
-  const numTotalItems = elem?.length
-  const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
-  const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
-
-  const handleChangeCheck = useCallback((event, id) => {
-    const target = event.target
-    setCheckedItems(prevState => {
-      const newState = new Set(prevState)
-      if (target.checked) {
-        newState.add(id)
-      } else {
-        newState.delete(id)
-      }
-      return newState
-    })
-  }, [])
-
-  const setAll = useCallback(
-    isChecked => {
-      setCheckedItems(prevState => {
-        const newState = new Set(prevState)
-        for (const id of elem) {
-          if (disabledItems.has(id)) {
-            continue
-          }
-          if (isChecked) {
-            newState.add(id)
-          } else {
-            newState.delete(id)
-          }
-        }
-        return newState
-      })
-    },
-    [elem, disabledItems]
-  )
-
-  const selectAll = useCallback(() => {
-    if (checkedItems.size === numTotalItems) {
-      return
-    }
-    setAll(true)
-  }, [checkedItems, numTotalItems, setAll])
-
-  const clearAll = useCallback(() => {
-    if (checkedItems.size === 0) {
-      return
-    }
-    setAll(false)
-  }, [checkedItems, setAll])
-
-  const toggleAll = useCallback(() => {
-    const numDisabledAndChecked = [...disabledItems].reduce((count, id) => {
-      if (checkedItems.has(id)) {
-        return count + 1
-      }
-      return count
-    }, 0)
-    if (checkedItems.size - numDisabledAndChecked === 0) {
-      selectAll()
-    } else {
-      clearAll()
-    }
-  }, [checkedItems, disabledItems, selectAll, clearAll])
-
-  const enableCheckboxes = useCallback((...elem) => {
-    setDisabledItems(prevState => {
-      const newState = new Set(prevState)
-      for (const id of elem) {
-        newState.delete(id)
-      }
-      return newState
-    })
-  }, [])
-
-  const disableCheckboxes = useCallback((...elem) => {
-    setDisabledItems(prevState => {
-      const newState = new Set(prevState)
-      for (const id of elem) {
-        newState.add(id)
-      }
-      return newState
-    })
-  }, [])
-
-  return {
-    checkedItems,
-    disabledItems,
-    handleChangeCheck,
-    toggleAll,
-    selectAll,
-    clearAll,
-    enableCheckboxes,
-    disableCheckboxes
-  }
-}
+import { useCallback, useState } from 'react'
+
+/**
+ * Hook for managing multiple checkbox states
+ *
+ * @param {Array<String | Number>} elem - list of all elem
+ * @param {Array<String | Number>} selectedIds - list of selected elem (optional)
+ *
+ * @returns {Object}
+ *  - checkboxStates (state object),
+ *  - numSelectedItems (number),
+ *  - handleChangeCheck (callback),
+ *  - toggleAll (callback),
+ *  - selectAll (callback),
+ *  - clearAll (callback)
+ */
+
+export const useCheckboxState = (elem, selectedIds = [], disabledIds = []) => {
+  const numTotalItems = elem?.length
+  const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
+  const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
+
+  const handleChangeCheck = useCallback((event, id) => {
+    const target = event.target
+    setCheckedItems(prevState => {
+      const newState = new Set(prevState)
+      if (target.checked) {
+        newState.add(id)
+      } else {
+        newState.delete(id)
+      }
+      return newState
+    })
+  }, [])
+
+  const setAll = useCallback(
+    isChecked => {
+      setCheckedItems(prevState => {
+        const newState = new Set(prevState)
+        for (const id of elem) {
+          if (disabledItems.has(id)) {
+            continue
+          }
+          if (isChecked) {
+            newState.add(id)
+          } else {
+            newState.delete(id)
+          }
+        }
+        return newState
+      })
+    },
+    [elem, disabledItems]
+  )
+
+  const selectAll = useCallback(() => {
+    if (checkedItems.size === numTotalItems) {
+      return
+    }
+    setAll(true)
+  }, [checkedItems, numTotalItems, setAll])
+
+  const clearAll = useCallback(() => {
+    if (checkedItems.size === 0) {
+      return
+    }
+    setAll(false)
+  }, [checkedItems, setAll])
+
+  const toggleAll = useCallback(() => {
+    const numDisabledAndChecked = [...disabledItems].reduce((count, id) => {
+      if (checkedItems.has(id)) {
+        return count + 1
+      }
+      return count
+    }, 0)
+    if (checkedItems.size - numDisabledAndChecked === 0) {
+      selectAll()
+    } else {
+      clearAll()
+    }
+  }, [checkedItems, disabledItems, selectAll, clearAll])
+
+  const enableCheckboxes = useCallback((...elem) => {
+    setDisabledItems(prevState => {
+      const newState = new Set(prevState)
+      for (const id of elem) {
+        newState.delete(id)
+      }
+      return newState
+    })
+  }, [])
+
+  const disableCheckboxes = useCallback((...elem) => {
+    setDisabledItems(prevState => {
+      const newState = new Set(prevState)
+      for (const id of elem) {
+        newState.add(id)
+      }
+      return newState
+    })
+  }, [])
+
+  return {
+    checkedItems,
+    disabledItems,
+    handleChangeCheck,
+    toggleAll,
+    selectAll,
+    clearAll,
+    enableCheckboxes,
+    disableCheckboxes
+  }
+}

package/src/hooks/useClients/index.js

@@ -1,13 +1,13 @@
-import { useQuery } from '@apollo/client'
-import { useEffect, useState } from 'react'
-import { GET_ALL_CLIENTS } from './queries'
-
-export const useGetClients = () => {
-    const [clientes, setClients] = useState([])
-  const { loading, error } = useQuery(GET_ALL_CLIENTS, {
-    onCompleted: (data) => {
-        setClients(data)
-    }
-  })
-  return [clientes?.getAllClients, { loading, error }]
-}
+import { useQuery } from '@apollo/client'
+import { useState } from 'react'
+import { GET_ALL_CLIENTS } from './queries'
+
+export const useGetClients = () => {
+    const [clientes, setClients] = useState([])
+    const { loading, error } = useQuery(GET_ALL_CLIENTS, {
+    onCompleted: (data) => {
+        setClients(data)
+    }
+  })
+  return [clientes?.getAllClients || [], { loading, error }]
+}

package/src/hooks/useClients/queries.js

@@ -1,118 +1,118 @@
-import { gql } from '@apollo/client'
-
-export const CREATE_CLIENTS = gql`
-mutation createClients ($input: IClients) {
-  createClients(input: $input) {
-    cliId
-    idStore
-    idUser
-    clState
-    ClientAddress
-    clientNumber
-    ccClient
-    gender
-    clientLastName
-    clientName
-    createAt
-    updateAt
-  }
-}
-`
-export const DELETE_ONE_CLIENTS = gql`
-mutation deleteClient($cliId: ID, $clState: Int!) {
-  deleteClient(cliId: $cliId, clState: $clState) {
-    success
-    message
-  }
-}
-`
-export const GET_ALL_CLIENTS = gql`
-query getAllClients($idStore: ID, $cId: ID, $dId: ID, $ctId: ID, $search: String,  $min: Int, $max: Int, $fromDate: DateTime, $toDate: DateTime ) {
-  getAllClients(idStore: $idStore, cId: $cId, dId: $dId, ctId: $ctId, search: $search, min: $min, max: $max, fromDate: $fromDate, toDate: $toDate) {
-    cliId
-    idStore
-    gender
-    # idUser
-    clState
-    clientNumber
-    ccClient
-    clientLastName
-    clientName
-    ClientAddress
-    createAt
-    updateAt
-
-  }
-}
-`
-export const GET_ONE_CLIENT = gql`
-query getOneClients($cliId: ID) {
-  getOneClients(cliId: $cliId) {
-    cliId
-    idStore
-    idUser
-    clState
-    clientNumber
-    ClientAddress
-    gender
-    ccClient
-    clientLastName
-    clientName
-    createAt
-    updateAt
-
-  }
-}
-`
-
-export const CREATE_SHOPPING_CARD = gql`
-mutation  registerShoppingCard($input: IShoppingCard, $idSubArray: IID_SUB_ITEMS){
-    registerShoppingCard(input: $input, idSubArray: $idSubArray){
-      ShoppingCard
-      id
-      pId
-      subProductsId
-      ShoppingCardRefCode
-      uuid
-      discountCardProduct
-      idUser
-      cName
-      idStore
-      cState
-      cDatCre
-      cDatMod
-      csDescription
-      cantProducts
-      comments
-      # idSubArray
-  }
-}
-`
-export const CREATE_SHOPPING_CARD_TO_USER_STORE = gql`
-mutation  registerSalesStore($input: [IShoppingCard], $id: ID, $idStore: ID, $pCodeRef: String, $change: String, $valueDelivery: Float, $payMethodPState: Int, $pickUp: Int, $totalProductsPrice: Float, $idSubArray: IID_SUB_ITEMS){
-    registerSalesStore(input: $input, id: $id, idStore: $idStore, pCodeRef: $pCodeRef,  change: $change, valueDelivery: $valueDelivery, payMethodPState: $payMethodPState, pickUp: $pickUp, totalProductsPrice: $totalProductsPrice,  idSubArray: $idSubArray){
- 			ShoppingCard {
-      ShoppingCard
-      id
-      pId
-      subProductsId
-      ShoppingCardRefCode
-      uuid
-      discountCardProduct
-      idUser
-      cName
-      idStore
-      cState
-      cDatCre
-      cDatMod
-      csDescription
-      cantProducts
-      comments
-        }
-    Response {
-      success
-      message
-    }
-  }
-}
+import { gql } from '@apollo/client'
+
+export const CREATE_CLIENTS = gql`
+mutation createClients ($input: IClients) {
+  createClients(input: $input) {
+    cliId
+    idStore
+    idUser
+    clState
+    ClientAddress
+    clientNumber
+    ccClient
+    gender
+    clientLastName
+    clientName
+    createAt
+    updateAt
+  }
+}
+`
+export const DELETE_ONE_CLIENTS = gql`
+mutation deleteClient($cliId: ID, $clState: Int!) {
+  deleteClient(cliId: $cliId, clState: $clState) {
+    success
+    message
+  }
+}
+`
+export const GET_ALL_CLIENTS = gql`
+query getAllClients($idStore: ID, $cId: ID, $dId: ID, $ctId: ID, $search: String,  $min: Int, $max: Int, $fromDate: DateTime, $toDate: DateTime ) {
+  getAllClients(idStore: $idStore, cId: $cId, dId: $dId, ctId: $ctId, search: $search, min: $min, max: $max, fromDate: $fromDate, toDate: $toDate) {
+    cliId
+    idStore
+    gender
+    # idUser
+    clState
+    clientNumber
+    ccClient
+    clientLastName
+    clientName
+    ClientAddress
+    createAt
+    updateAt
+
+  }
+}
+`
+export const GET_ONE_CLIENT = gql`
+query getOneClients($cliId: ID) {
+  getOneClients(cliId: $cliId) {
+    cliId
+    idStore
+    idUser
+    clState
+    clientNumber
+    ClientAddress
+    gender
+    ccClient
+    clientLastName
+    clientName
+    createAt
+    updateAt
+
+  }
+}
+`
+
+export const CREATE_SHOPPING_CARD = gql`
+mutation  registerShoppingCard($input: IShoppingCard, $idSubArray: IID_SUB_ITEMS){
+    registerShoppingCard(input: $input, idSubArray: $idSubArray){
+      ShoppingCard
+      id
+      pId
+      subProductsId
+      ShoppingCardRefCode
+      uuid
+      discountCardProduct
+      idUser
+      cName
+      idStore
+      cState
+      cDatCre
+      cDatMod
+      csDescription
+      cantProducts
+      comments
+      # idSubArray
+  }
+}
+`
+export const CREATE_SHOPPING_CARD_TO_USER_STORE = gql`
+mutation  registerSalesStore($input: [IShoppingCard], $id: ID, $idStore: ID, $pCodeRef: String, $change: String, $valueDelivery: Float, $payMethodPState: Int, $pickUp: Int, $totalProductsPrice: Float, $idSubArray: IID_SUB_ITEMS){
+    registerSalesStore(input: $input, id: $id, idStore: $idStore, pCodeRef: $pCodeRef,  change: $change, valueDelivery: $valueDelivery, payMethodPState: $payMethodPState, pickUp: $pickUp, totalProductsPrice: $totalProductsPrice,  idSubArray: $idSubArray){
+ 			ShoppingCard {
+      ShoppingCard
+      id
+      pId
+      subProductsId
+      ShoppingCardRefCode
+      uuid
+      discountCardProduct
+      idUser
+      cName
+      idStore
+      cState
+      cDatCre
+      cDatMod
+      csDescription
+      cantProducts
+      comments
+        }
+    Response {
+      success
+      message
+    }
+  }
+}
 `

package/src/hooks/useConnection/index.js

@@ -0,0 +1,23 @@
+export const useConnection = ({ setConnectionStatus }) => {
+    async function updateConnectionStatus() {
+      if (navigator.onLine) {
+        setConnectionStatus(navigator.onLine);
+      } else {
+        setConnectionStatus(navigator.onLine);
+      }
+    }
+  
+    // Attaching event handler for the load event
+    //   window.addEventListener('load', updateConnectionStatus);
+  
+    // Attaching event handler for the online event
+    window.addEventListener('online', function(e) {
+      updateConnectionStatus();
+    });
+  
+    // Attaching event handler for the offline event
+    window.addEventListener('offline', function(e) {
+      updateConnectionStatus();
+    });
+  };
+  

package/src/hooks/useCreateProduct/helpers/useEditImageProduct/index.js

@@ -0,0 +1,165 @@
+import { useRef, useState } from 'react'
+
+export const useEditImageProduct = ({ sendNotification = () => { }, initialState }) => {
+  const [openEditImage, setopenEditImage] = useState(false)
+  const [tags, setTags] = useState([])
+  const [errors, setErrors] = useState({})
+  const handleOpenEditImage = () => {
+    setopenEditImage(!openEditImage)
+  }
+  // eslint-disable-next-line
+  const changeHandler = (name, value) => {
+    if (name === 'tags') {
+      setTags(value)
+      if (value.length > 0 && errors.tags) {
+        setErrors(prev => {
+          const prevErrors = { ...prev }
+          delete prevErrors.tags
+          return prevErrors
+        })
+      }
+    }
+  }
+  const [existImage, setExistImage] = useState(false)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(0)
+  const imageRef = useRef(null)
+  const onCropChange = (crop) => {
+    setCrop(crop)
+  }
+
+  const onZoomChange = (zoom) => {
+    setZoom(zoom)
+  }
+
+  const onCropComplete = (crop, pixelCrop) => {
+    const canvas = document.createElement('canvas')
+    const img = imageRef.current
+
+    canvas.width = pixelCrop.width
+    canvas.height = pixelCrop.height
+
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(
+      img,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0, 0,
+      pixelCrop.width,
+      pixelCrop.height)
+    // ctx.drawImage(
+    //   img,
+    //   pixelCrop.x,
+    //   pixelCrop.y,
+    //   pixelCrop.width,
+    //   pixelCrop.height,
+    //   0,
+    //   0,
+    //   canvas.width,
+    //   canvas.height
+    // )
+    const croppedUrl = canvas.toDataURL()
+    // console.log(croppedUrl)
+    // You can use the croppedUrl for whatever you want
+    // for example, you can set it as the src of an img element
+    // or send it to a server
+    // Convert the dataURL to a blob
+    fetch(croppedUrl)
+      .then(response => { return response.blob() })
+      .then(blob => {
+        // Create a new File
+        const file = new File([blob], 'cropped_image.jpg', { type: blob.type })
+        setPreviewImg(
+          file
+            ? {
+                src: URL.createObjectURL(file),
+                alt: ''
+              }
+            : initialState
+        )
+        // You can use the file object to send it to a server or to download it
+        sendNotification({ title: 'Exito', description: 'Imagen editada' })
+        setExistImage(true)
+        handleOpenEditImage()
+      })
+      .catch(() => {
+        sendNotification({ title: 'Error', description: 'Ha ocurrido un error!' })
+      })
+    // You can use the file object to send it to a server or to download it
+  }
+  function getPixelCrop (image, crop, zoom) {
+    const imgWidth = image.naturalWidth
+    const imgHeight = image.naturalHeight
+
+    const scaledWidth = imgWidth * zoom
+    const scaledHeight = imgHeight * zoom
+
+    const x = (imgWidth * crop.x) / 100
+    const y = (imgHeight * crop.y) / 100
+
+    return {
+      x,
+      y,
+      width: scaledWidth,
+      height: scaledHeight
+    }
+  }
+  const handleEditImage = () => {
+    handleOpenEditImage()
+  }
+
+  const [Dimage, setImage] = useState('')
+  const [cropData, setCropData] = useState('#')
+  const [cropper, setCropper] = useState()
+  const onChange = (e) => {
+    e.preventDefault()
+    let files
+    if (e.dataTransfer) {
+      files = e.dataTransfer.files
+    } else if (e.target) {
+      files = e.target.files
+    }
+    const reader = new FileReader()
+    reader.onload = () => {
+      setImage(reader.result)
+    }
+    reader.readAsDataURL(files[0])
+  }
+
+  const getCropData = () => {
+    if (typeof cropper !== 'undefined') {
+      setCropData(cropper.getCroppedCanvas().toDataURL())
+      fetch(cropper)
+        .then(response => { return response.blob() })
+        .then(blob => {
+          // Create a new File
+          const file = new File([blob], 'cropped_image.jpg', { type: blob.type })
+          setPreviewImg(
+            file
+              ? {
+                  src: URL.createObjectURL(file),
+                  alt: ''
+                }
+              : initialState
+          )
+          // You can use the file object to send it to a server or to download it
+          sendNotification({ title: 'Exito', description: 'Imagen editada' })
+          setExistImage(true)
+          handleOpenEditImage()
+        })
+        .catch(() => {
+          sendNotification({ title: 'Error', description: 'Ha ocurrido un error!' })
+        })
+    }
+  }
+  return {
+    img: null,
+    crop,
+    existImage,
+    zoom,
+    handleEditImage,
+    onCropChange
+  }
+}