From cdcb5c2684e39433152aae50f6ebf55f192228cb Mon Sep 17 00:00:00 2001 From: Hein Date: Thu, 23 Oct 2025 15:58:04 +0200 Subject: [PATCH] docs(changeset): Fixed memo of options in GridlerAPIAdaptor --- .changeset/tall-melons-work.md | 5 + .../adaptors/GlidlerAPIAdaptorForGoLangv2.tsx | 216 ++++++++++-------- 2 files changed, 123 insertions(+), 98 deletions(-) create mode 100644 .changeset/tall-melons-work.md diff --git a/.changeset/tall-melons-work.md b/.changeset/tall-melons-work.md new file mode 100644 index 0000000..df8bbf3 --- /dev/null +++ b/.changeset/tall-melons-work.md @@ -0,0 +1,5 @@ +--- +'@warkypublic/oranguru': patch +--- + +Fixed memo of options in GridlerAPIAdaptor diff --git a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx index 065ff8b..027d3d9 100644 --- a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx +++ b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; import type { APIOptions } from '../../utils/types'; @@ -20,30 +20,117 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG s.mounted, ]); - const useAPIQuery: (index: number) => Promise = async (index: number) => { - const colSort = getState('colSort'); - const pageSize = getState('pageSize'); - const colFilters = getState('colFilters'); - const _active_requests = getState('_active_requests'); - setState('loadingData', true); - try { + const useAPIQuery: (index: number) => Promise = useCallback( + async (index: number) => { + const colSort = getState('colSort'); + const pageSize = getState('pageSize'); + const colFilters = getState('colFilters'); + const _active_requests = getState('_active_requests'); + setState('loadingData', true); + try { + //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props }); + if (props && props.url) { + const head = new Headers(); + head.set('x-limit', String(pageSize ?? 50)); + head.set('x-offset', String((pageSize ?? 50) * index)); + + head.set('Authorization', `Token ${props.authtoken}`); + + if (colSort?.length && colSort.length > 0) { + head.set( + 'x-sort', + colSort + ?.map((sort: any) => `${sort.id} ${sort.direction}`) + .reduce((acc: any, val: any) => `${acc},${val}`) + ); + } + + if (colFilters?.length && colFilters.length > 0) { + colFilters + ?.filter((f) => f.value?.length > 0) + ?.forEach((filter: any) => { + if (filter.value && filter.value !== '') { + head.set(`x-searchop-${filter.operator}-${filter.id}`, `${filter.value}`); + } + }); + } + + if (props.options && props.options.length > 0) { + const optionHeaders = GoAPIHeaders(props.options); + for (const oh in optionHeaders) { + head.set(oh, optionHeaders[oh]); + } + } + + const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1; + _active_requests?.forEach((r) => { + if ((r.page >= 0 && r.page < index - 2) || (index >= 0 && r.page > index + 2)) { + r.controller?.abort?.(); + } + }); + if ( + _active_requests && + currentRequestIndex >= 0 && + _active_requests[currentRequestIndex] + ) { + //console.log(`Already queued ${index}`, index, s._active_requests); + setState('loadingData', false); + return undefined; + } + + const controller = new AbortController(); + await setStateFN('_active_requests', (cv) => [ + ...(cv ?? []), + { controller, page: index }, + ]); + + const res = await fetch( + `${props.url}?x-limit=${String(pageSize ?? 50)}&x-offset=${String((pageSize ?? 50) * index)}`, + { + headers: head, + method: 'GET', + signal: controller?.signal, + } + ); + + if (res.ok) { + const cr = res.headers.get('Content-Range')?.split('/'); + if (cr?.[1] && parseInt(cr[1], 10) > 0) { + setState('total_rows', parseInt(cr[1], 10)); + } + + const data = await res.json(); + setState('loadingData', false); + return data ?? []; + } + addError(`${res.status} ${res.statusText}`, 'api', props.url); + + await setStateFN('_active_requests', (cv) => [ + ...(cv ?? []).filter((f) => f.page !== index), + ]); + } + } catch (e) { + //console.log('APIAdaptorGoLangv2 error', e); + addError(`Error: ${e}`, 'api', props.url); + } + setState('loadingData', false); + return []; + }, + [getState, props.authtoken, props.url, props.options, setState, setStateFN, addError] + ); + + const askAPIRowNumber: (key: string) => Promise = useCallback( + async (key: string) => { + const colFilters = getState('colFilters'); + //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props }); if (props && props.url) { const head = new Headers(); - head.set('x-limit', String(pageSize ?? 50)); - head.set('x-offset', String((pageSize ?? 50) * index)); + head.set('x-limit', '10'); + head.set('x-fetch-rownumber', String(key)); head.set('Authorization', `Token ${props.authtoken}`); - if (colSort?.length && colSort.length > 0) { - head.set( - 'x-sort', - colSort - ?.map((sort: any) => `${sort.id} ${sort.direction}`) - .reduce((acc: any, val: any) => `${acc},${val}`) - ); - } - if (colFilters?.length && colFilters.length > 0) { colFilters ?.filter((f) => f.value?.length > 0) @@ -61,97 +148,30 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG } } - const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1; - _active_requests?.forEach((r) => { - if ((r.page >= 0 && r.page < index - 2) || (index >= 0 && r.page > index + 2)) { - r.controller?.abort?.(); - } - }); - if (_active_requests && currentRequestIndex >= 0 && _active_requests[currentRequestIndex]) { - //console.log(`Already queued ${index}`, index, s._active_requests); - setState('loadingData', false); - return undefined; - } - const controller = new AbortController(); - await setStateFN('_active_requests', (cv) => [...(cv ?? []), { controller, page: index }]); - const res = await fetch( - `${props.url}?x-limit=${String(pageSize ?? 50)}&x-offset=${String((pageSize ?? 50) * index)}`, - { - headers: head, - method: 'GET', - signal: controller?.signal, - } - ); + const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, { + headers: head, + method: 'GET', + signal: controller?.signal, + }); if (res.ok) { - const cr = res.headers.get('Content-Range')?.split('/'); - if (cr?.[1] && parseInt(cr[1], 10) > 0) { - setState('total_rows', parseInt(cr[1], 10)); - } - const data = await res.json(); - setState('loadingData', false); - return data ?? []; + + return data?.[0]?._rownumber ?? data?._rownumber ?? 0; } addError(`${res.status} ${res.statusText}`, 'api', props.url); - - await setStateFN('_active_requests', (cv) => [ - ...(cv ?? []).filter((f) => f.page !== index), - ]); } - } catch (e) { - //console.log('APIAdaptorGoLangv2 error', e); - addError(`Error: ${e}`, 'api', props.url); - } - setState('loadingData', false); - return []; - }; - - const askAPIRowNumber: (key: string) => Promise = async (key: string) => { - const colFilters = getState('colFilters'); - - //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props }); - if (props && props.url) { - const head = new Headers(); - head.set('x-limit', '10'); - head.set('x-fetch-rownumber', String(key)); - - head.set('Authorization', `Token ${props.authtoken}`); - - if (colFilters?.length && colFilters.length > 0) { - colFilters - ?.filter((f) => f.value?.length > 0) - ?.forEach((filter: any) => { - if (filter.value && filter.value !== '') { - head.set(`x-searchop-${filter.operator}-${filter.id}`, `${filter.value}`); - } - }); - } - - const controller = new AbortController(); - - const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, { - headers: head, - method: 'GET', - signal: controller?.signal, - }); - - if (res.ok) { - const data = await res.json(); - - return data?.[0]?._rownumber ?? data?._rownumber ?? 0; - } - addError(`${res.status} ${res.statusText}`, 'api', props.url); - } - return []; - }; + return []; + }, + [props.url, props.authtoken, props.options, getState, addError] + ); useEffect(() => { setState('useAPIQuery', useAPIQuery); setState('askAPIRowNumber', askAPIRowNumber); - }, [props.url, props.authtoken, mounted, setState]); + }, [props.url, props.authtoken, props.options, mounted, setState]); return <>; }