npm-pkg-hook 1.0.2 → 1.0.5

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,57 +1,62 @@
-import { useEffect } from 'react'
-
-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) {
-      const { pageX, pageY } = e
-      const x = pageX - originMouseX + previousOffset.x
-      const y = pageY - originMouseY + previousOffset.y
-      target.style.transform = `translate(${ x }px, ${ y }px)`
-    }
-    function onMouseup(e) {
-      previousOffset.x += e.pageX - originMouseX
-      previousOffset.y += e.pageY - originMouseY
-      window.removeEventListener('mousemove', onMousemove)
-      window.removeEventListener('mouseup', onMouseup)
-    }
-    function onMousedown(e) {
-      originMouseX = e.pageX
-      originMouseY = e.pageY
-      window.addEventListener('mousemove', onMousemove)
-      window.addEventListener('mouseup', onMouseup)
-    }
-    target.addEventListener('mousedown', onMousedown)
-    return () => {
-      target?.removeEventListener('mousedown', onMousedown)
-      window?.removeEventListener('mouseup', onMouseup)
-      window?.removeEventListener('mousemove', onMousemove)
-    }
-  }, [ref])
-}
-import { useState } from 'react'
-
-export const useDrag = (x, y) => {
-  const [move, setMove] = useState(false)
-  const [moveTo, setMoveTo] = useState([x, y])
-  const moveIcon = e => {
-    const xcoord = moveTo[0] + e.movementX
-    const ycoord = moveTo[1] + e.movementY
-    setMoveTo([xcoord, ycoord])
-  }
-  const handleMove = e => {
-    move && moveIcon(e)
-  }
-  const handelDown = () => {
-    setMove(true)
-  }
-  const handelUp = () => {
-    setMove(false)
-  }
-
-  return { move, moveTo, handelDown, handelUp, handleMove }
-}
+import { useEffect, useState } from 'react'
+
+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) {
+      const { pageX, pageY } = e
+      const x = pageX - originMouseX + previousOffset.x
+      const y = pageY - originMouseY + previousOffset.y
+      target.style.transform = `translate(${x}px, ${y}px)`
+    }
+    function onMouseup (e) {
+      previousOffset.x += e.pageX - originMouseX
+      previousOffset.y += e.pageY - originMouseY
+      window.removeEventListener('mousemove', onMousemove)
+      window.removeEventListener('mouseup', onMouseup)
+    }
+    function onMousedown (e) {
+      originMouseX = e.pageX
+      originMouseY = e.pageY
+      window.addEventListener('mousemove', onMousemove)
+      window.addEventListener('mouseup', onMouseup)
+    }
+    target.addEventListener('mousedown', onMousedown)
+    return () => {
+      target?.removeEventListener('mousedown', onMousedown)
+      window?.removeEventListener('mouseup', onMouseup)
+      window?.removeEventListener('mousemove', onMousemove)
+    }
+  }, [ref])
+}
+
+export const useDrag = (x, y) => {
+  const [move, setMove] = useState(false)
+  const [moveTo, setMoveTo] = useState([x, y])
+  const moveIcon = e => {
+    const xcoord = moveTo[0] + e.movementX
+    const ycoord = moveTo[1] + e.movementY
+    setMoveTo([xcoord, ycoord])
+  }
+  const handleMove = e => {
+    move && moveIcon(e)
+  }
+  const handelDown = () => {
+    setMove(true)
+  }
+  const handelUp = () => {
+    setMove(false)
+  }
+
+  return {
+    move,
+    moveTo,
+    handelDown,
+    handelUp,
+    handleMove
+  }
+}

package/src/hooks/useEvent/index.js

@@ -1,33 +1,33 @@
-import { useEffect } from 'react';
-export const on = ({ eventType, callBack }) => {
-    document.addEventListener(eventType, callBack);
-};
-export const off = ({ eventType, callBack }) => {
-    document.removeEventListener(eventType, callBack);
-};
-export const once = ({ eventType, callBack }) => {
-    const handleEventOnce = (event) => {
-        callBack(event);
-        off({ eventType, callBack: handleEventOnce });
-    };
-    on({ eventType, callBack: handleEventOnce });
-};
-export const trigger = ({ eventType, data }) => {
-    const event = new CustomEvent(eventType, { detail: data });
-    document.dispatchEvent(event);
-};
-//This function is used to subscribe components an any event
-export const useEvents = ({ eventType, callBack }) => {
-    useEffect(() => {
-        on({ eventType, callBack: callBack });
-        return () => {
-            off({ eventType, callBack: callBack });
-        };
-    }, [eventType, callBack]);
-};
-// This function create and dispatch event
-export const useTrigerEvent = () => {
-    return {
-        trigger
-    };
-};
+import { useEffect } from 'react';
+export const on = ({ eventType, callBack }) => {
+    document.addEventListener(eventType, callBack);
+};
+export const off = ({ eventType, callBack }) => {
+    document.removeEventListener(eventType, callBack);
+};
+export const once = ({ eventType, callBack }) => {
+    const handleEventOnce = (event) => {
+        callBack(event);
+        off({ eventType, callBack: handleEventOnce });
+    };
+    on({ eventType, callBack: handleEventOnce });
+};
+export const trigger = ({ eventType, data }) => {
+    const event = new CustomEvent(eventType, { detail: data });
+    document.dispatchEvent(event);
+};
+//This function is used to subscribe components an any event
+export const useEvents = ({ eventType, callBack }) => {
+    useEffect(() => {
+        on({ eventType, callBack: callBack });
+        return () => {
+            off({ eventType, callBack: callBack });
+        };
+    }, [eventType, callBack]);
+};
+// This function create and dispatch event
+export const useTrigerEvent = () => {
+    return {
+        trigger
+    };
+};

package/src/hooks/useFetchJson/index.js

@@ -1,25 +1,25 @@
-/**
- * It fetches a json response, and if the response is not ok, it throws an error with the response and
- * the data
- * @param args - The arguments to pass to fetch.
- */
-export const fetchJson = async (...args) =>  {
-    try {
-      const response = await fetch(...args)
-      // if the server replies, there's always some data in json
-      // if there's a network error, it will throw at the previous line
-      const data = await response.json()
-      if (response.ok) {
-        return data
-      }
-      const error = new Error(response.statusText)
-      error.response = response
-      error.data = data
-      throw error
-    } catch (error) {
-      if (!error.data) {
-        error.data = { message: error.message }
-      }
-      throw error
-    }
+/**
+ * It fetches a json response, and if the response is not ok, it throws an error with the response and
+ * the data
+ * @param args - The arguments to pass to fetch.
+ */
+export const fetchJson = async (...args) =>  {
+    try {
+      const response = await fetch(...args)
+      // if the server replies, there's always some data in json
+      // if there's a network error, it will throw at the previous line
+      const data = await response.json()
+      if (response.ok) {
+        return data
+      }
+      const error = new Error(response.statusText)
+      error.response = response
+      error.data = data
+      throw error
+    } catch (error) {
+      if (!error.data) {
+        error.data = { message: error.message }
+      }
+      throw error
+    }
   }