npm-pkg-hook 1.0.1 → 1.0.4

package/src/hooks/useCreateProduct/index.js

@@ -0,0 +1,268 @@
+import { useMutation } from '@apollo/client'
+import { useRef, useState } from 'react'
+import { convertBase64, RandomCode } from '../../utils'
+import useLocalStorage from '../useLocalSorage'
+import {
+  GET_ALL_FOOD_PRODUCTS,
+  UPDATE_IMAGE_PRODUCT_FOOD,
+  UPDATE_PRODUCT_FOOD
+} from '../useProductsFood/queriesStore'
+import { useStore } from '../useStore'
+import { useTagsProducts } from './../useProductsFood/usetagsProducts'
+import { useEditImageProduct } from './helpers/useEditImageProduct'
+
+export const useCreateProduct = ({
+  setAlertBox = () => { },
+  router,
+  sendNotification = () => { }
+}) => {
+  const [errors, setErrors] = useState({
+    names: ''
+  })
+  const [values, setValues] = useState({})
+  const [names, setName] = useLocalStorage('namefood', '')
+  const [showMore, setShowMore] = useState(50)
+  const [search, setSearch] = useState('')
+  const [imageBase64, setImageBase64] = useState(null)
+  const [active, setActive] = useState(0)
+  const [pId, setPid] = useState(null)
+
+  const [searchFilter, setSearchFilter] = useState({ gender: [], desc: [], speciality: [] })
+  const [filter, setFilter] = useState({ gender: [], desc: [], speciality: [] })
+  const initialState = { alt: '/ images/DEFAULTBANNER.png', src: '/images/DEFAULTBANNER.png' }
+  const [image, setImage] = useState(null)
+  const [{ alt, src }, setPreviewImg] = useState(initialState)
+  const fileInputRef = useRef(null)
+  const [arrTags, setTags] = useState([])
+
+  const [dataStore] = useStore()
+  const {
+    handleRegister: handleRegisterTags,
+    data,
+    handleAddTag,
+    tags
+  } = useTagsProducts()
+
+  // HANDLESS
+  const [check, setCheck] = useState({
+    availability: true,
+    noAvailability: false,
+  })
+
+  const handleCheck = (e) => {
+    const { name, checked } = e.target
+    return setCheck({ ...check, [name]: checked ? true : false })
+  }
+
+  const handleUpdateBanner = event => {
+    const { files } = event.target
+    setPreviewImg(
+      files.length
+        ? {
+          src: URL.createObjectURL(files[0]),
+          alt: files[0].name
+        }
+        : initialState
+    )
+  }
+  const handleChange = (e, error) => {
+    setValues({ ...values, [e.target.name]: e.target.value })
+    setErrors({ ...errors, [e.target.name]: error })
+  }
+  const handleChangeFilter = e => {
+    setSearch(e.target.value)
+  }
+  const onClickSearch = () => {
+    setSearchFilter({ ...filter })
+  }
+  const onClickClear = () => {
+    setSearchFilter({})
+  }
+  const handleChangeClick = e => {
+    const {
+      name,
+      value,
+      checked
+    } = e.target
+    !checked
+      ? setFilter(s => { return { ...s, [name]: s[name].filter(f => { return f !== value }) } })
+      : setFilter({ ...filter, [name]: [...filter[name], value] })
+    setSearchFilter({ ...filter })
+  }
+  const handleCheckFreeShipping = e => {
+    // setCheck(e.target.checked)
+    handleCheck(e)
+    setValues({
+      ...values,
+      ValueDelivery: '',
+    })
+  }
+
+  const [updateProductFoods] = useMutation(UPDATE_PRODUCT_FOOD, {
+  })
+  const [setImageProducts] = useMutation(UPDATE_IMAGE_PRODUCT_FOOD, {
+    context: { clientName: 'admin-server' }
+  })
+
+  const onFileInputChange = async event => {
+    const { files } = event.target
+
+    const file = event.target.files[0]
+    setImage(file)
+    const base64 = await convertBase64(file)
+    // eslint-disable-next-line
+    // const [size, { unit }] = await getFileSizeByUnit(file, "B");
+    setImageBase64(base64)
+    setPreviewImg(
+      files.length
+        ? {
+          src: URL.createObjectURL(files[0]),
+          alt: files[0].name
+        }
+        : initialState
+    )
+  }
+  const onTargetClick = () => {
+    fileInputRef.current.click()
+  }
+  const { img } = useEditImageProduct({ sendNotification, initialState })
+  const handleRegister = async () => {
+    const {
+      ProPrice,
+      ProDescuento,
+      ProDescription,
+      ProWeight,
+      ProHeight,
+      ValueDelivery,
+      carProId
+    } = values
+    if (!carProId && !names) return setErrors({ ...errors, carProId: true })
+
+    if (!ProPrice?.length > 0) {
+      return setErrors({ ...errors, ProPrice: true })
+    }
+    const ProImage = `${process.env.URL_ADMIN_SERVER}static/platos/${image?.name}`
+    const pCode = RandomCode(9)
+    const formatPrice = ProPrice ? parseFloat(ProPrice.replace(/\./g, '')) : 0
+    try {
+      updateProductFoods({
+        variables: {
+          input: {
+            idStore: dataStore?.getStore?.idStore || '',
+            ProPrice: check ? 0 : formatPrice,
+            ProDescuento: check ? 0 : parseInt(ProDescuento),
+            ValueDelivery: check ? 0 : parseFloat(ValueDelivery),
+            ProDescription,
+            pName: names,
+            pCode,
+            carProId,
+            pState: 1,
+            sTateLogistic: 1,
+            ProStar: 0,
+            ProImage,
+            ProHeight: parseFloat(ProHeight),
+            ProWeight,
+            ProOutstanding: check ? 1 : 0,
+            ProDelivery: check ? 1 : 0
+          }
+        },
+        update (cache) {
+          cache.modify({
+            fields: {
+              productFoodsAll (dataOld = []) {
+                return cache.writeQuery({ query: GET_ALL_FOOD_PRODUCTS, data: dataOld })
+              }
+            }
+          })
+        }
+      }).then((res) => {
+        const { updateProductFoods } = res?.data || {}
+        const { pId } = updateProductFoods || {}
+        setPid(pId ?? null)
+        router.push(
+          {
+            query: {
+              ...router.query,
+              food: pId
+            }
+          },
+          undefined,
+          { shallow: true }
+        )
+        sendNotification({ title: 'Success', description: `El producto ${names} subido con éxito` })
+        const objTag = {
+          aName: tags.tag,
+          pId
+        }
+        handleRegisterTags(objTag)
+        // setValues({})
+      }).catch(err => { return sendNotification({ title: `${err}`, description: 'Error inesperado' }) })
+      if (image !== null) {
+        setImageProducts({
+          variables: {
+            input: {
+              file: image,
+              pCode
+            }
+          }
+        }).then((response) => {
+        }).catch((error) => {
+          sendNotification({ title: `Ocurrió un error en la imagen en el producto ${names}`, description: 'error' })
+        })
+      }
+    } catch (error) {
+      setAlertBox({ message: `${error.message}`, duration: 7000 })
+    }
+  }
+
+  // Manage tags
+  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
+        })
+      }
+    }
+  }
+  return {
+    errors,
+    src,
+    names,
+    setName,
+    alt,
+    showMore,
+    success: true,
+    fileInputRef,
+    values,
+    search,
+    pId,
+    dataTags: data,
+    tags,
+    tags,
+    active,
+    idStore: dataStore?.getStore?.idStore || '',
+    arrTags,
+    setPid,
+    handleChange,
+    onClickClear,
+    handleChangeClick,
+    handleChangeFilter,
+    handleUpdateBanner,
+    onClickSearch,
+    changeHandler,
+    setErrors,
+    handleRegister,
+    setActive,
+    onFileInputChange,
+    handleRegisterTags,
+    setShowMore,
+    onTargetClick,
+    handleAddTag,
+    handleCheckFreeShipping,
+    check
+  }
+}

