wdevs/oranguru
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(Gridler): 🐛 improve state management and cleanup

Browse Source 
* Update `askAPIRowNumber` to return `null` or `number` for better type safety.
* Refactor conditionals to ensure proper handling of row indices.
* Clean up console logs for improved readability and performance.
* Ensure consistent formatting across the codebase.
This commit is contained in:
Hein
2026-02-09 14:41:49 +02:00
parent 31e46e6bd2
commit 6cb50978d0
5 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Gridler/GridlerDataGrid.tsx
View File

@@ -188,6 +188,7 @@ export const GridlerDataGrid = () => {
if (!refContextActivated.current) {
refContextActivated.current = true;
onContextClick('cell', event, cell[0], cell[1]);
setTimeout(() => {
refContextActivated.current = false;
}, 100);
@@ -231,7 +232,7 @@ export const GridlerDataGrid = () => {
rows = rows.hasIndex(r) ? rows : rows.add(r);
}
}
console.log('Debug:onGridSelectionChange', currentSelection, selection);
//console.log('Debug:onGridSelectionChange', currentSelection, selection);
if (
JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||

25
src/Gridler/components/Computer.tsx
View File

@@ -28,7 +28,7 @@ export const Computer = React.memo(() => {
selectFirstRowOnMount,
setState,
setStateFN,
values
values,
} = useGridlerStore((s) => ({
_glideref: s._glideref,
_gridSelectionRows: s._gridSelectionRows,
@@ -45,7 +45,7 @@ export const Computer = React.memo(() => {
scrollToRowKey: s.scrollToRowKey,
searchStr: s.searchStr,
selectedRowKey: s.selectedRowKey,
selectFirstRowOnMount:s.selectFirstRowOnMount,
selectFirstRowOnMount: s.selectFirstRowOnMount,
setState: s.setState,
setStateFN: s.setStateFN,
uniqueid: s.uniqueid,
@@ -100,9 +100,12 @@ export const Computer = React.memo(() => {
break;
}
}
if (!(rowIndex >= 0)) {
if (rowIndex >= 0) {
rowIndexes.push(rowIndex);
} else {
const idx = await getRowIndexByKey(key);
if (idx) {
if (idx !== null) {
rowIndexes.push(idx);
}
}
@@ -115,7 +118,9 @@ export const Computer = React.memo(() => {
searchSelection().then((rowIndexes) => {
let rows = CompactSelection.empty();
rowIndexes.forEach((r) => {
rows = rows.add(r);
if (r !== undefined) {
rows = rows.add(r);
}
});
setStateFN('_gridSelectionRows', () => {
@@ -276,14 +281,12 @@ export const Computer = React.memo(() => {
const ready = getState('ready');
if (ready && selectFirstRowOnMount) {
const scrollToRowKey = getState('scrollToRowKey');
if (scrollToRowKey && scrollToRowKey >= 0) {
return;
}
const keyField = getState('keyField') ?? 'id';
const page_data = getState('_page_data');
@@ -299,7 +302,6 @@ export const Computer = React.memo(() => {
) {
const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
const onChange = getState('onChange');
//console.log('Selecting first row:', firstRow, firstBuffer, values);
if (onChange) {
@@ -348,9 +350,10 @@ export const Computer = React.memo(() => {
const key = selectedRowKey ?? scrollToRowKey;
if (key && ref && ready) {
//console.log('Computer:Scrolling to key:', key);
getRowIndexByKey?.(key).then((r) => {
if (r !== undefined) {
//console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey);
console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey);
if (selectedRowKey) {
const onChange = getState('onChange');

25
src/Gridler/components/GridlerStore.tsx
View File

@@ -140,7 +140,7 @@ export interface GridlerState {
_visibleArea: Rectangle;
_visiblePages: Rectangle;
addError: (err: string, ...args: Array<any>) => void;
askAPIRowNumber?: (key: string) => Promise<number>;
askAPIRowNumber?: (key: string) => Promise<null | number>;
colFilters?: Array<FilterOption>;
colOrder?: Record<string, number>;
colSize?: Record<string, number>;
@@ -162,7 +162,7 @@ export interface GridlerState {
hasLocalData: boolean;
isEmpty: boolean;
isValuesInPages: () => boolean
isValuesInPages: () => boolean;
loadingData?: boolean;
loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
mounted: boolean;
@@ -191,7 +191,6 @@ export interface GridlerState {
freezeRegions?: readonly Rectangle[];
selected?: Item;
}
) => void;
pageSize: number;
@@ -200,10 +199,7 @@ export interface GridlerState {
reload?: () => Promise<void>;
renderColumns?: GridlerColumns;
setState: <K extends keyof GridlerStoreState>(
key: K,
value: GridlerStoreState[K]
) => void;
setState: <K extends keyof GridlerStoreState>(key: K, value: GridlerStoreState[K]) => void;
setStateFN: <K extends keyof GridlerStoreState>(
key: K,
value: (current: GridlerStoreState[K]) => Partial<GridlerStoreState[K]>
@@ -357,7 +353,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
}
}
if (rowIndex > 0) {
console.log('Local row index', rowIndex, key);
//console.log('Local row index', rowIndex, key);
return rowIndex;
}
}
@@ -366,8 +362,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
return rowIndex;
} else if (typeof state.askAPIRowNumber === 'function') {
const rn = await state.askAPIRowNumber(String(key));
if (rn && rn >= 0) {
console.log('Remote row index', rowIndex, key);
return rn;
}
}
@@ -402,8 +398,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
}
}
}
return false
return false;
},
keyField: 'id',
loadPage: async (pPage: number, clearMode?: 'all' | 'page') => {
@@ -488,13 +484,16 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
const state = get();
const [col, row] = cell;
const rowBuffer = state.getRowBuffer(row);
if (state.glideProps?.onCellClicked) {
state.glideProps?.onCellClicked?.(cell, event);
}
if (state.values?.length) {
if (state.values?.length && state.values?.length > 0) {
if (state.onChange) {
state.onChange(state.values);
}
} else if (rowBuffer && state.onChange) {
state.onChange([rowBuffer]);
}
state._events.dispatchEvent(
@@ -949,7 +948,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
}
},
total_rows: 1000,
uniqueid: getUUID()
uniqueid: getUUID(),
}),
(props) => {
const [setState, getState] = props.useStore((s) => [s.setState, s.getState]);

22
src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx
View File

@@ -36,7 +36,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
const searchStr = getState('searchStr');
const searchFields = getState('searchFields');
const _active_requests = getState('_active_requests');
const keyField = getState('keyField');
const keyField = getState('keyField');
setState('loadingData', true);
try {
//console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
@@ -83,7 +83,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
)
?.forEach((filter: any) => {
ops.push({
name: `${filter.id ?? ""}`,
name: `${filter.id ?? ''}`,
op: 'contains',
type: 'searchor',
value: searchStr,
@@ -202,11 +202,13 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
]
);
const askAPIRowNumber: (key: string) => Promise<number> = useCallback(
const askAPIRowNumber: (key: string) => Promise<null | number> = useCallback(
async (key: string) => {
const colFilters = getState('colFilters');
//console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
if (!key) {
return null;
}
//console.log('APIAdaptorGoLangv2', { key, props });
if (props && props.url) {
const head = new Headers();
const ops: FetchAPIOperation[] = [
@@ -250,7 +252,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
const controller = new AbortController();
const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, {
const res = await fetch(`${props.url}?x-fetch-rownumber=${key}`, {
headers: head,
method: 'GET',
signal: controller?.signal,
@@ -273,12 +275,12 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
setState('useAPIQuery', useAPIQuery);
setState('askAPIRowNumber', askAPIRowNumber);
const isValuesInPages = getState('isValuesInPages');
const _refresh = getState('_refresh');
if (!isValuesInPages) {
setState('values', []);
setState('values', []);
}
//Reset the loaded pages to new rules
_refresh?.().then(() => {
const onChange = getState('onChange');
@@ -293,8 +295,6 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
return <></>;
}
//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
export const GlidlerAPIAdaptorForGoLangv2 = React.memo(_GlidlerAPIAdaptorForGoLangv2);

4
src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx
View File

@@ -61,7 +61,7 @@ export function GlidlerFormAdaptor(props: {
col?: GridlerColumn,
defaultItems?: MantineBetterMenuInstanceItem[]
): MantineBetterMenuInstanceItem[] => {
//console.log('GlidlerFormInterface getMenuItems', id);
//console.log('GlidlerFormInterface getMenuItems', id, row, defaultItems);
if (id === 'header-menu') {
return defaultItems || [];
@@ -88,7 +88,7 @@ export function GlidlerFormAdaptor(props: {
? props.descriptionField(row)
: undefined;
if (id === 'other') {
if (id === 'other' || (id === 'cell' && !row)) {
items.push({
c: 'blue',
label: 'Add',