drf-react-by-schema 0.2.2 → 0.3.0

package/dist/index.js

@@ -1,32 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPatternFormat = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = exports.getGenericModel = exports.getGenericModelList = exports.isLoggedIn = exports.setAuthToken = exports.loginByPayload = exports.createOrUpdateJSONSchema = exports.getJSONSchema = exports.getAutoComplete = exports.addExistingRelatedModel = exports.updateDataBySchema = exports.createOrUpdateData = exports.deleteData = exports.createData = exports.partialUpdateData = exports.updateData = exports.DataTotals = exports.GenericModelList = exports.DataGridBySchemaEditable = exports.DRFReactBySchemaContext = exports.DRFReactBySchemaProvider = void 0;
+exports.getPatternFormat = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = exports.getGenericModel = exports.getGenericModelList = exports.isLoggedIn = exports.setAuthToken = exports.loginByPayload = exports.createOrUpdateJSONSchema = exports.getJSONSchema = exports.getAutoComplete = exports.addExistingRelatedModel = exports.updateDataBySchema = exports.createOrUpdateData = exports.deleteData = exports.createData = exports.partialUpdateData = exports.updateData = exports.DialogActions = exports.DataTotals = exports.GenericRelatedModelList = exports.GenericModelList = exports.DataGridBySchemaEditable = exports.useTheme = exports.APIWrapperContext = exports.DRFReactBySchemaContext = exports.DRFReactBySchemaProvider = void 0;
+// Methods:
 const api_1 = require("./api");
 Object.defineProperty(exports, "updateData", { enumerable: true, get: function () { return api_1.updateData; } });
 Object.defineProperty(exports, "partialUpdateData", { enumerable: true, get: function () { return api_1.partialUpdateData; } });
