drf-react-by-schema 0.3.0 → 0.4.0

package/src/context/APIWrapper.tsx

@@ -1,447 +0,0 @@
-import React, { useState, useReducer, useEffect, useRef } from 'react';
-import {
-    Id,
-    Item,
-    reducer,
-    SchemaType,
-    populateValues,
-    buildGenericYupValidationSchema,
-    getTmpId,
-    isTmpId
-} from '../utils';
-
-import DialogJSONSchemaForm from '../components/DialogJSONSchemaForm';
-import DialogActions from '../components/DialogActions';
-import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from './DRFReactBySchemaContext';
-import {
-    isLoggedIn,
-    getAutoComplete,
-    getGenericModel,
-    updateDataBySchema,
-    addExistingRelatedModel,
-    deleteData,
-    getJSONSchema,
-    createOrUpdateJSONSchema
-} from '../api';
-import { AxiosResponse } from 'axios';
-import {
-    APIWrapperContext, 
-    DialogType,
-    LoadSinglePageDataProps,
-    OnDeleteRelatedModelType,
-    OnEditModelType,
-    OnEditRelatedModelType,
-    PageFormType,
-    SnackBarType
-} from './APIWrapperContext';
-
-interface APIWrapperProps {
-    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
-    handleLoading: (p: boolean) => void;
-    setSnackBar: React.Dispatch<React.SetStateAction<SnackBarType>>;
-    setDialog: React.Dispatch<React.SetStateAction<DialogType>>;
-    children: React.ReactNode;
-};
-
-function APIWrapper ({
-    setLoading,
-    handleLoading,
-    setSnackBar,
-    setDialog,
-    children
-}:APIWrapperProps) {
-    const { serverEndPoint } = DRFReactBySchemaContext
-        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
-        : { serverEndPoint: null };
-    if (!serverEndPoint) {
-        return (
-            <>
-                {children}
-            </>
-        );
-    }
-
-    const [usuaria, setUsuaria] = useState<Item | null>(null);
-    const [optionsAC, setOptionsAC] = useReducer(reducer, {});
-    const initialPageForm:PageFormType = {
-        id: '',
-        schema: null,
-        initialValues: null,
-        validationSchema: null
-    };
-    const [pageForm, setPageForm] = useReducer(reducer, initialPageForm);
-    const editModel = useRef<Item>({});
-    const jsonSchemaFormRef = useRef<any>(null);
-
-    useEffect(() => {
-        setUsuaria(null);
-        isLoggedIn(serverEndPoint).then(usuaria => {
-            setUsuaria(usuaria || { erro: 'token inválido' });
-        });
-    }, []);
-
-    useEffect(() => {
-        setPageForm(initialPageForm);
-    }, []);
-
-    const onTriggerSnackBar = ({ msg, severity = 'info' }:SnackBarType) => {
-        setSnackBar({
-            open: true,
-            msg,
-            severity
-        });
-    };
-
-    const loadSinglePageData = async ({
-        model,
-        objId,
-        objTitleField = 'nome',
-        optionsACModels,
-        basePath = '/',
-        formPath = null,
-        extraValidators = {}
-    }: LoadSinglePageDataProps) => {
-        setLoading(true);
-        if (objId === 'novo') {
-            objId = getTmpId();
-        }
-
-        const object = await getGenericModel({
-            model,
-            serverEndPoint,
-            id: isTmpId(objId) ? null : objId
-        });
-
-        if (object === false) {
-            setPageForm({ schema: false, id: '' });
-            console.log('Houve um erro ao tentar carregar os dados!');
-            return false;
-        }
-
-        setLoading(false);
-
-        populateOptionsAC(optionsACModels);
-
-        const values = populateInitialValues({
-            model,
-            id: objId,
-            extraValidators,
-            ...object
-        });
-
-        return values;
-    };
-
-    const onSubmit = async (
-        model:string, 
-        id:Id, 
-        data:Item, 
-        e:React.SyntheticEvent<HTMLButtonElement, SubmitEvent>
-    ) => {
-        setLoading(true);
-        const response = await updateDataBySchema({
-            model,
-            modelObjectId: id,
-            serverEndPoint,
-            data,
-            schema: pageForm.schema
-        });
-        setLoading(false);
-        if (!['number', 'string'].includes(typeof response)) {
-            onTriggerSnackBar({
-                msg: 'Houve um problema ao salvar seus dados! Por favor, entre em contato',
-                severity: 'error'
-            });
-            console.log({
-                msg: 'Error saving model',
-                errors: response,
-                data
-            });
-            return false;
-        }
-
-        onTriggerSnackBar({
-            msg: (id)
-                ? 'Dados atualizados com sucesso!'
-                : 'Criado com sucesso!'
-        });
-
-        return response as Id;
-    };
-
-    const populateOptionsAC = (optionsACModels:string[]) => {
-        for (const model of optionsACModels) {
-            getAutoComplete({ model, serverEndPoint }).then(options => {
-                setOptionsAC({ [model]: options });
-            });
-        }
-    };
-
-    interface PopulateInitialValuesProps {
-        model: string;
-        id: Id;
-        data: Item;
-        schema: SchemaType;
-        extraValidators: Item;
-        isEditModel?: boolean;
-    };
-    const populateInitialValues = ({
-        model,
-        id,
-        isEditModel,
-        extraValidators,
-        ...object
-    }:PopulateInitialValuesProps) => {
-        const values = populateValues(object);
-        const yupSchema = buildGenericYupValidationSchema({ ...object, data: values, extraValidators });
-        setPageForm({
-            model,
-            id,
-            schema: object.schema,
-            initialValues: values,
-            validationSchema: yupSchema
-        });
-        return values;
-    };
-
-    const onEditModel = ({
-        fieldKey,
-        index,
-        model,
-        id,
-        labelKey,
-        setValue,
-        getValues
-    }: OnEditModelType) => {
-        setDialog({
-            open: true,
-            loading: true
-        });
-        getJSONSchema({ model, serverEndPoint, id }).then(data => {
-            const jsonSchemaSubmit = async (e:React.SyntheticEvent<HTMLElement, SubmitEvent>) => {
-                jsonSchemaFormRef.current.onSubmit(e);
-                return true;
-            };
-            setDialog({
-                loading: false,
-                title: 'Editar',
-                Body: <DialogJSONSchemaForm
-                    jsonSchemaFormRef = {jsonSchemaFormRef}
-                    schema = {data.serializer.schema}
-                    uiSchema = {data.serializer.uiSchema}
-                    formData = {data.formData}
-                    onSubmit = {onEditModelSave}
-                />,
-                Actions: <DialogActions
-                    setDialog = {setDialog}
-                    handleSave = {jsonSchemaSubmit}
-                />
-            } as DialogType);
-            editModel.current = {
-                fieldKey,
-                index,
-                model,
-                id,
-                labelKey,
-                setValue,
-                getValues
-            };
-        });
-    };
-
-    const onEditModelSave = async ({ formData }:{ formData: Item }) => {
-        setDialog({ open: false });
-        setLoading(true);
-        const {
-            fieldKey,
-            index,
-            model,
-            id,
-            labelKey,
-            setValue,
-            getValues
-        } = editModel.current;
-        const newModelId = await createOrUpdateJSONSchema({
-            model,
-            serverEndPoint,
-            id,
-            formData
-        });
-        if (newModelId.errors) {
-            console.log(newModelId.errors);
-            onTriggerSnackBar({
-                msg: 'Houve um problema ao salvar a alteração! Por favor, entre em contato.',
-                severity: 'error'
-            });
-            return;
-        }
-        onTriggerSnackBar({
-            msg: 'Alterações salvas com sucesso!',
-            severity: 'info'
-        });
-        const targetKey = (fieldKey && index >= 0)
-            ? `${fieldKey}.${index}.${model}`
-            : model;
-        const newValue = {
-            ...getValues(targetKey),
-            ...formData,
-            label: formData[labelKey]
-        };
-        setValue(targetKey, newValue);
-        populateOptionsAC([model]);
-        setLoading(false);
-    };
-
-    const onDeleteModel = (model:string, id:Id, onSuccess:()=>void | null) => {
-        setDialog({
-            open: true,
-            loading: false,
-            title: 'Apagar',
-            Body: 'Tem certeza de que deseja apagar este item?',
-            Actions: <DialogActions
-                setDialog = {setDialog}
-                handleSave = {(e:React.SyntheticEvent) => {
-                    return onDeleteModelSave(model, id, onSuccess);
-                }}
-                btnConfirm = "Sim, apagar"
-            />
-        });
-    };
-
-    const onDeleteModelSave = async (model:string, id:Id, onSuccess:()=>void | null) => {
-        setDialog({ open: false });
-        setLoading(true);
-        const ret = await deleteData(model, serverEndPoint, id);
-        if (ret !== false) {
-            onTriggerSnackBar({
-                msg: 'Apagado com com sucesso!',
-                severity: 'info'
-            });
-            if (onSuccess !== null) {
-                onSuccess();
-            }
-            return true;
-        }
-
-        setLoading(false);
-        onTriggerSnackBar({
-            msg: 'Houve um problema ao remover o item! Por favor, entre em contato.',
-            severity: 'error'
-        });
-        return false;
-    };
-
-    const onEditRelatedModelSave = async ({
-        model,
-        id,
-        relatedModel,
-        relatedModelId,
-        newRow,
-        schema,
-        onlyAddExisting
-    }:OnEditRelatedModelType) => {
-        const updateUrl = `${model}/${id}/${relatedModel}`;
-        if (onlyAddExisting) {
-            const response = await addExistingRelatedModel({
-                model,
-                id,
-                serverEndPoint,
-                data: {
-                    onlyAddExisting: {
-                        key: relatedModel,
-                        value: newRow.id_to_add
-                    }
-                }
-            });
-            if (Object.prototype.hasOwnProperty.call(response, 'errors')) {
-                console.log(response);
-                onTriggerSnackBar({
-                    msg: 'Houve um problema ao salvar a alteração! Por favor, entre em contato.',
-                    severity: 'error'
-                });
-                return false;
-            }
-            onTriggerSnackBar({
-                msg: 'Alterações salvas com sucesso!',
-                severity: 'info'
-            });
-            const object = await getGenericModel({
-                model,
-                id,
-                serverEndPoint,
-                relatedModel,
-                relatedModelId: newRow.id_to_add
-            });
-            return object;
-        }
-        // This is important for related data
-        if (schema[model] && !newRow[model]) {
-            newRow[model] = id;
-        }
-        const response = await updateDataBySchema({
-            model: relatedModel,
-            modelObjectId: newRow.id,
-            serverEndPoint,
-            data: newRow,
-            schema,
-            path: updateUrl
-        });
-        if (response && !Object.prototype.hasOwnProperty.call(response, 'errors')) {
-            onTriggerSnackBar({
-                msg: 'Alterações salvas com sucesso!',
-                severity: 'info'
-            });
-            return response as Id;
-        }
-        onTriggerSnackBar({
-            msg: 'Não foi possível salvar os dados. Confira os erros.',
-            severity: 'error'
-        });
-        return false;
-    };
-
-    const onDeleteRelatedModel = async ({
-        model,
-        id,
-        relatedModel,
-        relatedModelId
-    }:OnDeleteRelatedModelType) => {
-        const deleteUrl = `${model}/${id}/${relatedModel}`;
-        const response = await deleteData(deleteUrl, serverEndPoint, relatedModelId);
-        if (response) {
-            onTriggerSnackBar({
-                msg: 'Alterações salvas com sucesso!',
-                severity: 'info'
-            });
-            return response;
-        }
-        onTriggerSnackBar({
-            msg: 'Houve um problema ao remover o item! Por favor, entre em contato.',
-            severity: 'error'
-        });
-        return false;
-    };
-
-    return (
-        <APIWrapperContext.Provider
-            value = {{
-                usuaria,
-                onSubmit,
-                loadSinglePageData,
-                handleLoading,
-                optionsACState: [optionsAC, setOptionsAC],
-                pageFormState: [pageForm, setPageForm],
-                onEditModel,
-                onDeleteModel,
-                onEditRelatedModelSave,
-                onDeleteRelatedModel,
-                onTriggerSnackBar,
-                setDialog
-            }}
-        >
-            {children}
-        </APIWrapperContext.Provider>
-    );
-}
-
-export default React.memo(APIWrapper);

package/src/context/DRFReactBySchemaProvider.md

@@ -1,57 +0,0 @@
-```js
-/*
-import Box from '@mui/material/Box';
-import DataGridBySchemaEditable from '../components/DataGridBySchemaEditable';
-import { APIWrapperContext } from '../context/APIWrapperContext';
-
-const data = {
-    data: [],
-    columns: [],
-    schema: {}
-};
-const model = 'example';
-const indexField = null;
-const indexFieldBasePath = null;
-const isAutoHeight = true;
-const hideFooterPagination = false;
-const finalCustomColumnOperations = null;
-const customLinkDestination = null;
-const setVisibleRows = null;
-const setData = (newData) => {
-    return '';
-};
-const Link = null;
-<DRFReactBySchemaProvider
-    serverEndPoint={{
-        url: 'https://icv.eita.org.br/api',
-        apiTokenUrl: 'https://icv.eita.org.br/api-auth/token'
-    }}
->
-    <Box sx={{ height: 300px }}>
-        <DataGridBySchemaEditable
-            data={data.data}
-            columns={data.columns}
-            schema={data.schema}
-            model={model}
-            indexField={indexField}
-            indexFieldBasePath={indexFieldBasePath}
-            isEditable={false}
-            isAutoHeight={isAutoHeight}
-            hideFooterPagination={hideFooterPagination}
-            customColumnOperations={finalCustomColumnOperations}
-            customLinkDestination={customLinkDestination}
-            setVisibleRows={setVisibleRows}
-            onDataChange={newData => {
-                const apiContext = React.useContext(APIWrapperContext);
-                apiContext.handleLoading(false);
-                setData({
-                    ...data,
-                    data: newData
-                });
-            }}
-            LinkComponent={Link}
-        />
-    </Box>
-</DRFReactBySchemaProvider>
-*/
-```

package/src/context/DRFReactBySchemaProvider.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { ThemeProvider, Theme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-
-import defaultTheme from '../styles/theme';
-import Overlays from './Overlays';
-import { DRFReactBySchemaContextType, serverEndPointType, DRFReactBySchemaContext } from './DRFReactBySchemaContext';
-
-interface DRFReactBySchemaProviderProps extends DRFReactBySchemaContextType {
-    children: React.ReactNode;
-}
-
-/**
- *
- *
- * @param {*} props
- * @returns {*} 
- */
-const DRFReactBySchemaProvider = ({
-    serverEndPoint,
-    theme,
-    isInBatches,
-    firstBatchLength,
-    children
-}: DRFReactBySchemaProviderProps) => {
-    if (serverEndPoint) {
-        const defaultKeys = [
-            'autocomplete',
-            'api',
-            ['JSONSchema', 'jsonschema'],
-            ['getToken', ''],
-            ['refreshToken', 'refresh'],
-            ['verifyToken', 'verify']
-        ];
-        for (const key of defaultKeys) {
-            const hybridKey = (typeof key === 'string')
-                ? key as keyof serverEndPointType
-                : key[0] as keyof serverEndPointType;
-            const hybridUrl = (typeof key === 'string')
-                ? key
-                : key[1];
-            if (serverEndPoint[hybridKey]) {
-                continue;
-            }
-            serverEndPoint[hybridKey] = `${serverEndPoint.url}/${hybridUrl}`;
-        }
-    }
-
-    const mergedTheme = (theme)
-        ? { ...defaultTheme, ...theme }
-        : defaultTheme;
-
-    return (
-        <ThemeProvider theme={mergedTheme}>
-            <CssBaseline />
-            <DRFReactBySchemaContext.Provider 
-                value={{
-                    serverEndPoint,
-                    theme,
-                    isInBatches,
-                    firstBatchLength
-                }}
-            >
-                <Overlays 
-                    children = {children}
-                />
-            </DRFReactBySchemaContext.Provider>
-        </ThemeProvider>
-    );
-}
-
-export default DRFReactBySchemaProvider;

package/src/context/Overlays.tsx

@@ -1,94 +0,0 @@
-import React, { useState, useReducer } from 'react';
-import Backdrop from '@mui/material/Backdrop';
-import CircularProgress from '@mui/material/CircularProgress';
-import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Box from '@mui/material/Box';
-
-import { reducer } from '../utils';
-import APIWrapper from './APIWrapper';
-import { DialogType, SnackBarType } from './APIWrapperContext';
-
-export default function Overlays ({ children }: { children:React.ReactNode }) {
-    const initialSnackBar:SnackBarType = {
-        open: false,
-        msg: '',
-        severity: 'info'
-    };
-
-    const initialDialog:DialogType = {
-        open: false,
-        loading: true,
-        title: '',
-        Body: null,
-        Actions: null
-    };
-    const [snackBar, setSnackBar] = useReducer(reducer, initialSnackBar);
-    const [dialog, setDialog] = useReducer(reducer, initialDialog);
-    const [loading, setLoading] = useState<boolean>(true);
-
-    // give some time to stop loading when data is retrieved and must render before loading rendering:
-    const handleLoading = (loadingState:boolean) => {
-        if (loadingState) {
-            setLoading(true);
-            return;
-        }
-        setTimeout(() => {
-            setLoading(false);
-        }, 300);
-    };
-
-    const handleDialogClose = () => {
-        setDialog({
-            open: false
-        });
-    };
-
-    return (
-        <>
-            <APIWrapper
-                setLoading={setLoading}
-                handleLoading={handleLoading}
-                setSnackBar={setSnackBar}
-                setDialog={setDialog}
-                children={children}
-            />
-            <Backdrop
-                sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={loading}
-            >
-                <CircularProgress />
-            </Backdrop>
-            <Snackbar
-                open={snackBar.open}
-                autoHideDuration={3000}
-                onClose={() => { setSnackBar({ open: false }); }}
-                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            >
-                <Alert severity={snackBar.severity}>
-                    {snackBar.msg}
-                </Alert>
-            </Snackbar>
-            <Dialog open={dialog.open} onClose={handleDialogClose}>
-                <DialogTitle>
-                    {dialog.loading ? 'Carregando...' : dialog.title}
-                </DialogTitle>
-                <DialogContent>
-                    {dialog.loading
-                        ? <Box sx={{ display: 'flex' }}><CircularProgress /></Box>
-                        : <>{dialog.Body}</>
-                    }
-                </DialogContent>
-                <DialogActions>
-                    {!dialog.loading &&
-                        <>{dialog.Actions}</>
-                    }
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-}