package/src/hooks/useDessert/index.js

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { MockData } from '../../mock'
+import { RandomCode } from '../../utils'
+import { useUpdateExtProductFoodsOptional } from '../updateExtProductFoodsOptional'
+import { useUpdateExtProductFoodsSubOptional } from '../useUpdateExtProductFoodsSubOptional'
+
+export const useDessert = ({ pId }) => {
+    // STATES
+  const [setCheck, setChecker] = useState({})
+  const [valueItems, setValueItems] = useState('')
+  const [title, setTitle] = useState('')
+  const [data, setData] = useState(MockData)
+  const dataListIds = data?.listIds?.filter(x => { return x !== '01list' })
+    //  HOOKS
+    const { handleMutateExtProductFoodsSubOptional } = useUpdateExtProductFoodsSubOptional()
+    const { handleUpdateExtProduct } = useUpdateExtProductFoodsOptional()
+
+    // HANDLESS
+    const handleCheck = (e) => {
+        const { name, checked } = e.target
+        setChecker({ ...setCheck, [name]: checked ? true : false })
+    }
+    const handleRemoveList = i => {
+        const Lines = data?.listIds?.filter((_, index) => { return index !== i })
+        setData({
+          listIds: [...Lines],
+          lists: {
+            ...data.lists
+          }
+        })
+      }
+      const removeOneItem = ({ listID, id }) => {
+        const currentList = data.lists[listID]
+        const totalCart = currentList?.cards?.filter((cart) => { return cart.id !== id })
+        setData({
+          listIds: [...data.listIds],
+          lists: {
+            ...data.lists,
+            [listID]: {
+              ...currentList,
+              cards: totalCart
+            }
+          }
+        })
+      }
+    const addCard = async (title, listId) => {
+        const id = await RandomCode(9)
+        const newCard = {
+          id: id,
+          title: title,
+          numberLimit: 5,
+          value: '',
+          required: setCheck.exState ? 1 : 0
+        }
+        const list = data.lists[listId]
+        list.cards = [...list.cards, newCard]
+        setData({
+          ...data,
+          lists: {
+            ...data.lists,
+            [listId]: list
+          }
+        })
+        handleMutateExtProductFoodsSubOptional({
+            pId,
+            title,
+            listId,
+            id,
+            state: 1
+        })
+        setTitle('')
+    }
+    const handleAdd = ({ listId }) => {
+        if (valueItems !== '') {
+          addCard(valueItems, listId)
+        }
+      }
+
+
+      const handleAddList = async ({ title, numberLimit }) => {
+        if (title !== '') {
+          const newListId = await RandomCode(9)
+          setData({
+            listIds: [...data.listIds, newListId],
+            lists: {
+              ...data.lists,
+              [newListId]: {
+                id: newListId,
+                title: title,
+                required: setCheck.exState ? 1 : 0,
+                numberLimit: numberLimit,
+                value: '',
+                cards: []
+              }
+            }
+          })
+          handleUpdateExtProduct({
+                pId,
+                code: newListId,
+                OptionalProName: title,
+                required: setCheck.exState ? 1 : 0,
+                numbersOptionalOnly: numberLimit
+          })
+          setTitle('')
+        }
+      }
+      const handleChangeItems = ({ listID, value: e }) => {
+        const value = e.target.value
+        setValueItems(value)
+        const currentList = data.lists[listID]
+        return dataListIds.map((salesLine) => {
+          if (salesLine === listID) {
+            setData({
+              listIds: [...data.listIds],
+              lists: {
+                ...data.lists,
+                [listID]: {
+                  ...currentList,
+                  value: value,
+                }
+              }
+            })
+          }
+        })
+      }
+  return {
+      setCheck,
+      data,
+      dataListIds,
+      title,
+      handleChangeItems,
+      handleCheck,
+      addCard,
+      setTitle,
+      handleAddList,
+      handleAdd,
+      removeOneItem,
+      handleRemoveList,
+      setData,
+  }
+}

