@nathanfaucett/web_app

    0.1.22 • Public • Published

    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);

    Install

    npm i @nathanfaucett/web_app

    DownloadsWeekly Downloads

    1

    Version

    0.1.22

    License

    MIT

    Unpacked Size

    20.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • nathanfaucett