Update Doc to enable easy setup with React Admin

[AlbericTrancart]

Hello!

I'm starting a project with Springboot and I'll need an admin. Having worked with React Admin before I'm happy this repo exists 😄

However when setting up the backend I am stuck while trying to write the controller and the doc don't seem up to date.

For instance the code example doesn't include the items listed in the list under it (ControllerAdvice and CustomSpecification). Also, there is a typo QueryParamExtracter => QueryParamExtractor

I'm trying to work through this by reading the source code, I'll happily make a PR to update the doc once I've successfully setup the admin 🙂

(and I'll volunteer to submit other PRs too if necessary)

[zifnab87]

Hi,
Thanks for the feedback - It's been a while since I used this repo as a library - I will need help when it is mature enough to put it in mvnrepository. For now I made a few corrections in the Readme according to your suggestions (typo and controller advice clarification).

CustomSpecification is being used internally in FilterService so I don't think you need to add it anywhere explicitly. Keep in mind that this project was initially created for use with admin-on-rest so its dataProvider/adapter will probably need to be changed so that it keeps working with spring-boot-api-helpers.. I believe the best thing we could do to help you and the rest of the community is update this project:
https://github.com/zifnab87/react-admin-demo-java-rest - I just did a lot of changes/updates in that old repo:

• replaced admin-on-rest with react-admin
• bumped java 8 to java 11
• bumped spring boot packages version
• changed the code accordingly to the latest spring-boot-api-helpers

there is need for change in the react-admin demo code so that it uses the dataprovider (I have compatiblE boilerplate code for this - see below) and additional configuration so that it hits the java backend.

It seems data import has changed a lot and now it is being done through data-generator. There is need to import all those json files in the backend (it used to be a single file now they are multiple ones) and there might be need for extra endpoint implementations for delete and delete_many etc.

Any help is appreciated! I am sure we can work on this together too :)

// dataProvider.js
import {
    GET_LIST,
    GET_ONE,
    GET_MANY,
    GET_MANY_REFERENCE,
    CREATE,
    UPDATE,
    DELETE,
    DELETE_MANY,
    fetchUtils,
} from 'react-admin';
import { stringify } from 'query-string';
import { config } from './config/config';

const API_URL = config.baseUrl;
const HOST = config.apiHost;

/**
 * @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE'
 * @param {String} resource Name of the resource to fetch, e.g. 'posts'
 * @param {Object} params The Data Provider request params, depending on the type
 * @returns {Object} { url, options } The HTTP request parameters
 */

let keysContainingFilePaths = ['avatarPhotos', 'galleryPhotos'];
let referenceManyToOneKeys = {
    "wines": ["wineSupplier","wineColor","wineType", "wineDryness", "wineBottleVolume", 
            "wineSpecialType", "wineOrigin"]
}

let referenceManyToManyKeys = {
    "wines": ["varieties","foodCombinations"]
}

const convertDataProviderRequestToHTTP = (type, resource, params) => {
    switch (type) {
    case GET_LIST: {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            sort: JSON.stringify([field, order]),
            range: JSON.stringify([page - 1,perPage]),
            filter: JSON.stringify(params.filter),
        };
        return { url: `${API_URL}/${resource}?${stringify(query)}` };
    }
    case GET_ONE:
        return { url: `${API_URL}/${resource}/${params.id}` };
    case GET_MANY: {

        let objs = params.ids;
        let realIds = [];
        for (let obj of objs) {
            realIds.push(obj.id);
        }

        const query = {
            filter: JSON.stringify({id: realIds}),
        };

        return { url: `${API_URL}/${resource}?${stringify(query)}` };
    }
    case GET_MANY_REFERENCE: {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            sort: JSON.stringify([field, order]),
            range: JSON.stringify([page - 1 , perPage]),
            filter: JSON.stringify({ ...params.filter, [params.target]: params.id }),
        };
        return { url: `${API_URL}/${resource}?${stringify(query)}` };
    }
    case UPDATE:
        return {
            url: `${API_URL}/${resource}/${params.id}`,
            options: { method: 'PUT', body: JSON.stringify( upsertOneRequestHelper(params.data, keysContainingFilePaths, resource)) },
        };
    case CREATE:
        return {
            url: `${API_URL}/${resource}`,
            options: { method: 'POST', body: JSON.stringify( upsertOneRequestHelper(params.data, keysContainingFilePaths, resource)) },
        };
    case DELETE:
        return {
            url: `${API_URL}/${resource}/${params.id}`,
            options: { method: 'DELETE' },
        };
    case DELETE_MANY:
        return {
            url: `${API_URL}/${resource}/${params.ids[0]}`,
            options: { method: 'DELETE' },
        };
    default:
        throw new Error(`Unsupported fetch action type ${type}`);
    }
};

const upsertOneRequestHelper = (row, fileKeys, resource) => {
    let request = {};
    Object.keys(row).forEach(function(key) {
        request[key] = row[key];
    });
    return request;

}


const getOneRowResponseHelper = (row, fileKeys, rowInList, resource) => {
    let result = {};

   
    Object.keys(row).forEach(function(key) {
        result[key] = row[key];
    return result;
}


const prepareGetListResponse = (rows, resource) => {

    let result =  rows.map(function (row) {
        return getOneRowResponseHelper(row, keysContainingFilePaths, true, resource);
    });
    return result;
}

/**
 * @param {Object} response HTTP response from fetch()
 * @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE'
 * @param {String} resource Name of the resource to fetch, e.g. 'posts'
 * @param {Object} params The Data Provider request params, depending on the type
 * @returns {Object} Data Provider response
 */
const convertHTTPResponseToDataProvider = (response, type, resource, params) => {
    const { headers, json } = response;
    switch (type) {
       
        case GET_LIST:
        case GET_MANY:
            return {
                data: prepareGetListResponse(json.content.map(x => x), resource),
                total: parseInt(json.totalElements, 10)
            };
        case CREATE:
            return { data: { ...params.data, id: json.id } };
        default:
            return { data: getOneRowResponseHelper(json, keysContainingFilePaths, false, resource)};
    }
};

/**
 * @param {string} type Request type, e.g GET_LIST
 * @param {string} resource Resource name, e.g. "posts"
 * @param {Object} payload Request parameters. Depends on the request type
 * @returns {Promise} the Promise for response
 */
export default (type, resource, params) => {
    const { fetchJson } = fetchUtils;
    let { url, options } = convertDataProviderRequestToHTTP(type, resource, params);
    if (!options) {
        options = {};
    }

    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }

    let jwt_token = localStorage.getItem('jwt_token');
    options.headers.append('Authorization','Bearer ' + jwt_token);
    return fetchJson(url, options)
        .then(response => convertHTTPResponseToDataProvider(response, type, resource, params));
};

[danielsobrado]

Hi!

Do you have the code for authProvider that uses JWT?

I can see in the old repo that the authProvider is not integrated with JWT https://github.com/zifnab87/react-admin-demo-java-rest/blob/master/src/authProvider.ts

Thanks a lot!