Eslist

Control data list

npm install eslist

Usage

Javascript

import eslist from 'eslist'

const users = eslist(list)

users() // [{ key, ... }, ...]

Typescript

import eslist, { Eslist } from 'eslist'

const users = eslist<ListInterface>(list)

// or

const users: Eslist<ListInterface> = eslist(list)

users() // [{ key, ... }, ...]

When initializing, a unique key is assigned to each item in the list. Eslist gives you the option to assign your own.

const users = eslist(list, data => ({
    key: data.id,
    data // required
}))

users() // [{ key: 1, ... }, ...]

Helper

They are additional help data that is applied to each item in the list.

const users = eslist(list, data => ({
    data, // required
    helper: { my_helper: 'any' }
}))

users.helper(key) // { my_helper: 'any' }

Any type of data is acceptable.

When adding new data it is also possible to assign it a helper.

users.set(1, { id: 1, name: 'Juan' }, false, { my_helper: 'other' })
users.add({ id: 7, name: 'Lucía' }, false, { my_helper: 'other' })

API and state

When initializing a listing, the data can be either never or added. The states that exist are:

• never
• added
• deleted
• setted
• updated

const users = eslist(list, data => ({
    key: data.id,
    data // required
}))                     // <-- never
users.add(data)         // <-- added
users.update(key, data) // <-- updated
users.delete(key)       // <-- deleted
users.set(key, data)    // <-- setted

If a data is not assigned a key when initializing, then it will take as state added.

const users = eslist(list) // <-- added

The result can be obtained from a mapping method. Iterates in all the data and returns you the state in which they are.

const users_added = eslist.mapping((data, state) => {
    if(state === 'added') return data
})

mapping works as a filter too, you can tell it what data you want it to return.

| Method | Description | Example | |---|---|------| | get | Obtains a data by its key | get(key) | | add | Add a new data to the list | add(data) | | update | Update a data by its id | update(key, data) | | delete | Delete a data by its id | delete(key) | | set | Enter a data with a custom key | set(key, data) | | each | List including its key for each item and helper | each((data, helper, index) => data) |

Pending

Pending data are ways to revert to your previous state if you retract. With this we can make the decision if we confirm the action or cancel.

const users = eslist([{ id: 1, name: 'Luis' }], data => ({
    key: data.id,
    data
}))
users.update(1, { name: 'Manuel' }, true) // we have to pass as the third parameter true 
users.get(1) // { key: '1', id: 1, name: 'Manuel' }

// in case you want to cancel 
users.cancel(1)
users.get(1) // { key: '1', id: 1, name: 'Luis' }
users.mapping((user, state) => state === 'updated' ? user : undefined).length // 0

// in case you want to confirm 
users.confirm(1)
users.get(1) // { key: '1', id: 1, name: 'Manuel' }
users.mapping((user, state) => state === 'updated' ? user : undefined).length // 1

It is applicable for add, update, delete and set

A pending state is not reflected in mapping but only in the others unless it is confirmed.

const users = eslist()
users.add({ name: 'Ana' }, true)
users().length // [{ key, name: 'Ana' }]
users.mapping((user, state) => state === 'added' ? user : undefined).length // 0

When a pending update is performed, eslist performs a backup before updating. This backup is not mutable and will only exist until the update has been confirmed or canceled. To obtain this backup, the frozen (key) method is used.

const users = eslist([{ id: 1, name: 'Luis' }], data => ({
    key: data.id,
    data
}))
users.update(1, { name: 'Manuel' }, true)
users.get(1) // { key: '1', id: 1, name: 'Manuel' }
users.frozen(1) // { key: '1', id: 1, name: 'Luis' }
users.confirm(1)
users.frozen(1) // null

Portal

It is a way of replacing the current data with a new list but avoiding losing the state of that data.

const users = eslist([ { id: 1, name: 'Liliana' } ])
users() // [ { key, id: 1, name: 'Liliana' } ]
users([{ id: 5, name: 'Michael' }])  // [{ key, id: 5, name: 'Michael' }]
users.mapping((user, state) => state === 'added' ? user : undefined).length // 2

In a portal you can also configure your key and initial helper.

const users = eslist([ { id: 1, name: 'Liliana' } ])
users() // [ { key, id: 1, name: 'Liliana' } ]
users([{ id: 5, name: 'Michael' }], user => ({
    key: user.id,
    data: user,
    helper: 'mode1'
}))  // [{ key: '5', id: 5, name: 'Michael' }]

Initial

If you want to initialize, you can use the init method. This will take care of cleaning everything. You can also initialize with new data.

const users = eslist([ { id: 1, name: 'Liliana' } ])
users.init()

// with data.

users.init([ { id: 9, name: 'manuel' } ], user => ({
    key: user.id,
    data: user,
    helper: 'MODE1'
}))