docs(changeset): Fixed memo of options in GridlerAPIAdaptor

.changeset/tall-melons-work.md

@@ -0,0 +1,5 @@
+---
+'@warkypublic/oranguru': patch
+---
+
+Fixed memo of options in GridlerAPIAdaptor

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<T = unknown>(props: GlidlerAPIAdaptorForG
     s.mounted,
   ]);
 
-  const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
+  const useAPIQuery: (index: number) => Promise<any> = useCallback(
-    const colSort = getState('colSort');
+    async (index: number) => {
-    const pageSize = getState('pageSize');
+      const colSort = getState('colSort');
-    const colFilters = getState('colFilters');
+      const pageSize = getState('pageSize');
-    const _active_requests = getState('_active_requests');
+      const colFilters = getState('colFilters');
-    setState('loadingData', true);
+      const _active_requests = getState('_active_requests');
-    try {
+      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<number> = 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-limit', '10');
-        head.set('x-offset', String((pageSize ?? 50) * index));
+        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<T = unknown>(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(
+        const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, {
-          `${props.url}?x-limit=${String(pageSize ?? 50)}&x-offset=${String((pageSize ?? 50) * index)}`,
+          headers: head,
-          {
+          method: 'GET',
-            headers: head,
+          signal: controller?.signal,
-            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) {
+      return [];
-      //console.log('APIAdaptorGoLangv2 error', e);
+    },
-      addError(`Error: ${e}`, 'api', props.url);
+    [props.url, props.authtoken, props.options, getState, addError]
-    }
+  );
-    setState('loadingData', false);
-    return [];
-  };
-
-  const askAPIRowNumber: (key: string) => Promise<number> = 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 [];
-  };
 
   useEffect(() => {
     setState('useAPIQuery', useAPIQuery);
     setState('askAPIRowNumber', askAPIRowNumber);
-  }, [props.url, props.authtoken, mounted, setState]);
+  }, [props.url, props.authtoken, props.options, mounted, setState]);
 
   return <></>;
 }