npm-pkg-hook 1.3.9 → 1.4.0

package/src/hooks/useTagProducts/useGetAllTags.ts

@@ -0,0 +1,68 @@
+import { useQuery, gql } from '@apollo/client'
+
+/**
+ * GraphQL query to fetch all tags
+ */
+export const GET_ALL_TAGS = gql`
+query getAllTags {
+  getAllTags {
+    success
+    message
+    pagination {
+      totalRecords
+      totalPages
+      currentPage
+    }
+    data {
+      tgId
+      idUser
+      idStore
+      pId
+      nameTag
+      aName
+    }
+    errors {
+      path
+      message
+      type
+      context {
+        limit
+        value
+        label
+        key
+      }
+    }
+  }
+}
+`
+
+/**
+ * Custom hook to fetch all tags
+ *
+ * @returns {{
+ *  tags: any[],
+ *  loading: boolean,
+ *  error: Error | null,
+ *  message: string,
+ *  success: boolean,
+ *  pagination: { totalRecords: number, totalPages: number, currentPage: number } | null,
+ *  errors: any[] | null
+ * }}
+ */
+export const useGetAllTags = () => {
+  const { data, loading, error } = useQuery(GET_ALL_TAGS, {
+    fetchPolicy: 'network-only'
+  })
+
+  const result = data?.getAllTags ?? {}
+
+  return {
+    tags: result?.data || [],
+    loading,
+    error,
+    message: result?.message ?? '',
+    success: result?.success ?? false,
+    pagination: result?.pagination ?? null,
+    errors: result?.errors ?? null
+  }
+}

package/src/hooks/useTagProducts/useRegisterMultipleTags.ts

@@ -0,0 +1,157 @@
+import { useMutation, gql, useApolloClient } from '@apollo/client'
+
+import { GET_ALL_TAGS } from './useGetAllTags'
+
+/**
+ * GraphQL mutation to register multiple tags.
+ */
+const REGISTER_MULTIPLE_TAGS = gql`
+  mutation registerMultipleTags($input: [String!]!) {
+    registerMultipleTags(input: $input) {
+      success
+      message
+      errors {
+        path
+        message
+      }
+      data {
+        tgId
+        nameTag
+        idStore
+        idUser
+      }
+    }
+  }
+`
+
+/**
+ * Response structure for tag registration errors.
+ */
+interface ITagError {
+  path: string
+  message: string
+}
+
+/**
+ * Structure for a registered tag.
+ */
+interface ITag {
+  tgId: string
+  nameTag: string
+  idStore: string
+  idUser: string
+}
+
+/**
+ * General GraphQL response for registering tags.
+ */
+interface IResponseTag {
+  success: boolean
+  message: string
+  errors: ITagError[]
+  data: ITag[]
+}
+
+/**
+ * Options for the useRegisterMultipleTags hook.
+ */
+interface UseRegisterMultipleTagsOptions {
+  callback?: (response: IResponseTag) => void
+}
+
+/**
+ * Return type for the useRegisterMultipleTags hook.
+ */
+type UseRegisterMultipleTagsReturn = [
+  (tags: string[]) => Promise<IResponseTag>,
+  {
+    loading: boolean
+    error: any
+    data: IResponseTag | null
+  }
+]
+
+/**
+ * Hook to register multiple tags via GraphQL mutation.
+ *
+ * @param {UseRegisterMultipleTagsOptions} [options] - Optional callback for post-mutation handling.
+ * @returns {UseRegisterMultipleTagsReturn} - Mutation handler and state.
+ */
+export const useRegisterMultipleTags = (
+  { callback = () => { } }: UseRegisterMultipleTagsOptions = {}
+): UseRegisterMultipleTagsReturn => {
+  const client = useApolloClient()
+  const [registerMultipleTags, { loading, error, data }] = useMutation<
+    { registerMultipleTags: IResponseTag },
+    { input: string[] }
+  >(REGISTER_MULTIPLE_TAGS, {
+    onCompleted: (data) => {
+      if (typeof callback === 'function') {
+        callback(data.registerMultipleTags)
+      }
+    }
+  })
+
+  /**
+   * Register multiple tags with the provided names.
+   *
+   * @param {string[]} tags - Array of tag names.
+   * @returns {Promise<IResponseTag>} - Mutation response.
+   */
+  const handleRegisterTags = async (tags: string[]): Promise<IResponseTag> => {
+    if (!Array.isArray(tags) || tags.length === 0 || tags.some(tag => {return typeof tag !== 'string'})) {
+      throw new Error('Tag list must be a non-empty array of strings.')
+    }
+
+    const response = await registerMultipleTags({
+      variables: {
+        input: tags
+      },
+      update: (cache, { data }) => {
+        if (!data?.registerMultipleTags?.data?.length) return
+
+        const newTags = data.registerMultipleTags.data
+
+        try {
+          const existing = client.readQuery({ query: GET_ALL_TAGS })
+
+          const updatedTags = [
+            ...newTags,
+            ...(existing?.getAllTags?.data || [])
+          ]
+
+          cache.writeQuery({
+            query: GET_ALL_TAGS,
+            data: {
+              getAllTags: {
+                ...existing.getAllTags,
+                data: updatedTags,
+                pagination: {
+                  ...existing.getAllTags.pagination,
+                  totalRecords: updatedTags.length
+                }
+              }
+            }
+          })
+        } catch (error) {
+          console.warn('Failed to update cache for GET_ALL_TAGS:', error)
+        }
+      }
+    })
+    return response.data?.registerMultipleTags ?? {
+      success: false,
+      message: 'No response from server',
+      errors: [],
+      data: []
+    }
+  }
+
+  return [
+    handleRegisterTags,
+    {
+      loading,
+      error,
+      data: data?.registerMultipleTags ?? null
+    }
+  ]
+}

