Feat new composable

src/composables/onResize.ts

@@ -0,0 +1,70 @@
+type Options = {
+  immediate?: boolean
+}
+
+/**
+ * run callback on resize windows
+ *
+ * @function
+ * @name onResize
+ * @kind variable
+ * @param {() => void} callback
+ * @param {Options} options?
+ * @returns {void}
+ * @exports
+ */
+export const onResize = (callback: () => void, options: Options = {}) => {
+  onMounted(() => {
+    if (import.meta.client) {
+      window.addEventListener('resize', callback)
+      if (options.immediate) {
+        callback()
+      }
+    }
+  })
+
+  onUnmounted(() => {
+    if (import.meta.client) {
+      window.removeEventListener('resize', callback)
+    }
+  })
+}
+
+/**
+ * run callback when mediaQuery change states
+ *
+ * @function
+ * @name onMediaChange
+ * @kind variable
+ * @param {string} media
+ * @param {(matche: boolean) => void} callback
+ * @param {Options} options?
+ * @returns {void}
+ * @exports
+ */
+export const onMediaChange = (
+  media: string,
+  callback: (matche: boolean) => void,
+  options: Options = {}
+) => {
+  const eventer = window?.matchMedia(media)
+
+  const proxyCallback = () => {
+    callback(!!eventer.matches)
+  }
+
+  onMounted(() => {
+    if (import.meta.client) {
+      eventer.addEventListener('change', proxyCallback)
+      if (options.immediate) {
+        proxyCallback()
+      }
+    }
+  })
+
+  onUnmounted(() => {
+    if (import.meta.client) {
+      eventer.removeEventListener('change', proxyCallback)
+    }
+  })
+}

src/composables/useAPI.ts

