@artifact-project/easystate

EasyState

Ой, всё, да, это очередное хрен знает что ;] нужно просто чтобы было и не спорьте!

npm i --save easystate

Usage

import { createEasyState } from 'easystate';
import { EasyComponent } from 'easystate/react';

const appState = createEasyState({
    counter: {
        value: 0,
    },
});

function Counter(props: {value: number}) {
    return <span>{props.value}</span>;
}

<div>
    <EasyComponent is={Counter} state={appState} mapToProps={(s) => s.counter} />
    <button onClick={() => { appState.counter.value += 1; }}>+</button>
</div>

<EasyScope
    active={ false }
    state={ appState }
    view={ ... }
    controller={ ... }
/>

<EasyScope.Manager
    state={ appState }
    initialActiveScope={ appState.step }
    onActivateScopeChange={ (state) => { appState.step = state; } }
>
    <EasyScope
        name="login"
        view={ ... }
        controller={ ... }
        fallback={ <Loading/> }
    />
</EasyScope.Manager>

const appState = createEasyState({
    users: {
        list: createEasyStateAsync([] as User),
        /*{
            state: User[], // данные
            ready: boolean, // готово к использованию
            expired: boolean, // данные устарели
            interactive: boolean, // готово, но с данными идет какая работа
            error: Error | null,
        }*/
    },
});

const fetchUsers = createEasyFetch('users.list', async (users: User[], offset: number, limit: number) => {
    const json = await easy.get('api/v1/users/list', {offset, limit});
    return json.body.list;
});

const removeUser = createEasyMutation('users.list.remove', async (users: User[], user: User) => {
    users.state = easyDelete(users.state, user);
    await easy.post('api/v1/users/remove', {id: user.id});
});


function List(props) {
    const {
        offset,
        limit,
        users, // appState.users.list
    } = props;
    const users = fetchUsers(users, offset, limit);

    if (!users.ready) {
        return <EasyFetchStatus
            value={users}
            loading={Loading}
            error={Err}
        />;
    }

    return <>
        {users.interactive && <Spinner title="Синхронизация"/>}

        <ul>{users.state.map(item
            <li
                key={ item.id }
                onClick={ () => removeUser(users, item) }
            >
                {item.value}
            </li>
        )}</ul>
    </>;
}