package/src/hooks/useTheme/index.ts

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+
+import { Cookies } from '../../cookies'
+
+enum Theme {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+/**
+ * Handles light/dark theme switching using data-theme attribute.
+ * Cookie is used only for persistence, not as source of truth.
+ */
+export const useTheme = () => {
+
+  // STATES
+  const [theme, setTheme] = useState<Theme>(Theme.LIGHT)
+  /**
+   * Applies theme to DOM and persists it.
+   * @param theme
+   */
+  const applyTheme = (theme: Theme): void => {
+    document.documentElement.setAttribute('data-theme', theme)
+    Cookies.set('theme', theme, { expires: 365 })
+    setTheme(theme)
+  }
+
+  /**
+   * Toggles between light and dark themes.
+   */
+  const toggleTheme = (): void => {
+    if (typeof document === 'undefined') return
+
+    const current =
+      (document.documentElement.getAttribute('data-theme') as Theme) ??
+      Theme.LIGHT
+
+    applyTheme(current === Theme.DARK ? Theme.LIGHT : Theme.DARK)
+    setTheme(current === Theme.DARK ? Theme.LIGHT : Theme.DARK)
+  }
+
+  /**
+   * Initializes theme from cookie or system preference.
+   */
+  const initTheme = (): void => {
+    if (typeof document === 'undefined') return
+
+    const cookieTheme = Cookies.get('theme') as Theme | undefined
+
+    const systemTheme =
+      window.matchMedia?.('(prefers-color-scheme: dark)').matches
+        ? Theme.DARK
+        : Theme.LIGHT
+
+    applyTheme(cookieTheme ?? systemTheme)
+    setTheme(cookieTheme ?? systemTheme)
+  }
+
+  return {
+    setTheme: applyTheme,
+    toggleTheme,
+    initTheme,
+    theme
+  }
+}

package/src/hooks/useTimeAgo/{useTimeAgo.js → useTimeAgo.ts}

@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react'
 
-const DATE_UNITS = [
+const DATE_UNITS: [unit: Intl.RelativeTimeFormatUnit, secondsInUnit: number][] = [
   ['day', 86400],
   ['hour', 3600],
   ['minute', 60],
   ['second', 1]
 ]
 
-const getDateDiffs = (timestamp) => {
+type DateDiff = { value: number; unit: Intl.RelativeTimeFormatUnit }
+
+const getDateDiffs = (timestamp: number): DateDiff | undefined => {
   const now = Date.now()
   const elapsed = (timestamp - now) / 1000
 
@@ -19,8 +21,8 @@ const getDateDiffs = (timestamp) => {
   }
 }
 
-export const useTimeAgo = (timestamp) => {
-  const [timeAgo, setTimeAgo] = useState(() => { return getDateDiffs(timestamp) })
+export const useTimeAgo = (timestamp: number) => {
+  const [timeAgo, setTimeAgo] = useState<DateDiff | undefined>(() => getDateDiffs(timestamp))
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -33,7 +35,5 @@ export const useTimeAgo = (timestamp) => {
 
   const rtf = new Intl.RelativeTimeFormat('es', { style: 'short' })
 
-  const { value, unit } = timeAgo
-
-  return rtf && rtf?.format(value, unit)
+  return rtf?.format(timeAgo?.value ?? 0, (timeAgo?.unit ?? 'second'))
 }

package/src/hooks/useTokenCards/index.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+export const useTokenCards = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [responseData, setResponseData] = useState(null)
+
+  const handleTokenCardsSubmit = async (postData: any) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const headers = {
+        'Content-Type': 'application/json'
+      }
+      const url = 'http://localhost:3000/api/v1/wompi/transaction/tokens/cards'
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(postData)
+      })
+
+      const responseData = await response.json()
+
+      if (!response.ok) {
+        throw new Error(responseData.message || 'Something went wrong')
+      }
+      setResponseData(responseData)
+      return responseData
+    } catch (error) {
+      if (error instanceof Error) {
+        setError(String(error.message))
+      } else {
+        setError(String(error))
+      }
+      return {
+
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return { loading, error, responseData, handleTokenCardsSubmit }
+}

package/src/hooks/useTopProductsMovements/index.ts

@@ -0,0 +1,27 @@
+import { useQuery, gql } from '@apollo/client'
+
+/**
+ * GraphQL query to fetch top-selling products movements
+ */
+const GET_TOP_PRODUCTS_MOVEMENTS = gql`
+  query {
+    getTopProductsMovements {
+      productName
+      idProduct
+      totalMovements
+    }
+  }
+`
+
+/**
+ * Custom hook to fetch and return the top-selling products movements
+ * @returns {Object} - { data, loading, error }
+ */
+export const useTopProductsMovements = () => {
+  const { data, loading, error } = useQuery(GET_TOP_PRODUCTS_MOVEMENTS)
+
+  return [data?.getTopProductsMovements, {
+    loading,
+    error
+  }]
+}

package/src/hooks/useTotalAllSales/index.ts

@@ -0,0 +1,25 @@
+import { useQuery, gql } from '@apollo/client'
+
+const GET_TOTAL_SALES = gql`
+  query totalSales {
+    totalSales {
+      success
+      message
+      totalSales
+    }
+  }
+`
+
+/**
+ * Custom hook to fetch total sales from GraphQL API.
+ * @returns {Object} An object containing total sales, loading state, error, and refetch function.
+ */
+export const useTotalAllSales = () => {
+  const { data, loading, error, refetch } = useQuery(GET_TOTAL_SALES)
+
+  return [data?.totalSales?.totalSales, {
+    loading,
+    error,
+    refetch
+  }]
+}

package/src/hooks/useTotalProductsInStock/index.ts

@@ -0,0 +1,23 @@
+import { useQuery, gql } from '@apollo/client'
+
+/**
+ * GraphQL query to fetch total products in stock.
+ */
+const GET_TOTAL_PRODUCTS_IN_STOCK = gql`
+  query getTotalProductsInStock {
+    getTotalProductsInStock
+  }
+`
+
+/**
+ * Custom hook to fetch total products in stock.
+ * @returns {Object} - { totalProductsInStock, loading, error }
+ */
+export const useTotalProductsInStock = () => {
+  const { data, loading, error } = useQuery(GET_TOTAL_PRODUCTS_IN_STOCK)
+
+  return [data?.getTotalProductsInStock ?? 0, {
+    loading,
+    error
+  }]
+}

package/src/hooks/useTotalProductsSold/index.ts

@@ -0,0 +1,23 @@
+import { useQuery, gql } from '@apollo/client'
+
+/**
+ * GraphQL query to fetch total products sold.
+ */
+const GET_TOTAL_PRODUCTS_SOLD = gql`
+  query getTotalSalesSold {
+    getTotalSalesSold
+  }
+`
+
+/**
+ * Custom hook to fetch total products sold.
+ * @returns {Object} - { totalProductsSold, loading, error }
+ */
+export const useTotalProductsSold = () => {
+  const { data, loading, error } = useQuery(GET_TOTAL_PRODUCTS_SOLD)
+
+  return [data?.getTotalSalesSold || 0, {
+    loading,
+    error
+  }]
+}

package/src/hooks/useTotalProductsSolded/index.ts

@@ -0,0 +1,20 @@
+import { useQuery, gql } from '@apollo/client'
+
+const GET_TOTAL_PRODUCTS_SOLD = gql`
+  query {
+    getTotalProductsSold
+  }
+`
+
+/**
+ * Custom hook to fetch the total number of products sold.
+ * @returns {{ totalSold: number, loading: boolean, error: any }}
+ */
+export const useTotalProductsSolded = () => {
+  const { data, loading, error } = useQuery(GET_TOTAL_PRODUCTS_SOLD)
+
+  return [data?.getTotalProductsSold, {
+    loading,
+    error
+  }]
+}

package/src/hooks/useUpdateCart/{index.js → index.ts}

@@ -1,8 +1,9 @@
 import debounce from 'lodash'
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+
+import { Cookies } from '../../cookies'
 import { getCurrentDomain } from '../../utils'
 import { trigger } from '../useEvent'
-import { Cookies } from '../../cookies'
 
 // EXAMPLE
 // https://codesandbox.io/s/nextjs-cart-system-tfg1e?file=/pages/_app.js

package/src/hooks/useUpdateCartCookie/index.ts

@@ -0,0 +1,60 @@
+import { useEffect, useReducer } from 'react'
+
+import { Cookies } from '../../cookies'
+import { getCurrentDomain } from '../../utils'
+
+type Product = {
+  pId: string;
+  ProQuantity: number;
+  [key: string]: any;
+};
+
+type State = {
+  PRODUCT: Product[];
+  counter: number;
+};
+
+type Action =
+  | { type: 'REMOVE_PRODUCT_TO_CART'; payload: Product }
+  | { type: 'ADD_PRODUCT_TO_CART'; payload: Product }
+  | { type: 'UPDATE_PRODUCT_IN_CART'; payload: Product }
+  | { type: string; payload?: any };
+
+export const useUpdateCartCookie = () => {
+  const keyToSaveData = process.env.NEXT_LOCAL_SALES_STORE
+  const domain = getCurrentDomain()
+
+  const PRODUCT = (state: State, action: Action): State => {
+    switch (action.type) {
+      case 'REMOVE_PRODUCT_TO_CART':
+        return {
+          ...state,
+          PRODUCT: state?.PRODUCT?.filter((t: Product) => {
+            return t.pId !== action?.payload.pId
+          }),
+          counter: state.counter - action.payload.ProQuantity
+        }
+      case 'ADD_PRODUCT_TO_CART':
+        // Add code for 'ADD_PRODUCT_TO_CART' case
+        return state
+      case 'UPDATE_PRODUCT_IN_CART':
+        // Add code for 'UPDATE_PRODUCT_IN_CART' case
+        return state
+      default:
+        return state
+    }
+  }
+  const [data, dispatch] = useReducer(PRODUCT, { PRODUCT: [], counter: 0 })
+
+  const handleRemoveProductToCookieCart = (product: Product) => {
+    dispatch({ type: 'REMOVE_PRODUCT_TO_CART', payload: product })
+  }
+  useEffect(() => {
+    // @ts-ignore
+    Cookies.set(keyToSaveData, JSON.stringify(data), { domain, path: '/' })
+  }, [data, domain])
+
+  return {
+    handleRemoveProductToCookieCart
+  }
+}

package/src/hooks/useUpdateDashboardComponent/index.ts

@@ -0,0 +1,91 @@
+import { gql, useMutation } from '@apollo/client'
+
+/**
+ * GraphQL mutation for updating a dashboard component.
+ */
+const UPDATE_DASHBOARD_COMPONENT = gql`
+  mutation UpdateDashboardComponent($input: [DashboardComponentUpdateInput]) {
+    updateDashboardComponent(input: $input) {
+      success
+      message
+      data {
+        id
+        idStore
+        idUser
+        coordinates
+        createAt
+        updateAt
+        title
+      }
+      errors {
+      path
+      message
+      type
+      }
+    }
+  }
+`
+
+/**
+ * Types for the mutation response and input.
+ */
+interface DashboardComponent {
+  id: string;
+  idStore: string;
+  idUser: string;
+  coordinates: any;
+  createAt: string;
+  updateAt: string;
+  title: string;
+}
+
+interface ErrorResponse {
+  message: string;
+  field?: string;
+}
+
+interface UpdateDashboardComponentResponse {
+  updateDashboardComponent: {
+    success: boolean;
+    message?: string;
+    data?: DashboardComponent;
+    errors?: ErrorResponse[];
+  };
+}
+
+interface UpdateDashboardComponentInput {
+  id: string;
+  coordinates?: any;
+  title?: string;
+}
+
+/**
+ * Custom hook to update a dashboard component.
+ */
+export const useUpdateDashboardComponent = () => {
+  const [mutate, { loading, error, data }] = useMutation<
+    UpdateDashboardComponentResponse,
+    { input: UpdateDashboardComponentInput[] }
+  >(UPDATE_DASHBOARD_COMPONENT)
+
+  /**
+   * Calls the mutation with the provided input.
+   * @param input DashboardComponentUpdateInput
+   */
+  const updateComponent = async (input: UpdateDashboardComponentInput[]) => {
+    try {
+      const response = await mutate({ variables: { input } })
+      return response.data?.updateDashboardComponent
+    } catch (err) {
+      console.error('UpdateDashboardComponent Error:', err)
+      throw err
+    }
+  }
+
+  return {
+    updateComponent,
+    loading,
+    error,
+    data: data?.updateDashboardComponent
+  }
+}