JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

endpoint users:

url: /users
method: GET
params:
	page
		- description: the current page of results
		- value type:
			- Integers positive numbers
			- Cannot be 0
			- Can be null or undefined (default value = 1)

	per_page:
		- description: the amount of results
		- value type:
			- Integers positive numbers
			- Cannot be 0
			- Can be null or undefined (default value = 15)
		
	sort_column:
		- description: the order of results based on a result column name
		- value type:
			- Text string
			- Can be null or undefined

	search:
		- description: a text string to filter all the results
		- value type:
			- Text string
			- Can be null or undefined

	search_column:
		- description: a text string filter that affects specific columns to filter all the results
		- value type:
			- Text string
			- Stringified array with format: [columName1, columnSearh1, columName2, columnSearh2, ...]
			- Can be null or undefined

	status:
		- description: numbers to filter results by 'status' column
		- value type:
			- Numbers separated with commas
			- Can be null or undefined
url_sample:
	/users?page=2&per_page=20&sort_column=names&search=louis&search_column=["names","flores","role","supervisor"]&status=0,3

JavaScript

// ----------------------------------------------------------------
// FRONTEND -------------------------------------------------------
// ----------------------------------------------------------------

const params = {
	page: 3,
    per_page: 20,
    sort_column: 'names',
	search: 'jane',
    search_column: {
    	names: 'flores',
        role: 'supervisor'
    },
    status: [0, 3]
};

const encodedParams = btoa(JSON.stringify(params));
const url = '/users?q=' + encodedParams;

console.log(url)

/* fetch(url) */

// response structure
const response = {
	total_pages: 31,
    total_results: 1803,
	data: [
    	{
        	id: 3454,
            names: 'Jane Doe',
            mail: '[email protected]',
            role: 'Supervisor',
            charge: 'Lorem Ipsum',
            status: 0
        },
        {
        	id: 345554,
            names: 'john Smnith',
            mail: '[email protected]',
            role: 'Supervisor',
            charge: 'Lorem Ipsum',
            status: 3
        }
    ]
};



// ----------------------------------------------------------------
// BACKEND --------------------------------------------------------
// ----------------------------------------------------------------

/* route '/users' */
const decodedParams = JSON.parse(atob(encodedParams)); // params.q
// do magic!