const resources = new Resources()
const dataSource = resources.create("/api/users")

dataSource.fetch();  // GET /api/users
console.log(dataSource.data) // Response collections

const item = dataSource.get(1) // Get item by primary 
item.name = "foo"

// Sync changes 
dataSource.sync()
// PATCH /api/users/1
// Body: {"name":"foo"}

import {Table, Button} from 'antd'
import {observer} from "mobx-react-lite"
const useDataSource = (resource) => {
    /// Request restful resource
    return useMemo(() => (new Resources()).createDataSource(`/api/${resource}`), []);
    
    // Array data source
    // return useMemo(() => (new Resources()).createDataSource([
    //     {id: 1, name: 'Tom', score: 3},
    //     {id: 2, name: 'Jerry', score: 4},
    // ]), []);
}
const App = observer(() => {
    const ds = useDataSource("users")
    const handleDelete = (row) => {
        ds.remove(row)
        ds.sync() // Sync data source changes, request `DELETE /users/{id}`
    }
    const handleIncrScore = (row) => {
        row.score++
        ds.sync() // Sync data source changes, request `PATCH /users/{id}`, body: `{"score": 3}`
    }
    return (
        <Table
            rowKey={ds.primary}
            dataSource={ds.data}
            loading={ds.loading}
            columns={[
                {
                    dataIndex: 'id',
                    title: '#',
                },
                {
                    dataIndex: 'name',
                    title: 'Name',
                },
                {
                    dataIndex: 'score',
                    title: 'score',
                },
                {
                    render: (row) => {
                        return <Button onClick={() => handleIncrScore(row)}>Incr</Button>
                        return <Button loading={ds.loadings.syncing} onClick={() => handleDelete(row)}>Delete</Button>
                    }
                },
            ]}
        />
    )
})