js-web_app-immutable

basic App for front-end web applications

Cli

install web app for quick bootstrap cli

App

the App holds all your apps stores and plugins, your apps state is stored with immutable.js data structures

import { App } from "@nathanfaucett/web_app-immutable";
import config from "./config.json";

class YourApp extends App {
    constructor(config) {
        super(config);
    }
}

export default new YourApp(config);

Stores

stores are views into you apps state

import { List } from "immutable";
import app from "./app";

let ID = 0;

// uses immutable.fromJS internally to get initial state
const todos = app.createStore("todos", {
    list: []
});

todos.create = text => {
    let id = ID++;

    todos.updateState(state =>
        state.update("list", list => list.push(Map({ id: id, text: text })))
    );
};

todos.remove = id => {
    todos.updateState(prev => {
        return prev.update("list", list =>
            list.remove(list.findIndex(todo => todo.get("id") === id))
        );
    });
};

export default todos;

Components

import React from "react";
import connect from "@nathanfaucett/state-immutable-react";
import todos from "../stores/todos";
import app from "../app";
import Todo from "./Todo";

const todoListForm = app.createStore("todoListForm", {
    values: { text: "" },
    errors: { text: [] }
});

class TodoList extends React.Component {
    constructor(props) {
        super(props);

        this.form = app.createForm(
            {
                text: ({ onChange }) => ({
                    props: {
                        type: "text",
                        value: props.todoListForm.values.text,
                        onChange: e => onChange(e.target.value)
                    }
                })
            },
            {
                get: () => ({ ...this.props.todoListForm.values }),
                set: (errors, values) =>
                    todoListForm.setState({ errors, values })
            }
        );

        this.onDeleteTodo = id => {
            todos.remove(id);
        };
        this.onSubmit = e => {
            e.preventDefault();
            todos.create(this.props.todoListForm.values.text);
            this.form.reset();
        };
    }

    render() {
        const { values, errors } = this.props.todoListForm,
            fields = this.form.render(errors, values);

        return (
            <div className="TodoList">
                <form onSubmit={this.onSubmit}>
                    <input {...fields.text.props} />
                </form>
                <div>
                    {this.props.todos.list.map(todo => {
                        return (
                            <Todo
                                key={todo.id}
                                todo={todo}
                                onClick={this.onDeleteTodo}
                            />
                        );
                    })}
                </div>
            </div>
        );
    }
}

export default connect([todos, todoListForm])(TodoList);