@@ -9,9 +9,12 @@ export const defaultOptions = () => {
   const localStorage = _localStorage
   const runtimeConfig = useRuntimeConfig()
   const usersStore = useUsers()
+  const headers = useRequestHeaders(['cookie'])
+
   return {
     baseURL: runtimeConfig.public.appApiUrl + runtimeConfig.public.appApiDefaultVersion + '/',
     method: 'GET',
+    headers,
     onRequest({ options }) {
       if (import.meta.client) {
         const accessToken = usersStore.accessToken // localStorage?.getItem('ACCESS_TOKEN')

src/composables/useAPI2.ts

@@ -1,11 +1,19 @@
 import { merge } from 'es-toolkit'
 import { defaultOptions } from '@/composables/useAPI'
+import useLoadingFromStatus from '@/composables/useLoadingFromStatus'
 
 type Params = Parameters<typeof useFetch>
 
 const useAPI2 = <DataT>(url: Params[0], options: Params[1] = {}) => {
   const _options = merge(defaultOptions(), options)
-  return useFetch<DataT>(url, _options as any)
+  const { status, ...rest } = useFetch<DataT>(url, _options as any)
+  const loading = useLoadingFromStatus(status)
+
+  return {
+    ...rest,
+    status,
+    loading,
+  }
 }
 
 export default useAPI2

src/composables/useAsyncAPI.ts

@@ -0,0 +1,126 @@
+import useLoadingFromStatus from '@/composables/useLoadingFromStatus'
+import { isNil } from 'es-toolkit'
+
+type AsyncHandler = {
+  ctx?: Parameters<Parameters<typeof useAsyncData>['1']>[0]
+  config: {
+    query?: any
+  }
+}
+
+export type AsyncConfig<ResDataT, DataT, Result> = Parameters<
+  typeof useAsyncData<ResDataT, unknown, DataT>
+>['2'] & {
+  translate?: (data: DataT) => Result
+  query?: object
+  checkArgs?: boolean
+}
+
+export type AsyncParameters<ResDataT, DataT, Result> = [
+  Parameters<typeof useAsyncData<ResDataT, unknown, DataT>>['0'],
+  (obj: AsyncHandler) => ReturnType<Parameters<typeof useAsyncData<ResDataT, unknown, DataT>>['1']>,
+  AsyncConfig<ResDataT, DataT, Result>?,
+]
+
+type AsyncReturn<ResDataT, DataT, Result> = Omit<
+  ReturnType<typeof useAsyncData<ResDataT, unknown, DataT>>,
+  'data'
+> & {
+  data: Result extends undefined
+    ? ReturnType<typeof useAsyncData<ResDataT, unknown, DataT>>['data']
+    : Result
+  isLoading: ComputedRef<boolean>
+}
+
+/**
+ * wrapper around useAsyncData (for watch local change TODO !)
+ *
+ * @constant
+ * @name useAsyncAPI
+ * @kind variable
+ * @exports
+ */
+export default function useAsyncAPI<ResDataT, DataT = ResDataT, Result = undefined>(
+  ...params: AsyncParameters<ResDataT, DataT, Result>
+): AsyncReturn<ResDataT, DataT, Result> {
+  /*
+  TODO: this code refresh request when local change (no more send)
+        multiple value for same keys like "title_en", "title_es", "title_fr" ..ect
+  const { locale } = useNuxtI18n()
+  params[2].watch = [...(params[2].watch || []), locale]
+  */
+  params[2] ??= {}
+  params[2].watch ??= []
+  if (
+    params[2].query &&
+    (isRef(params[2].query) || isReactive(params[2].query)) &&
+    !params[2].watch.includes(params[2].query)
+  ) {
+    params[2].watch.push(params[2].query)
+  }
+
+  let immediate = true
+  if (params[2].immediate === false) {
+    immediate = true
+  } else {
+    params[2].immediate = false
+  }
+
+  const checkArgs = computed(() => {
+    return params[2].watch.map((v) => unref(v)).filter((v) => isNil(v)).length === 0
+  })
+
+  const { status, data, ...res } = useAsyncData<ResDataT, unknown, DataT>(
+    params[0],
+    ({}) => {
+      if (!checkArgs.value) {
+        return null
+      }
+      const conf = {} as AsyncHandler['config']
+      if (params[2].query) {
+        conf.query = unref(params[2].query)
+      } else {
+        conf.query ??= {}
+      }
+      return params[1]({ config: conf })
+    },
+    {
+      ...params[2],
+    }
+  )
+  const isLoading = useLoadingFromStatus(status)
+
+  // @ts-expect-error 2345 todo check why
+  const dataWrapped = params[2]?.translate ? params[2]?.translate(data) : data
+
+  const results = {
+    ...res,
+    status,
+    isLoading,
+    data: dataWrapped,
+  }
+
+  if (immediate) {
+    watch(
+      checkArgs,
+      (newValue) => {
+        if (newValue) {
+          results.refresh()
+        }
+      },
+      { immediate: true }
+    )
+  }
+
+  // log error only in dev
+  if (import.meta.dev) {
+    watchEffect(() => {
+      if (results.error.value) {
+        console.error(params[0], results.error.value)
+      }
+    })
+  }
+
+  // @ts-expect-error 2322 todo check why
+  return results
+}

src/composables/useAsyncPaginationAPI.ts

@@ -0,0 +1,103 @@
+import {
+  Pagination,
+  PaginationQuery,
+  PaginationResult,
+  paginationConfig,
+  usePagination,
+} from '@/composables/usePagination'
+import { omit } from 'es-toolkit'
+
+import type { AsyncConfig } from './useAsyncAPI'
+import useAsyncAPI from './useAsyncAPI'
+
+type AsyncPaginationHandler = {
+  ctx?: Parameters<Parameters<typeof useAsyncAPI>['1']>[0]
+  config: {
+    query: PaginationQuery & {
+      [key: string]: any
+    }
+  }
+}
+
+type AsyncPaginationConfig<ResDataT, DataT extends PaginationResult, Result> = Omit<
+  AsyncConfig<ResDataT, DataT, Result>,
+  'transform'
+> & {
+  // default configuration of paginations
+  paginationConfig?: paginationConfig
+  // method to transform data
+  transform?: (data: DataT) => DataT
+  translate?: (data: DataT['results']) => Result
+}
+
+type AsyncPaginationParameters<ResDataT, DataT extends PaginationResult, Result> = [
+  Parameters<typeof useAsyncAPI<ResDataT, DataT, Result>>['0'],
+  (
+    obj: AsyncPaginationHandler
+  ) => ReturnType<Parameters<typeof useAsyncAPI<ResDataT, DataT, Result>>['1']>,
+  AsyncPaginationConfig<ResDataT, DataT, Result>?,
+]
+
+type AsyncPaginationcReturn<ResDataT, DataT extends PaginationResult, Result> = Omit<
+  ReturnType<typeof useAsyncAPI<ResDataT, DataT, Result>>,
+  'data'
+> & {
+  pagination: Pagination
+  data: Result extends undefined ? ComputedRef<DataT['results']> : Result
+}
+
+/**
+ * you can change/set page automaticlym and the request auto refresh it
+ * a wrapped composable under useAsyncData and usePagination
+ *
+ * @constant
+ * @kind variable
+ * @exports
+ */
+export default function useAsyncPaginationAPI<DataT, Result = undefined>(
+  ...params: AsyncPaginationParameters<PaginationResult<DataT>, PaginationResult<DataT>, Result>
+): AsyncPaginationcReturn<PaginationResult<DataT>, PaginationResult<DataT>, Result> {
+  const paginationData = ref<PaginationResult>()
+  const pagination = usePagination(paginationData, params[2]?.paginationConfig)
+
+  // add paginations in query
+  const key = computed(
+    () => `${unref(params[0])}::${pagination.current.value}::${pagination.limit.value}`
+  )
+
+  const rest = useAsyncAPI(
+    key,
+    ({ config }) => {
+      return params[1]({
+        config: {
+          query: {
+            ...config.query,
+            ...pagination.query(),
+          },
+        },
+      })
+    },
+    {
+      ...((omit(params[2] ?? {}, ['transform', 'translate']) ?? {}) as Omit<
+        AsyncConfig<PaginationResult<DataT>, PaginationResult<DataT>, Result>,
+        'translate'
+      >),
+      watch: [...(params[2]?.watch || []), pagination.current, pagination.limit],
+      deep: false,
+    }
+  )
+
+  const data = rest.data
+  watch(data, () => (paginationData.value = rest.data.value))
+
+  const results = computed(() => data.value?.results)
+  // @ts-expect-error betwwen translate and raw
+  const subData = params[2]?.translate ? params[2]?.translate(results) : results
+
+  return {
+    ...rest,
+    // @ts-expect-error betwwen translate and raw
+    data: subData,
+    pagination,
+  }
+}