package/src/hooks/useDrag/index.js

@@ -1,25 +1,25 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
-export function useDrag2(ref) {
+export function useDrag2 (ref) {
   useEffect(() => {
     const target = ref.current
     if (!target) return
     const previousOffset = { x: 0, y: 0 }
     let originMouseX
     let originMouseY
-    function onMousemove(e) {
+    function onMousemove (e) {
       const { pageX, pageY } = e
       const x = pageX - originMouseX + previousOffset.x
       const y = pageY - originMouseY + previousOffset.y
-      target.style.transform = `translate(${ x }px, ${ y }px)`
+      target.style.transform = `translate(${x}px, ${y}px)`
     }
-    function onMouseup(e) {
+    function onMouseup (e) {
       previousOffset.x += e.pageX - originMouseX
       previousOffset.y += e.pageY - originMouseY
       window.removeEventListener('mousemove', onMousemove)
       window.removeEventListener('mouseup', onMouseup)
     }
-    function onMousedown(e) {
+    function onMousedown (e) {
       originMouseX = e.pageX
       originMouseY = e.pageY
       window.addEventListener('mousemove', onMousemove)
@@ -33,7 +33,6 @@ export function useDrag2(ref) {
     }
   }, [ref])
 }
-import { useState } from 'react'
 
 export const useDrag = (x, y) => {
   const [move, setMove] = useState(false)
@@ -53,5 +52,11 @@ export const useDrag = (x, y) => {
     setMove(false)
   }
 
-  return { move, moveTo, handelDown, handelUp, handleMove }
-}
+  return {
+    move,
+    moveTo,
+    handelDown,
+    handelUp,
+    handleMove
+  }
+}

package/src/hooks/useFetchMoreInteractions/index.jsx

@@ -1,10 +1,13 @@
 import React, {
-    useState,
     useEffect,
-    useRef
+    useRef, useState
 } from 'react'
 
-export const useFetchMoreInteractions = ({ render, fetchMore = true, callback = () => {} }) => {
+export const useFetchMoreInteractions = ({
+    render,
+    fetchMore = true,
+    callback = () => {}
+}) => {
     const loadingRef = useRef()
 
     const useOnScreen = ref => {

package/src/hooks/useFormTools/index.js

@@ -2,7 +2,7 @@ import {
   useCallback,
   useEffect,
   useState
-  } from 'react'
+} from 'react'
 import { validationSubmitHooks } from '../../utils'
 /**
  * @version 0.0.1
@@ -14,7 +14,6 @@ export const useFormTools = () => {
   const [errorForm, setErrorForm] = useState({})
   const [errorSubmit, setErrorSubmit] = useState(false)
   const [calledSubmit, setCalledSubmit] = useState(false)
-
   // Handle Change
   const handleChange = useCallback((e, error) => {
     setDataForm({ ...dataForm, [e.target.name]: e.target.value })
@@ -32,6 +31,11 @@ export const useFormTools = () => {
   }, [setErrorForm])
 
   // Handle submit, al enviar formulario
+  const listErrors = Object.values(errorForm)
+  const errors = listErrors.find((error) => {
+    return error ===true
+  })
+
   const handleSubmit = useCallback(({ event, action, msgSuccess, msgError, actionAfterSuccess }) => {
     !!event && event.preventDefault()
     setCalledSubmit(true)
@@ -42,11 +46,17 @@ export const useFormTools = () => {
       if (errorForm[x]) errSub = true
     }
 
-    // if (errSub) return setErrorSubmit(errSub)
+    if (errors) {
+      setErrorSubmit(true)
+    return setForcedError({ ...errorForm })
+  }
+
+    if (errSub) return setErrorSubmit(errSub)
 
     // Valida los errores desde el evento
     const errores = validationSubmitHooks(event.target.elements)
     setErrorForm(errores)
+    console.log("🚀 ~ file: index.js ~ line 50 ~ handleSubmit ~ errores", errores)
     for (const x in errores) {
       if (errores[x]) errSub = true
     }
@@ -66,6 +76,9 @@ export const useFormTools = () => {
   }, [errorForm, setErrorForm])
 
   useEffect(() => {return setCalledSubmit(false)}, [calledSubmit])
+  useEffect(() => {
+    return setCalledSubmit(false)},
+  [])
 
   return [handleChange, handleSubmit, handleForcedData, { dataForm, errorForm, errorSubmit, calledSubmit, setForcedError }]
 }

package/src/hooks/useFormatDate/index.js

@@ -0,0 +1,34 @@
+export const useFormatDate = ({
+    date,
+    local = 'ES'
+}) => {
+    const dateToFormat = new Date(date ?? Date.now())
+    const fullDate = dateToFormat.toLocaleDateString(local, { year: 'numeric', month: '2-digit', day: '2-digit' })
+    const day = fullDate.split('/')[0]
+    const month = fullDate.split('/')[1]
+    const year = fullDate.split('/')[2]
+    const yearMonthDay = dateToFormat.toLocaleDateString('en-CA')
+    const numberDay = dateToFormat.getDay()
+    const shortDayName = dateToFormat.toLocaleDateString(local, { weekday: 'short' })
+    const longDayName = dateToFormat.toLocaleDateString(local, { weekday: 'long' })
+    const hourMinutes12 = dateToFormat.toLocaleTimeString('ES-CO', { hour: '2-digit', minute: '2-digit' })
+    const hourMinutes24 = dateToFormat.toLocaleTimeString('ES-CO', { hour: '2-digit', minute: '2-digit', hour12: false })
+    const handleHourPmAM = (hour) => {
+        const hourPmAm = new Date(`1/1/1999 ${hour}`).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
+        return hour ? hourPmAm : ''
+    }
+    return {
+    day,
+    fullDate,
+    hourMinutes12,
+    numberDay,
+    yearMonthDay,
+    hourMinutes24,
+    longDayName,
+    shortDayName,
+    month,
+    year,
+    handleHourPmAM,
+    }
+}
+

package/src/hooks/useImageOptimization/index.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+// use it
+// const imageUrl = 'https://example.com/image.jpg';
+// const optimizedUrl = useImageOptimization(imageUrl);
+
+export function useImageOptimization(imageUrl) {
+  const [optimizedUrl, setOptimizedUrl] = useState(null);
+
+  useEffect(() => {
+    const image = new Image();
+    image.src = imageUrl;
+
+    image.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      canvas.width = image.width;
+      canvas.height = image.height;
+
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+
+      const optimizedUrl = canvas.toDataURL('image/jpeg', 0.8);
+      setOptimizedUrl(optimizedUrl);
+    };
+  }, [imageUrl]);
+
+  return optimizedUrl;
+}

package/src/hooks/useImageWeight/index.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+export function useImageWeight(imageUrl) {
+  const [weight, setWeight] = useState(null);
+
+  useEffect(() => {
+    const image = new Image();
+    image.src = imageUrl;
+
+    image.onload = () => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('HEAD', imageUrl, true);
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          const contentLength = xhr.getResponseHeader('Content-Length');
+          setWeight(contentLength);
+        }
+      };
+      xhr.send();
+    };
+  }, [imageUrl]);
+
+  return weight;
+}
+
+// I use 
+// function MyComponent() {
+//     const imageUrl = 'https://example.com/image.jpg';
+//     const weight = useImageWeight(imageUrl);
+  
+//     return (
+//       <div>
+//         <img src={imageUrl} alt="My Image" />
+//         {weight ? `Peso de imagen: ${weight} bytes` : 'Cargando...'}
+//       </div>
+//     );
+//   }
+  
+// const weightInMB = weight / (1024 * 1024);
+
+// function MyComponent() {
+//     const imageUrl = 'https://example.com/image.jpg';
+//     const weight = useImageWeight(imageUrl);
+  
+//     return (
+//       <div>
+//         <img src={imageUrl} alt="My Image" />
+//         {weight ? `Peso de imagen: ${(weight / (1024 * 1024)).toFixed(2)} MB` : 'Cargando...'}
+//       </div>
+//     );
+//   }
+