RisingStack / react-easy-state / 660

Build # 660

Build Type

circleci

Committed by GitHub

Commit Message

build(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/pokedex

Pull Request Pull Request #418: build(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/pokedex

Run Details

87 of 97 branches covered (89.69%)

Branch coverage included in aggregate %.

196 of 199 relevant lines covered (98.49%)

42.14 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

100.0

/examples/todo-mvc/src/App.jsx

import React from 'react';
import classNames from 'classnames';
import { view } from '@risingstack/react-easy-state';
import TodoItem from './TodoItem';
import todos from './todosStore';

// these functions mutate the global store
// abstracting away events and view specific details here is a nice practice
// the global store methods should only handle pure data
function changeFilter(ev) {
  todos.filter = ev.target.value;
}

// create a todo on Enter key press
function createTodo(ev) {
  if (ev.keyCode === 13 && ev.target.value) {
    todos.create(ev.target.value);
    ev.target.value = '';
  }
}

// this is re-rendered whenever the relevant parts of the used data stores change
export default view(() => {
  const {
    isEmpty,
    hasCompleted,
    allCompleted,
    active,
    filter,
    toggleAll,
    clearCompleted,
  } = todos;

  const todosClass = classNames({ selected: filter === 'all' });
  const completedClass = classNames({
    selected: filter === 'completed',
  });
  const activeClass = classNames({ selected: filter === 'active' });

  return (
    <div className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input
          onKeyUp={createTodo}
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
        />
      </header>

      {!isEmpty && (
        <section className="main">
          <input
            className="toggle-all"
            type="checkbox"
            checked={allCompleted}
            onChange={toggleAll}
          />
          <label htmlFor="toggle-all">Mark all as complete</label>
          <ul className="todo-list">
            {todos[filter].map((todo, idx) => (
              <TodoItem {...todo} id={idx} key={idx} />
            ))}
          </ul>
        </section>
      )}

      {!isEmpty && (
        <footer className="footer">
          <span className="todo-count">
            {active.length} items left
          </span>
          <div className="filters">
            <button
              className={todosClass}
              value="all"
              onClick={changeFilter}
            >
              All
            </button>
            <button
              className={activeClass}
              value="active"
              onClick={changeFilter}
            >
              Active
            </button>
            <button
              className={completedClass}
              value="completed"
              onClick={changeFilter}
            >
              Completed
            </button>
          </div>
          {hasCompleted && (
            <button
              className="clear-completed"
              onClick={clearCompleted}
            >
              Clear completed
            </button>
          )}
        </footer>
      )}
    </div>
  );
});

1	import React from 'react';
2	import classNames from 'classnames';
3	import { view } from '@risingstack/react-easy-state';
4	import TodoItem from './TodoItem';
5	import todos from './todosStore';
6
7	// these functions mutate the global store
8	// abstracting away events and view specific details here is a nice practice
9	// the global store methods should only handle pure data
10	function changeFilter(ev) {
11	todos.filter = ev.target.value;	3✔
12	}
13
14	// create a todo on Enter key press
15	function createTodo(ev) {
16	if (ev.keyCode === 13 && ev.target.value) {	4✔
17	todos.create(ev.target.value);	3✔
18	ev.target.value = '';	3✔
19	}
20	}
21
22	// this is re-rendered whenever the relevant parts of the used data stores change
23	export default view(() => {
24	const {
25	isEmpty,
26	hasCompleted,
27	allCompleted,
28	active,
29	filter,
30	toggleAll,
31	clearCompleted,
32	} = todos;	28✔
33
34	const todosClass = classNames({ selected: filter === 'all' });	28✔
35	const completedClass = classNames({	28✔
36	selected: filter === 'completed',
37	});
38	const activeClass = classNames({ selected: filter === 'active' });	28✔
39
40	return (	28✔
41	<div className="todoapp">
42	<header className="header">
43	<h1>todos</h1>
44	<input
45	onKeyUp={createTodo}
46	className="new-todo"
47	placeholder="What needs to be done?"
48	autoFocus
49	/>
50	</header>
51
52	{!isEmpty && (	54✔
53	<section className="main">
54	<input
55	className="toggle-all"
56	type="checkbox"
57	checked={allCompleted}
58	onChange={toggleAll}
59	/>
60	<label htmlFor="toggle-all">Mark all as complete</label>
61	<ul className="todo-list">
62	{todos[filter].map((todo, idx) => (
63	<TodoItem {...todo} id={idx} key={idx} />	56✔
64	))}
65	</ul>
66	</section>
67	)}
68
69	{!isEmpty && (	54✔
70	<footer className="footer">
71	<span className="todo-count">
72	{active.length} items left
73	</span>
74	<div className="filters">
75	<button
76	className={todosClass}
77	value="all"
78	onClick={changeFilter}
79	>
80	All
81	</button>
82	<button
83	className={activeClass}
84	value="active"
85	onClick={changeFilter}
86	>
87	Active
88	</button>
89	<button
90	className={completedClass}
91	value="completed"
92	onClick={changeFilter}
93	>
94	Completed
95	</button>
96	</div>
97	{hasCompleted && (	40✔
98	<button
99	className="clear-completed"
100	onClick={clearCompleted}
101	>
102	Clear completed
103	</button>
104	)}
105	</footer>
106	)}
107	</div>
108	);
109	});

RisingStack / react-easy-state / 660

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous