drf-react-by-schema 0.0.2 → 0.1.0

package/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
+  parserOptions: {
+    sourceType: 'module',
+  },
+  rules: {
+    'prettier/prettier': 'error',
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
+}

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridBySchemaEditable = void 0;
+const DataGridBySchemaEditable_1 = __importDefault(require("./components/DataGridBySchemaEditable"));
+exports.DataGridBySchemaEditable = DataGridBySchemaEditable_1.default;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Tools for building a React App having Django Rest Framework (DRF) as server",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"There are (still) no tests in this package\""
+    "test": "echo \"There are (still) no tests in this package\"",
+    "build": "tsc"
   },
   "repository": {
     "type": "git",
@@ -16,9 +17,36 @@
     "django"
   ],
   "author": "Coletivo EITA",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://gitlab.com/eita/drf-react-by-schema/drf-react-by-schema-js/issues"
   },
-  "homepage": "https://gitlab.com/eita/drf-react-by-schema/drf-react-by-schema-js#readme"
+  "homepage": "https://gitlab.com/eita/drf-react-by-schema/drf-react-by-schema-js#readme",
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.4"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.112",
+    "@mui/material": "^5.11.0",
+    "@mui/x-data-grid": "^5.17.14",
+    "@mui/x-date-pickers": "^5.0.11",
+    "@types/jest": "^29.2.4",
+    "@types/node": "^18.11.15",
+    "@types/react-dom": "^18.0.9",
+    "axios": "^1.2.1",
+    "moment": "^2.29.4",
+    "react-number-format": "^5.1.2",
+    "react-router-dom": "^6.4.5",
+    "string-mask": "^0.3.0",
+    "yup": "^0.32.11"
+  }
 }

package/src/api.ts

@@ -0,0 +1,526 @@
+import axios, { AxiosError, AxiosResponse } from 'axios';
+import {
+    isTmpId,
+    emptyByType,
+    getChoiceByValue,
+    Field,
+    Item,
+    Schema
+} from './utils';
+
+const moment = require('moment');
+
+type Id = string | number | null;
+interface TargetApiParams {
+    path:string,
+    data:Item,
+    id:Id
+};
+interface TargetApiParamsOptionalId {
+    path:string,
+    data:Item,
+    id?:Id
+};
+interface Constants {
+    API: Record<string, string>
+};
+const CONSTANTS:Constants = {
+    API: {
+        api: '',
+        JSONSchema: '',
+        getToken: ''
+    }
+};
+const getOptions = async (path:string) => {
+    const url = `${CONSTANTS.API.api}/${path}`;
+    try {
+        const { data } = await axios.options(url);
+        return data;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                const { data } = await axios.options(url);
+                return data;
+            } catch (e) {
+                console.log(`Error fetching options from ${url}`, e);
+                return false;
+            }
+        }
+        console.log(`Error fetching options from ${url}`, e);
+        return false;
+    }
+};
+
+const getSchema = async (path:string) => {
+    const options = await getOptions(path);
+    if (!options || !options.actions || !options.actions.POST) {
+        return false;
+    }
+
+    // Special default value of "currentUser":
+    let usuaria;
+    const postActions:Record<string, Field> = options.actions.POST;
+    for (const [key, field] of Object.entries(postActions)) {
+        if (field.model_default === 'currentUser') {
+            if (!usuaria) {
+                usuaria = await isLoggedIn();
+            }
+            if (usuaria) {
+                options.actions.POST[key].model_default = {
+                    id: usuaria.id,
+                    label: usuaria.first_name
+                };
+            }
+        }
+    }
+
+    return options.actions.POST;
+};
+
+const getData = async (
+    path:string,
+    route:string = 'api'
+) => {
+    const url = `${CONSTANTS.API[route]}/${path}`;
+    try {
+        const { data } = await axios.get(url);
+        return data;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                const { data } = await axios.get(url);
+                return data;
+            } catch (e) {
+                console.log(`Error fetching data from ${url}`, e);
+                return false;
+            }
+        }
+        console.log(`Error fetching data from ${url}`, e);
+        return false;
+    }
+};
+
+export const updateData = async ({ path, data, id }: TargetApiParams) => {
+    const url = `${CONSTANTS.API.api}/${path}/${id}/`;
+    try {
+        await axios.put(url, data);
+        return id;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                await axios.put(url, data);
+                return true;
+            } catch (e) {
+                console.log(`Error updating data at ${url}`, data, e);
+                return false;
+            }
+        }
+        const err = e as AxiosError;
+        console.log(`Error updating data at ${url}`, data, err.response?.data);
+        return ({ errors: err.response?.data } as unknown) as AxiosResponse;
+    }
+};
+
+export const partialUpdateData = async ({ path, data, id }: TargetApiParams) => {
+    const url = `${CONSTANTS.API.api}/${path}/${id}/`;
+    try {
+        await axios.patch(url, data);
+        // DEBUG console.log({ path, data, id });
+        return id;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                await axios.patch(url, data);
+                return true;
+            } catch (e) {
+                console.log(`Error partial updating data at ${url}`, data, e);
+                return false;
+            }
+        }
+        const err = e as AxiosError;
+        console.log(`Error partial updating data at ${url}`, data, err.response?.data);
+        return ({ errors: err.response?.data } as unknown) as AxiosResponse;
+    }
+};
+
+export const createData = async ({ path, data }: Omit<TargetApiParams, 'id'>) => {
+    const url = `${CONSTANTS.API.api}/${path}/`;
+    try {
+        const ret = await axios.post(url, data);
+        return ret;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                const ret = await axios.post(url, data);
+                return ret;
+            } catch (e) {
+                console.log(`Error creating data at ${url}`, data, e);
+                return false;
+            }
+        }
+        const err = e as AxiosError;
+        console.log(`Error creating data at ${url}`, data, err.response?.data);
+        return ({ errors: err.response?.data } as unknown) as AxiosResponse;
+    }
+};
+
+export const deleteData = async (path:string, id:Id) => {
+    const url = `${CONSTANTS.API.api}/${path}/${id}`;
+    try {
+        await axios.delete(url);
+        return true;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                await axios.delete(url);
+                return true;
+            } catch (e) {
+                console.log(`Error deleting data from ${url}`, e);
+                return false;
+            }
+        }
+        console.log(`Error deleting data from ${url}`, e);
+        return false;
+    }
+};
+
+export const createOrUpdateData = async ({ path, data, id }: TargetApiParamsOptionalId) => {
+    if (isTmpId(id)) {
+        id = null;
+    }
+    if (id) {
+        const responseUpdate = await updateData({ path, data, id });
+        return responseUpdate;
+    }
+
+    const responseCreate = await createData({ path, data });
+    if (!responseCreate || Object.prototype.hasOwnProperty.call(responseCreate, 'errors')) {
+        return responseCreate;
+    }
+
+    const responseUpdate = await updateData({ path, data, id: responseCreate.data.id });
+    return responseUpdate;
+};
+
+const prepareDataBySchema = ({
+    data,
+    schema,
+    parentIsField = false
+}: {
+    data:Item,
+    schema:Schema,
+    parentIsField?:boolean
+}) => {
+    // console.log('Entered prepareDataBySchema', schema);
+    const dbData:Item = {};
+    for (const [key, field] of Object.entries(schema)) {
+        // console.log(key, field, data);
+        if (!(key in data) || (key === 'id' && isTmpId(data[key]))) {
+            continue;
+        }
+        if (!data[key]) {
+            dbData[key] = emptyByType(field, true);
+            continue;
+        }
+        // console.log({ key, data: data[key] });
+
+        // OneToMany or ManyToMany relations:
+        if (field.type === 'field' && field.child) {
+            const dataArr:Item[] = data[key];
+            dbData[key] = dataArr.map(row => {
+                return (field.child?.children)
+                    ? prepareDataBySchema({
+                        data: row,
+                        schema: field.child.children,
+                        parentIsField: true
+                    })
+                    : row;
+            });
+            continue;
+        }
+
+        // Nested Object:
+        if (field.type === 'nested object' && field.children && typeof data[key] === 'object') {
+            dbData[key] = (isTmpId(data[key].id))
+                ? prepareDataBySchema({
+                    data: data[key] as Item,
+                    schema: field.children
+                })
+                : data[key].id;
+            continue;
+        }
+
+        // Choices:
+        if (field.type === 'choice') {
+            dbData[key] = data[key].value;
+            continue;
+        }
+
+        // Date:
+        if (field.type === 'date') {
+            const date = moment.moment(data[key]);
+            dbData[key] = date.format('YYYY-MM-DD');
+            continue;
+        }
+
+        // DateTime:
+        if (field.type === 'datetime') {
+            const date = moment.moment(data[key]);
+            dbData[key] = date.format('YYYY-MM-DDTHH:mm');
+            continue;
+        }
+
+        // Default:
+        dbData[key] = data[key];
+    }
+    return dbData;
+};
+
+export const updateDataBySchema = async ({
+    model,
+    modelObjectId,
+    data,
+    schema,
+    path = null
+}: {
+    model:string,
+    modelObjectId:Id,
+    data:Item,
+    schema:Schema,
+    path:string | null
+}) => {
+    // console.log({
+    //     model,
+    //     modelObjectId,
+    //     data,
+    //     schema
+    // });
+    const dbData:Item = prepareDataBySchema({ data, schema });
+
+    if (!path) {
+        path = model;
+    }
+    // DEBUG console.log({ model, modelObjectId, path, data, dbData });
+    const response = await createOrUpdateData({
+        path,
+        data: dbData,
+        id: modelObjectId
+    });
+
+    if (typeof response !== 'object' && parseInt(response as string)) {
+        return response;
+    }
+
+    console.log('ERRO MAIN', response);
+    return response;
+};
+
+export const addExistingRelatedModel = async ({
+    model,
+    id,
+    data
+}: {
+    model:string,
+    id:Id,
+    data:Item
+}) => {
+    const response = await partialUpdateData({ path: model, data, id });
+    // DEBUG console.log({ model, id, data, response });
+    return response;
+};
+
+const getDataGridColumns = (
+    schema:Schema,
+    columnFields:string[] = [],
+    hiddenFields:string[] = [],
+    creatableFields:string[] = []
+) => {
+    if (!schema) {
+        return false;
+    }
+    columnFields = (!columnFields || columnFields.length === 0)
+        ? Object.keys(schema)
+        : columnFields.filter(field => {
+            return Object.prototype.hasOwnProperty.call(schema, field);
+        });
+
+    return columnFields.map(field => {
+        const column = {
+            field,
+            headerName: schema[field].label,
+            hide: (hiddenFields.includes(field)),
+            creatable: (creatableFields.includes(field)),
+            width: 100
+        };
+        return column;
+    });
+};
+
+export const getAutoComplete = async (model:string) => {
+    const data = await getData(model, 'autocomplete');
+    return data;
+};
+
+export const getAssessoriaRelatedObjects = async (id:Id) => {
+    const data = await getData(`assessoria/${id}/related_objects/`);
+    return data;
+};
+
+export const getJSONSchema = async ({
+    model,
+    id = 'create'
+}: {
+    model:string,
+    id?:Id
+}) => {
+    const url = `${CONSTANTS.API.JSONSchema}/${model}/${id}/`;
+    try {
+        const { data } = await axios.get(url);
+        return data;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return false;
+            }
+            try {
+                const { data } = await axios.get(url);
+                return data;
+            } catch (e) {
+                console.log(`Error fetching JSONSchema data from ${url}`, e);
+                return false;
+            }
+        }
+        console.log(`Error fetching JSONSchema data from ${url}`, e);
+        return false;
+    }
+};
+
+export const createOrUpdateJSONSchema = async ({
+    model,
+    id = 'create',
+    formData
+}: {
+    model:string,
+    id?:Id,
+    formData:Item
+}) => {
+    let url = `${CONSTANTS.API.JSONSchema}/${model}/`;
+    if (id !== 'create') {
+        url += `${id}/`;
+    }
+    try {
+        const { data } = (id === 'create')
+            ? await axios.post(url, formData)
+            : await axios.patch(url, formData);
+        return data;
+    } catch (e) {
+        if (e instanceof AxiosError && e.response?.status === 401) {
+            const isRefreshed = await refreshToken();
+            if (!isRefreshed) {
+                console.log('Token expirou! Deve-se fazer login de novo');
+                return { errors: 'Token expirou! Deve-se fazer login de novo!' };
+            }
+            try {
+                const { data } = (id === 'create')
+                    ? await axios.post(url, formData)
+                    : await axios.patch(url, formData);
+                return data;
+            } catch (e) {
+                console.log(`Error partially updating or creating JSONSchema data from ${url}`, e);
+                return { errors: 'Erro ao salvar alterações em item!' };
+            }
+        }
+        console.log(`Error partially updating or creating JSONSchema data from ${url}`, e);
+        return { errors: 'Erro ao salvar alterações em item!' };
+    }
+};
+
+export const loginByPayload = async (payload:Item) => {
+    const url = CONSTANTS.API.getToken;
+    try {
+        const { data } = await axios.post(url, payload);
+        localStorage.setItem('refreshToken', data.refresh);
+        setAuthToken(data.access);
+        return true;
+    } catch (e) {
+        console.log('Erro no loginByPayload!', e);
+        setAuthToken(null);
+        return false;
+    }
+};
+
+export const setAuthToken = (token:string | null) => {
+    if (token) {
+        localStorage.setItem('token', token);
+        axios.defaults.headers.common.Authorization = `Bearer ${token}`;
+        return;
+    }
+    localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
+    delete axios.defaults.headers.common.Authorization;
+};
+
+const refreshToken = async () => {
+    const refreshToken = localStorage.getItem('refreshToken');
+    // console.log('entrou refreshToken', refreshToken);
+    setAuthToken(null);
+    if (!refreshToken) {
+        return false;
+    }
+    try {
+        const { data } = await axios.post(`${CONSTANTS.API.refreshToken}`, {
+            refresh: refreshToken
+        });
+        setAuthToken(data.access);
+        return true;
+    } catch (e) {
+        console.log('Failed refreshing token', e);
+        return false;
+    }
+};
+
+export const isLoggedIn = async () => {
+    const token = localStorage.getItem('token');
+    setAuthToken(token);
+    if (!token) {
+        return false;
+    }
+    const usuaria = await getData('minhaconta');
+    if (!usuaria) {
+        console.log('Erro ao recuperar dados de usuária!');
+        return false;
+    }
+    return usuaria;
+};