@@ -52,13 +30,22 @@ Object.defineProperty(exports, "errorProps", { enumerable: true, get: function (
 Object.defineProperty(exports, "getTmpId", { enumerable: true, get: function () { return utils_1.getTmpId; } });
 Object.defineProperty(exports, "isTmpId", { enumerable: true, get: function () { return utils_1.isTmpId; } });
 Object.defineProperty(exports, "getPatternFormat", { enumerable: true, get: function () { return utils_1.getPatternFormat; } });
-// Components:
-const DRFReactBySchemaProvider_1 = __importStar(require("./context/DRFReactBySchemaProvider"));
+// Wrappers/Providers:
+const DRFReactBySchemaProvider_1 = __importDefault(require("./context/DRFReactBySchemaProvider"));
 exports.DRFReactBySchemaProvider = DRFReactBySchemaProvider_1.default;
-Object.defineProperty(exports, "DRFReactBySchemaContext", { enumerable: true, get: function () { return DRFReactBySchemaProvider_1.DRFReactBySchemaContext; } });
+const DRFReactBySchemaContext_1 = require("./context/DRFReactBySchemaContext");
+Object.defineProperty(exports, "DRFReactBySchemaContext", { enumerable: true, get: function () { return DRFReactBySchemaContext_1.DRFReactBySchemaContext; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return DRFReactBySchemaContext_1.useTheme; } });
+const APIWrapperContext_1 = require("./context/APIWrapperContext");
+Object.defineProperty(exports, "APIWrapperContext", { enumerable: true, get: function () { return APIWrapperContext_1.APIWrapperContext; } });
+// Components
 const DataGridBySchemaEditable_1 = __importDefault(require("./components/DataGridBySchemaEditable"));
 exports.DataGridBySchemaEditable = DataGridBySchemaEditable_1.default;
 const GenericModelList_1 = __importDefault(require("./components/GenericModelList"));
 exports.GenericModelList = GenericModelList_1.default;
+const GenericRelatedModelList_1 = __importDefault(require("./components/GenericRelatedModelList"));
+exports.GenericRelatedModelList = GenericRelatedModelList_1.default;
 const DataTotals_1 = __importDefault(require("./components/DataTotals"));
 exports.DataTotals = DataTotals_1.default;
+const DialogActions_1 = __importDefault(require("./components/DialogActions"));
+exports.DialogActions = DialogActions_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -60,6 +60,10 @@
     "@mui/material": "^5.11.0",
     "@mui/x-data-grid": "^5.17.14",
     "@mui/x-date-pickers": "^5.0.11",
+    "@rjsf/core": "^5.0.0-beta.15",
+    "@rjsf/mui": "^5.0.0-beta.15",
+    "@rjsf/utils": "^5.0.0-beta.15",
+    "@rjsf/validator-ajv8": "^5.0.0-beta.15",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.15",
     "@types/react-dom": "^18.0.9",

package/src/api.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
-import { ServerResponse } from 'http';
-import { string } from 'yup';
-import { serverEndPointType } from './context/DRFReactBySchemaProvider';
+import moment from 'moment';
+import { serverEndPointType } from './context/DRFReactBySchemaContext';
 import {
     isTmpId,
     emptyByType,
@@ -9,11 +8,10 @@ import {
     Field,
     Item,
     SchemaType,
-    GridEnrichedBySchemaColDef
+    DataSchemaColumnsType,
+    ItemSchemaColumnsType
 } from './utils';
 
-const moment = require('moment');
-
 type Id = string | number | null;
 
 /**
@@ -138,7 +136,6 @@ export const updateData = async ({ path, serverEndPoint, data, id }: TargetApiPa
     const url = `${serverEndPoint.api}/${path}/${id}/`;
     try {
         await axios.put(url, data);
-        return id;
     } catch (e) {
         if ((<any>e).isAxiosError) {
             const err = <AxiosError>e;
@@ -150,16 +147,17 @@ export const updateData = async ({ path, serverEndPoint, data, id }: TargetApiPa
                 }
                 try {
                     await axios.put(url, data);
-                    return true;
                 } catch (e) {
                     console.log(`Error updating data at ${url}`, data, e);
                     return false;
                 }
+                return id;
             }
             console.log(`Error updating data at ${url}`, data, err.response?.data);
             return ({ errors: err.response?.data } as unknown) as AxiosResponse;
         }
     }
+    return id;
 };
 
 export const partialUpdateData = async ({ path, serverEndPoint, data, id }: TargetApiParams) => {
@@ -170,7 +168,6 @@ export const partialUpdateData = async ({ path, serverEndPoint, data, id }: Targ
     try {
         await axios.patch(url, data);
         // DEBUG console.log({ path, data, id });
-        return id;
     } catch (e) {
         if ((<any>e).isAxiosError) {
             const err = <AxiosError>e;
@@ -178,20 +175,21 @@ export const partialUpdateData = async ({ path, serverEndPoint, data, id }: Targ
                 const isRefreshed = await refreshToken(serverEndPoint);
                 if (!isRefreshed) {
                     console.log('Token expirou! Deve-se fazer login de novo');
-                    return false;
+                    return ({ errors: err.response?.data } as unknown) as AxiosResponse;
                 }
                 try {
                     await axios.patch(url, data);
-                    return true;
                 } catch (e) {
                     console.log(`Error partial updating data at ${url}`, data, e);
-                    return false;
+                    return ({ errors: err.response?.data } as unknown) as AxiosResponse;
                 }
+                return id;
             }
             console.log(`Error partial updating data at ${url}`, data, err.response?.data);
             return ({ errors: err.response?.data } as unknown) as AxiosResponse;
         }
     }
+    return id;
 };
 
 export const createData = async ({ path, serverEndPoint, data }: Omit<TargetApiParams, 'id'>) => {
@@ -199,9 +197,9 @@ export const createData = async ({ path, serverEndPoint, data }: Omit<TargetApiP
         return ({ errors: 'Não há definição de API (serverEndPoint!' } as unknown) as AxiosResponse;
     }
     const url = `${serverEndPoint.api}/${path}/`;
+    let ret = <AxiosResponse>{};
     try {
-        const ret = await axios.post(url, data);
-        return ret;
+        ret = await axios.post(url, data);
     } catch (e) {
         if ((<any>e).isAxiosError) {
             const err = <AxiosError>e;
@@ -212,17 +210,18 @@ export const createData = async ({ path, serverEndPoint, data }: Omit<TargetApiP
                     return false;
                 }
                 try {
-                    const ret = await axios.post(url, data);
-                    return ret;
+                    ret = await axios.post(url, data);
                 } catch (e) {
                     console.log(`Error creating data at ${url}`, data, e);
                     return false;
                 }
+                return ret;
             }
             console.log(`Error creating data at ${url}`, data, err.response?.data);
             return ({ errors: err.response?.data } as unknown) as AxiosResponse;
         }
     }
+    return ret;
 };
 
 export const deleteData = async (path:string, serverEndPoint:serverEndPointType | null, id:Id) => {
@@ -233,7 +232,6 @@ export const deleteData = async (path:string, serverEndPoint:serverEndPointType
     const url = `${serverEndPoint.api}/${path}/${id}`;
     try {
         await axios.delete(url);
-        return true;
     } catch (e) {
         if ((<any>e).isAxiosError) {
             const err = <AxiosError>e;
@@ -245,16 +243,17 @@ export const deleteData = async (path:string, serverEndPoint:serverEndPointType
                 }
                 try {
                     await axios.delete(url);
-                    return true;
                 } catch (e) {
                     console.log(`Error deleting data from ${url}`, e);
                     return false;
                 }
+                return true;
             }
             console.log(`Error deleting data from ${url}`, e);
             return false;
         }
     }
+    return true;
 };
 
 export const createOrUpdateData = async ({ path, serverEndPoint, data, id }: TargetApiParamsOptionalId) => {
@@ -362,7 +361,7 @@ export const updateDataBySchema = async ({
     serverEndPoint:serverEndPointType | null,
     data:Item,
     schema:SchemaType,
-    path:string | null
+    path?:string | null
 }) => {
     // console.log({
     //     model,
@@ -616,11 +615,6 @@ export interface getGenericModelListProps {
     loadedSchema?:SchemaType | boolean;
 };
 
-export interface DataSchemaColumnsType {
-    data: Item[];
-    schema?: SchemaType;
-    columns?: GridEnrichedBySchemaColDef[];
-}
 export const getGenericModelList = async ({
     model,
     serverEndPoint,
@@ -696,10 +690,10 @@ export const getGenericModelList = async ({
     }
     if (loadedSchema) {
         // DEBUG console.log({ path, data });
-        return { data } as DataSchemaColumnsType;
+        return <DataSchemaColumnsType>{ data };
     }
     // DEBUG  console.log({ path, data, columns, schema });
-    return { data, columns, schema } as DataSchemaColumnsType;
+    return <DataSchemaColumnsType>{ data, columns, schema };
 };
 
 export const getGenericModel = async ({
@@ -729,5 +723,5 @@ export const getGenericModel = async ({
         ? {}
         : await getData(path, serverEndPoint);
     // console.log({ schema, data }); // DEBUG
-    return { schema, data };
+    return <ItemSchemaColumnsType>{ schema, data };
 };

package/src/components/DataGridBySchemaEditable/SelectEditInputCell.tsx

@@ -6,20 +6,21 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 
 import { getTmpId } from '../../utils';
 import { GridEnrichedBySchemaColDef, Item } from '../../utils';
+import { OptionsACType } from '../../context/APIWrapperContext';
 
 const filter = createFilterOptions();
 
-type SelectEditInputCellProps = {
-    field: string,
-    id: number | string,
-    value?: any,
-    column: GridEnrichedBySchemaColDef,
-    type: string,
-    optionsAC: { current: Record<string, Item[]> | null },
-    isIndexField: boolean,
-    multiple?: boolean,
-    sx?: SxProps
-};
+interface SelectEditInputCellProps {
+    field: string;
+    id: number | string;
+    value?: any;
+    column: GridEnrichedBySchemaColDef;
+    type: string;
+    optionsAC: React.MutableRefObject<OptionsACType | null>;
+    isIndexField: boolean;
+    multiple?: boolean;
+    sx?: SxProps;
+}
 
 /**
  *

package/src/components/DataGridBySchemaEditable.md

@@ -1,6 +1,5 @@
-DataGridBySchemaEditable example:
-
 ```js
+/*
 import DRFReactBySchemaProvider from '../context/DRFReactBySchemaProvider';
 const data = {
     data: [],
@@ -47,4 +46,5 @@ const Link = null;
         LinkComponent={Link}
     />
 </DRFReactBySchemaProvider>
+*/
 ```

package/src/components/DataGridBySchemaEditable.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState, useRef, forwardRef } from 'react';
-// import moment from 'moment';
-// import Mask from 'string-mask';
+import moment from 'moment';
 import {
     DataGrid,
     GridEditInputCell,
     GridRowModes,
     GridActionsCellItem,
-    gridVisibleSortedRowIdsSelector,
-    gridStringOrNumberComparator
+    gridStringOrNumberComparator,
+    GridRowId
 } from '@mui/x-data-grid';
 import * as Yup from 'yup';
 import Box from '@mui/material/Box';
@@ -29,11 +28,11 @@ import {
     GridEnrichedBySchemaColDef,
     isTmpId,
     emptyByType,
-    buildGenericYupValidationSchema
+    buildGenericYupValidationSchema,
+    ItemSchemaColumnsType
 } from '../utils';
 import { SxProps } from '@mui/material';
-import { ObjectShape } from 'yup/lib/object';
-import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaContext';
 import { quantityOnlyOperators } from './DataGridBySchemaEditable/utils';
 import { CustomToolbar } from './DataGridBySchemaEditable/CustomToolbar';
 import { SelectEditInputCell } from './DataGridBySchemaEditable/SelectEditInputCell';
@@ -41,9 +40,9 @@ import { GridDecimalInput } from './DataGridBySchemaEditable/GridDecimalInput';
 import { GridPatternInput } from './DataGridBySchemaEditable/GridPatternInput';
 import { FooterToolbar } from './DataGridBySchemaEditable/FooterToolbar';
 import { ConfirmDialog } from './DataGridBySchemaEditable/ConfirmDialog';
+import { APIWrapperContext } from '../context/APIWrapperContext';
 
 const stringMask = require('string-mask');
-const moment = require('moment');
 
 interface DataGridBySchemaEditableProps {
     schema: SchemaType;
@@ -60,8 +59,10 @@ interface DataGridBySchemaEditableProps {
     indexFieldBasePath?: string;
     stateToLink?: object;
     minWidth?: number;
-    onEditRelatedModelSave?: (p: any) => Id | { data: Item } | { errors: Item };
-    onDeleteRelatedModel?: (p: any) => any;
+    
+    modelParentId?: Id;
+    modelParent?: string;
+    
     customColumnOperations?: (p: any) => GridEnrichedBySchemaColDef;
     customLinkDestination?: (p: any) => string;
     LinkComponent?: any;
@@ -91,8 +92,8 @@ const DataGridBySchemaEditable = forwardRef((
         indexFieldBasePath = '',
         stateToLink = {},
         minWidth = 80,
-        onEditRelatedModelSave,
-        onDeleteRelatedModel,
+        modelParent,
+        modelParentId,
         customColumnOperations,
         customLinkDestination,
         LinkComponent,
@@ -111,7 +112,10 @@ const DataGridBySchemaEditable = forwardRef((
     const { serverEndPoint } = DRFReactBySchemaContext
         ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
         : { serverEndPoint: null };
-    const initialSnackBar:Record<string, any> = {
+
+    const apiContext = React.useContext(APIWrapperContext);
+
+    const initialSnackBar:Item = {
         open: false,
         msg: '',
         severity: 'info'
@@ -412,7 +416,7 @@ const DataGridBySchemaEditable = forwardRef((
                     if (!params.value || typeof params.value !== 'string') {
                         return params.value;
                     }
-                    const formattedValue = new stringMask.Mask(column.patternFormat, {}).apply(params.value);
+                    const formattedValue = new stringMask(column.patternFormat, {}).apply(params.value);
                     return formattedValue;
                 };
                 if (isEditable) {
@@ -455,13 +459,19 @@ const DataGridBySchemaEditable = forwardRef((
     };
 
     const handleDeleteSave = () => {
+        if (idToRemove.current === null) {
+            setDialogOpen(false);
+            return;
+        }
         const newData = dataGrid.data.filter(row => row.id !== idToRemove.current);
         setDataGrid({
             ...dataGrid,
             data: newData
         });
-        if (onDeleteRelatedModel) {
-            onDeleteRelatedModel({
+        if (modelParent && modelParentId && apiContext) {
+            apiContext.onDeleteRelatedModel({
+                model: modelParent,
+                id: modelParentId,
                 relatedModel: model,
                 relatedModelId: idToRemove.current
             });
@@ -574,8 +584,10 @@ const DataGridBySchemaEditable = forwardRef((
             }
         }
 
-        if (onEditRelatedModelSave) {
-            const response = await onEditRelatedModelSave({
+        if (modelParent && modelParentId && apiContext) {
+            const response = await apiContext.onEditRelatedModelSave({
+                model: modelParent,
+                id: modelParentId,
                 relatedModel: model,
                 relatedModelId: newRow.id,
                 newRow,
@@ -583,13 +595,10 @@ const DataGridBySchemaEditable = forwardRef((
                 onlyAddExisting
             });
 
-            const responseAsId = response as 'number';
-            const responseAsData = response as { data: Item };
-            const responseAsErrors = response as { errors: Item }
-    
+            const responseAsData = response as ItemSchemaColumnsType;
             if (
-                (onlyAddExisting && !responseAsErrors.errors) ||
-                (parseInt(responseAsId) && (createNewItem || !onlyAddExisting))
+                (onlyAddExisting && typeof response != 'boolean') ||
+                (parseInt(response as string) && (createNewItem || !onlyAddExisting))
             ) {
                 updateOptionsAC();
                 const data = [...dataGrid.data];
@@ -597,7 +606,7 @@ const DataGridBySchemaEditable = forwardRef((
                     if (data[i].id === newRow.id) {
                         data[i] = onlyAddExisting ? responseAsData.data : newRow;
                         if (isTmpId(newRow.id)) {
-                            const newId = parseInt(responseAsId);
+                            const newId = parseInt(response as string);
                             data[i].id = newId || responseAsData.data.id;
                         }
     
@@ -643,8 +652,10 @@ const DataGridBySchemaEditable = forwardRef((
                     columns={preparedColumns}
                     onStateChange={(state) => {
                         if (setVisibleRows) {
-                            const newRows = gridVisibleSortedRowIdsSelector(state);
-                            setVisibleRows(newRows);
+                            const newVisibleRows = Object.entries(state.filter.visibleRowsLookup)
+                                .filter(entry => { return entry[1] === true; })
+                                .map((entry:Item) => { return entry[0]; }) as GridRowId[];
+                            setVisibleRows(newVisibleRows);
                         }
                     }}
                     editMode="row"

package/src/components/DataTotals.tsx

@@ -3,8 +3,9 @@ import Alert, { AlertColor } from '@mui/material/Alert';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import { NumericFormat } from 'react-number-format';
+import { GridRowId } from '@mui/x-data-grid';
+
 import { Item } from '../utils';
-import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
 
 export interface SumRowsType {
     rows: Item[],
@@ -14,7 +15,7 @@ export interface SumRowsType {
 interface DataTotalsProps {
     data?: Item[];
     sumRows?: SumRowsType;
-    visibleRows?: string[];
+    visibleRows: GridRowId[];
 };
 
 const DataTotals = ({
@@ -31,7 +32,7 @@ const DataTotals = ({
                             <ListItem key={`sumRows_${row.field}`}>
                                 <NumericFormat
                                     value={data.reduce((total, item) => {
-                                        if (parseFloat(item[row.field]) && visibleRows && visibleRows.includes(item.id)) {
+                                        if (parseFloat(item[row.field]) && visibleRows.includes(`${item.id}`)) {
                                             return total + parseFloat(item[row.field]);
                                         }
                                         return total;

package/src/components/DialogActions.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import { DialogType } from '../context/APIWrapperContext';
+
+interface DialogActionsProps {
+    setDialog: React.Dispatch<React.SetStateAction<DialogType>>;
+    handleSave: (p: any) => Promise<boolean | undefined>;
+    btnCancel?: string;
+    btnConfirm?: string;
+};
+export default function DialogActions ({
+    setDialog,
+    handleSave,
+    btnCancel = 'Cancelar',
+    btnConfirm = 'Salvar'
+}: DialogActionsProps) {
+    return (
+        <>
+            <Button
+                onClick={() => {
+                    setDialog({ open: false });
+                }}
+            >
+                {btnCancel}
+            </Button>
+            <Button
+                onClick={handleSave}
+            >
+                {btnConfirm}
+            </Button>
+        </>
+    );
+};

package/src/components/DialogJSONSchemaForm.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import validator from '@rjsf/validator-ajv8';
+import Form from '@rjsf/mui';
+import { Item, SchemaType } from '../utils';
+
+interface DialogJSONSchemaFormProps {
+    jsonSchemaFormRef: any;
+    schema: SchemaType;
+    uiSchema: SchemaType;
+    formData: Item;
+    onSubmit: ({ formData }:{ formData: Item }) => void;
+};
+
+export default function DialogJSONSchemaForm ({
+    jsonSchemaFormRef,
+    schema,
+    uiSchema,
+    formData,
+    onSubmit
+}:DialogJSONSchemaFormProps) {
+    return (
+        <Form
+            // @ts-ignore
+            ref={jsonSchemaFormRef}
+            schema={schema}
+            uiSchema={uiSchema}
+            validator={validator}
+            formData={formData}
+            onSubmit={onSubmit}
+        >
+            <Button
+                type="submit"
+                sx={{ display: 'none' }}
+            >
+                Salvar
+            </Button>
+        </Form>
+    );
+};

package/src/components/GenericModelList.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
+import { GridRowId } from '@mui/x-data-grid';
 
 import DataGridBySchemaEditable from './DataGridBySchemaEditable';
 import DataTotals, { SumRowsType } from './DataTotals';
 import { Layout } from '../styles';
-// import CONSTANTS from '../constants';
-import { GridEnrichedBySchemaColDef, Item, SchemaType } from '../utils';
-import { DataSchemaColumnsType, getGenericModelList, getGenericModelListProps } from '../api';
-import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+import { GridEnrichedBySchemaColDef, Item, SchemaType, DataSchemaColumnsType } from '../utils';
+import { getGenericModelList, getGenericModelListProps } from '../api';
+import { DRFReactBySchemaContext } from '../context/DRFReactBySchemaContext';
+import { APIWrapperContext } from '../context/APIWrapperContext';
 
 interface GenericModelListProps {
     columnFields: string[];
@@ -20,9 +21,8 @@ interface GenericModelListProps {
     sumRows?: SumRowsType;
     isAutoHeight?: boolean;
     model: string;
-    handleLoading: (p: any) => void;
     forceReload: boolean;
-    LinkComponent: React.ReactNode;
+    LinkComponent?: React.ReactNode;
 }
 
 const GenericModelList = ({
@@ -36,24 +36,30 @@ const GenericModelList = ({
     sumRows,
     isAutoHeight = true,
     model,
-    handleLoading,
     forceReload = false,
     LinkComponent = null
 }: GenericModelListProps) => {
-    const { serverEndPoint, isInBatches, firstBatchLength }:DRFReactBySchemaContextType = DRFReactBySchemaContext
-        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
-        : { serverEndPoint: null };
-    if (!serverEndPoint) {
+    const context = React.useContext(DRFReactBySchemaContext);
+    const apiContext = React.useContext(APIWrapperContext);
+    if (!context.serverEndPoint || !apiContext) {
         console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
         return (<></>);
     }
+    const {
+        serverEndPoint,
+        isInBatches,
+        firstBatchLength
+    } = context;
+    const {
+        handleLoading
+    } = apiContext;
     interface dataProps {
         data: Item[];
         schema: SchemaType;
         columns: GridEnrichedBySchemaColDef[]
     };
     const [data, setData] = useState<DataSchemaColumnsType | boolean>(false);
-    const [visibleRows, setVisibleRows] = useState<string[]>([]);
+    const [visibleRows, setVisibleRows] = useState<GridRowId[]>([]);
     const [hideFooterPagination, setHideFooterPagination] = useState(false);
 
     const finalCustomColumnOperations = (column: GridEnrichedBySchemaColDef) => {
@@ -116,7 +122,7 @@ const GenericModelList = ({
 
     return (
         <>
-            {data && typeof data !== 'boolean' && data.columns &&
+            {typeof data !== 'boolean' && data.columns &&
                 <>
                     <Box sx={Layout.dataGridWithTabs}>
                         <DataGridBySchemaEditable
@@ -131,7 +137,11 @@ const GenericModelList = ({
                             hideFooterPagination={hideFooterPagination}
                             customColumnOperations={finalCustomColumnOperations}
                             customLinkDestination={customLinkDestination}
-                            setVisibleRows={setVisibleRows}
+                            setVisibleRows={(newVisibleRows:GridRowId[]) => {
+                                if (JSON.stringify(newVisibleRows) !== JSON.stringify(visibleRows)) {
+                                    setVisibleRows(newVisibleRows);
+                                }
+                            }}
                             onDataChange={newData => {
                                 setData({
                                     ...data,