JSFiddle - React, Tailwind, and code Playground

by Sergey Volkov

HTML

<script src="https://cdn.jsdelivr.net/npm/html-logger@latest/dist/html-logger.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kinka@latest/dist/kinka.min.js"></script>

JavaScript 1.7

// only needed for logs in HTML
let logger = new HtmlLogger({name: "Test App"})
logger.init(true)


/**
	Big thanks to the ReqRes for open api
*/
const api = kinka.create({
	baseURL: 'https://reqres.in/api',
})


const getUsers = async (options = {}) => {
  const { err, isSuccess, data, status } = await api.get('/users', options)
  if(isSuccess){
  	logger.success(`status: ${status},`,'data: page: ', data.page, ', total:', data.total)
  }else{
  	logger.error(`status: ${status},`,'err:', err)
  }
}

const updateUser = async (userId, userData) => {
	const { err, data } = await api.put(`/users/${userId}`, userData)
	if(!err){
  	logger.success(`user with id ${userId} has been updated`, userData)
  }
}

const deleteUserById = async (id) => {
	const { err, data } = await api.delete(`/users/${id}`)
  if(err){
  	logger.error(`user with id ${id} can not been deleted, reason : `, err)
  }else{
  	logger.success(`user with id ${id} has been deleted, response : `, data)
  }
}

const createUser = async (userData) => {
	const { err, data } = await api.post(`/users`, userData)
  if(!err){
  	logger.success(`user with id ${data.id} has been created`, data)
  }
}

getUsers({ query: { page: 1 }, cancelToken: 'getUsersKey'}) // will be canceled
getUsers({ query: { page: 2 }}) // will returns 200 , isSuccess will be true
getUsers({ query: { page: 3 }, cancelToken: 'getUsersKey' }) // will returns 200 , isSuccess will be true

updateUser(2, {
    name: "morpheus",
    job: "zion resident"
}) // success

createUser({
    name: "morpheus",
    job: "zion resident"
})

deleteUserById(100) // success