├── README.md
├── chapter-03-mvp
    ├── .babelrc
    ├── .eslintrc
    ├── .gitignore
    ├── index.js
    ├── package.json
    ├── public
    │   ├── css
    │   │   ├── normalize.css
    │   │   └── resets.css
    │   └── index.html
    ├── source
    │   ├── components
    │   │   ├── App
    │   │   │   ├── index.jsx
    │   │   │   └── style.js
    │   │   ├── NoteDetail
    │   │   │   ├── index.jsx
    │   │   │   └── style.js
    │   │   └── NotesList
    │   │   │   ├── index.jsx
    │   │   │   └── style.js
    │   ├── index.js
    │   └── store
    │   │   ├── actions.js
    │   │   ├── actions.test.js
    │   │   ├── index.js
    │   │   ├── reducers.js
    │   │   ├── reducers.test.js
    │   │   ├── selectors.js
    │   │   ├── selectors.test.js
    │   │   └── testUtils.js
    └── webpack.config.js
├── chapter-04-syncing-with-server
    ├── .babelrc
    ├── .eslintrc
    ├── .gitignore
    ├── index.js
    ├── package.json
    ├── public
    │   ├── css
    │   │   ├── normalize.css
    │   │   └── resets.css
    │   └── index.html
    ├── source
    │   ├── components
    │   │   ├── App
    │   │   │   ├── index.jsx
    │   │   │   └── style.js
    │   │   ├── NoteDetail
    │   │   │   ├── index.jsx
    │   │   │   └── style.js
    │   │   └── NotesList
    │   │   │   ├── index.jsx
    │   │   │   └── style.js
    │   ├── index.js
    │   ├── store
    │   │   ├── actionUtils.js
    │   │   ├── actions.js
    │   │   ├── actions.test.js
    │   │   ├── index.js
    │   │   ├── reducers.js
    │   │   ├── reducers.test.js
    │   │   ├── selectors.js
    │   │   ├── selectors.test.js
    │   │   └── testUtils.js
    │   └── utils
    │   │   ├── api.js
    │   │   ├── api.test.js
    │   │   └── testUtils.js
    └── webpack.config.js
└── chapter-05-request-state
    ├── .babelrc
    ├── .eslintrc
    ├── .gitignore
    ├── index.js
    ├── package.json
    ├── public
        ├── css
        │   ├── animations.css
        │   ├── normalize.css
        │   └── resets.css
        └── index.html
    ├── source
        ├── api
        │   ├── index.js
        │   ├── test.js
        │   └── testUtils.js
        ├── components
        │   ├── App
        │   │   ├── index.jsx
        │   │   └── style.js
        │   ├── Nav
        │   │   ├── index.jsx
        │   │   └── styles.js
        │   ├── NoteDetail
        │   │   ├── index.jsx
        │   │   └── style.js
        │   ├── NotesList
        │   │   ├── index.jsx
        │   │   └── style.js
        │   └── Toasts
        │   │   ├── index.jsx
        │   │   └── styles.js
        ├── index.js
        └── store
        │   ├── actions.js
        │   ├── actions.test.js
        │   ├── index.js
        │   ├── reducers.js
        │   ├── reducers.test.js
        │   ├── selectors.js
        │   ├── selectors.test.js
        │   └── testUtils.js
    └── webpack.config.js


/README.md:
--------------------------------------------------------------------------------
1 | # Developing a Redux Edge
2 | 
3 | This repo holds supplementary material for the **Developing a Redux Edge** book.
4 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "react",
5 |     "stage-2"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "node": true,
 6 |     "es6": true
 7 |   },
 8 |   "ecmaFeatures": {
 9 |     "jsx": true,
10 |     "modules": true,
11 |     "spread": true,
12 |     "experimentalObjectRestSpread": true
13 |   },
14 |   "plugins": [
15 |     "react"
16 |   ],
17 |   "rules": {
18 |     "array-bracket-spacing": ["error", "always"],
19 |     "block-spacing": "error",
20 |     "comma-spacing": ["error", {"before": false, "after": true}],
21 |     "eqeqeq": ["error", "smart"],
22 |     "no-cond-assign": "error",
23 |     "no-const-assign": "error",
24 |     "no-dupe-args": "error",
25 |     "no-dupe-class-members": "error",
26 |     "no-dupe-keys": "error",
27 |     "no-duplicate-case": "error",
28 |     "no-empty": "error",
29 |     "no-eval": "error",
30 |     "no-extend-native": "error",
31 |     "no-extra-semi": "error",
32 |     "no-func-assign": "error",
33 |     "no-invalid-this": "error",
34 |     "no-irregular-whitespace": "error",
35 |     "no-lone-blocks": "error",
36 |     "no-mixed-spaces-and-tabs": "error",
37 |     "no-sparse-arrays": "error",
38 |     "no-undef": "error",
39 |     "no-use-before-define": "error",
40 |     "no-var": "error",
41 |     "object-shorthand": "error",
42 |     "prefer-arrow-callback": "error",
43 |     "react/jsx-indent-props": ["error", 2],
44 |     "react/jsx-no-duplicate-props": "error",
45 |     "react/jsx-no-undef": "error",
46 |     "react/jsx-uses-react": "error",
47 |     "react/jsx-uses-vars": "error",
48 |     "react/no-direct-mutation-state": "error",
49 |     "react/no-unknown-property": "error",
50 |     "react/self-closing-comp": "error",
51 |     "react/wrap-multilines": "error",
52 |     "arrow-parens": ["warn", "always"],
53 |     "arrow-spacing": "warn",
54 |     "brace-style": ["warn", "1tbs"],
55 |     "comma-dangle": ["warn", "always-multiline"],
56 |     "curly": ["warn", "multi-line"],
57 |     "dot-location": ["warn", "property"],
58 |     "jsx-quotes": ["warn", "prefer-double"],
59 |     "no-console": "warn",
60 |     "no-constant-condition": "warn",
61 |     "no-fallthrough": "warn",
62 |     "no-labels": "warn",
63 |     "no-multiple-empty-lines": ["warn", {"max": 1}],
64 |     "no-trailing-spaces": "warn",
65 |     "no-underscore-dangle": "warn",
66 |     "no-unneeded-ternary": "warn",
67 |     "no-unused-vars": ["warn", {"varsIgnorePattern": "^styles$"}],
68 |     "object-curly-spacing": ["warn", "always"],
69 |     "prefer-const": "warn",
70 |     "prefer-spread": "warn",
71 |     "prefer-template": "warn",
72 |     "react/jsx-closing-bracket-location": ["warn", {"selfClosing": "props-aligned", "nonEmpty": "props-aligned"}],
73 |     "react/jsx-curly-spacing": ["warn", "never"],
74 |     "react/no-danger": "warn",
75 |     "react/prop-types": "warn",
76 |     "semi": ["warn", "always"]
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/js
3 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const express = require('express');
 3 | const app = express();
 4 | 
 5 | app.use(express.static('public'));
 6 | 
 7 | app.get('*', (req, res) => {
 8 |   res.sendFile(path.resolve(__dirname, 'public/index.html'));
 9 | });
10 | 
11 | app.listen(3000, () => {
12 |   //eslint-disable-next-line no-console
13 |   console.log('`Developing a Redux Edge` notes app listening on port 3000!');
14 | });
15 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dare-notes-app",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "scripts": {
 6 |     "lint": "eslint 'source/**'",
 7 |     "test": "tape --require babel-register source/**/*.test.js",
 8 |     "prestart": "webpack",
 9 |     "start": "node index"
10 |   },
11 |   "author": "Artur Muller <me@arturmuller.com> (http://arturmuller.com)",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel-eslint": "^6.0.0",
15 |     "babel-register": "^6.9.0",
16 |     "eslint": "^2.12.0",
17 |     "eslint-plugin-react": "^4.3.0",
18 |     "tape": "^4.5.1"
19 |   },
20 |   "dependencies": {
21 |     "babel-core": "^6.7.6",
22 |     "babel-loader": "^6.2.4",
23 |     "babel-preset-es2015": "^6.6.0",
24 |     "babel-preset-react": "^6.5.0",
25 |     "babel-preset-stage-2": "^6.5.0",
26 |     "express": "^4.13.4",
27 |     "ramda": "^0.21.0",
28 |     "react": "^15.0.0",
29 |     "react-dom": "^15.0.0",
30 |     "react-redux": "^4.0.0",
31 |     "redux": "^3.0.0",
32 |     "uuid": "^2.0.2",
33 |     "webpack": "^1.12.2"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/public/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /**
  4 |  * 1. Change the default font family in all browsers (opinionated).
  5 |  * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
  6 |  */
  7 | 
  8 | html {
  9 |   font-family: sans-serif; /* 1 */
 10 |   -ms-text-size-adjust: 100%; /* 2 */
 11 |   -webkit-text-size-adjust: 100%; /* 2 */
 12 | }
 13 | 
 14 | /**
 15 |  * Remove the margin in all browsers (opinionated).
 16 |  */
 17 | 
 18 | body {
 19 |   margin: 0;
 20 | }
 21 | 
 22 | /* HTML5 display definitions
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Add the correct display in IE 9-.
 27 |  * 1. Add the correct display in Edge, IE, and Firefox.
 28 |  * 2. Add the correct display in IE.
 29 |  */
 30 | 
 31 | article,
 32 | aside,
 33 | details, /* 1 */
 34 | figcaption,
 35 | figure,
 36 | footer,
 37 | header,
 38 | main, /* 2 */
 39 | menu,
 40 | nav,
 41 | section,
 42 | summary { /* 1 */
 43 |   display: block;
 44 | }
 45 | 
 46 | /**
 47 |  * Add the correct display in IE 9-.
 48 |  */
 49 | 
 50 | audio,
 51 | canvas,
 52 | progress,
 53 | video {
 54 |   display: inline-block;
 55 | }
 56 | 
 57 | /**
 58 |  * Add the correct display in iOS 4-7.
 59 |  */
 60 | 
 61 | audio:not([controls]) {
 62 |   display: none;
 63 |   height: 0;
 64 | }
 65 | 
 66 | /**
 67 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 68 |  */
 69 | 
 70 | progress {
 71 |   vertical-align: baseline;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct display in IE 10-.
 76 |  * 1. Add the correct display in IE.
 77 |  */
 78 | 
 79 | template, /* 1 */
 80 | [hidden] {
 81 |   display: none;
 82 | }
 83 | 
 84 | /* Links
 85 |    ========================================================================== */
 86 | 
 87 | /**
 88 |  * 1. Remove the gray background on active links in IE 10.
 89 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 90 |  */
 91 | 
 92 | a {
 93 |   background-color: transparent; /* 1 */
 94 |   -webkit-text-decoration-skip: objects; /* 2 */
 95 | }
 96 | 
 97 | /**
 98 |  * Remove the outline on focused links when they are also active or hovered
 99 |  * in all browsers (opinionated).
100 |  */
101 | 
102 | a:active,
103 | a:hover {
104 |   outline-width: 0;
105 | }
106 | 
107 | /* Text-level semantics
108 |    ========================================================================== */
109 | 
110 | /**
111 |  * 1. Remove the bottom border in Firefox 39-.
112 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
113 |  */
114 | 
115 | abbr[title] {
116 |   border-bottom: none; /* 1 */
117 |   text-decoration: underline; /* 2 */
118 |   text-decoration: underline dotted; /* 2 */
119 | }
120 | 
121 | /**
122 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
123 |  */
124 | 
125 | b,
126 | strong {
127 |   font-weight: inherit;
128 | }
129 | 
130 | /**
131 |  * Add the correct font weight in Chrome, Edge, and Safari.
132 |  */
133 | 
134 | b,
135 | strong {
136 |   font-weight: bolder;
137 | }
138 | 
139 | /**
140 |  * Add the correct font style in Android 4.3-.
141 |  */
142 | 
143 | dfn {
144 |   font-style: italic;
145 | }
146 | 
147 | /**
148 |  * Correct the font size and margin on `h1` elements within `section` and
149 |  * `article` contexts in Chrome, Firefox, and Safari.
150 |  */
151 | 
152 | h1 {
153 |   font-size: 2em;
154 |   margin: 0.67em 0;
155 | }
156 | 
157 | /**
158 |  * Add the correct background and color in IE 9-.
159 |  */
160 | 
161 | mark {
162 |   background-color: #ff0;
163 |   color: #000;
164 | }
165 | 
166 | /**
167 |  * Add the correct font size in all browsers.
168 |  */
169 | 
170 | small {
171 |   font-size: 80%;
172 | }
173 | 
174 | /**
175 |  * Prevent `sub` and `sup` elements from affecting the line height in
176 |  * all browsers.
177 |  */
178 | 
179 | sub,
180 | sup {
181 |   font-size: 75%;
182 |   line-height: 0;
183 |   position: relative;
184 |   vertical-align: baseline;
185 | }
186 | 
187 | sub {
188 |   bottom: -0.25em;
189 | }
190 | 
191 | sup {
192 |   top: -0.5em;
193 | }
194 | 
195 | /* Embedded content
196 |    ========================================================================== */
197 | 
198 | /**
199 |  * Remove the border on images inside links in IE 10-.
200 |  */
201 | 
202 | img {
203 |   border-style: none;
204 | }
205 | 
206 | /**
207 |  * Hide the overflow in IE.
208 |  */
209 | 
210 | svg:not(:root) {
211 |   overflow: hidden;
212 | }
213 | 
214 | /* Grouping content
215 |    ========================================================================== */
216 | 
217 | /**
218 |  * 1. Correct the inheritance and scaling of font size in all browsers.
219 |  * 2. Correct the odd `em` font sizing in all browsers.
220 |  */
221 | 
222 | code,
223 | kbd,
224 | pre,
225 | samp {
226 |   font-family: monospace, monospace; /* 1 */
227 |   font-size: 1em; /* 2 */
228 | }
229 | 
230 | /**
231 |  * Add the correct margin in IE 8.
232 |  */
233 | 
234 | figure {
235 |   margin: 1em 40px;
236 | }
237 | 
238 | /**
239 |  * 1. Add the correct box sizing in Firefox.
240 |  * 2. Show the overflow in Edge and IE.
241 |  */
242 | 
243 | hr {
244 |   box-sizing: content-box; /* 1 */
245 |   height: 0; /* 1 */
246 |   overflow: visible; /* 2 */
247 | }
248 | 
249 | /* Forms
250 |    ========================================================================== */
251 | 
252 | /**
253 |  * 1. Change font properties to `inherit` in all browsers (opinionated).
254 |  * 2. Remove the margin in Firefox and Safari.
255 |  */
256 | 
257 | button,
258 | input,
259 | select,
260 | textarea {
261 |   font: inherit; /* 1 */
262 |   margin: 0; /* 2 */
263 | }
264 | 
265 | /**
266 |  * Restore the font weight unset by the previous rule.
267 |  */
268 | 
269 | optgroup {
270 |   font-weight: bold;
271 | }
272 | 
273 | /**
274 |  * Show the overflow in IE.
275 |  * 1. Show the overflow in Edge.
276 |  */
277 | 
278 | button,
279 | input { /* 1 */
280 |   overflow: visible;
281 | }
282 | 
283 | /**
284 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
285 |  * 1. Remove the inheritance of text transform in Firefox.
286 |  */
287 | 
288 | button,
289 | select { /* 1 */
290 |   text-transform: none;
291 | }
292 | 
293 | /**
294 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
295 |  *    controls in Android 4.
296 |  * 2. Correct the inability to style clickable types in iOS and Safari.
297 |  */
298 | 
299 | button,
300 | html [type="button"], /* 1 */
301 | [type="reset"],
302 | [type="submit"] {
303 |   -webkit-appearance: button; /* 2 */
304 | }
305 | 
306 | /**
307 |  * Remove the inner border and padding in Firefox.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | [type="button"]::-moz-focus-inner,
312 | [type="reset"]::-moz-focus-inner,
313 | [type="submit"]::-moz-focus-inner {
314 |   border-style: none;
315 |   padding: 0;
316 | }
317 | 
318 | /**
319 |  * Restore the focus styles unset by the previous rule.
320 |  */
321 | 
322 | button:-moz-focusring,
323 | [type="button"]:-moz-focusring,
324 | [type="reset"]:-moz-focusring,
325 | [type="submit"]:-moz-focusring {
326 |   outline: 1px dotted ButtonText;
327 | }
328 | 
329 | /**
330 |  * Change the border, margin, and padding in all browsers (opinionated).
331 |  */
332 | 
333 | fieldset {
334 |   border: 1px solid #c0c0c0;
335 |   margin: 0 2px;
336 |   padding: 0.35em 0.625em 0.75em;
337 | }
338 | 
339 | /**
340 |  * 1. Correct the text wrapping in Edge and IE.
341 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
342 |  * 3. Remove the padding so developers are not caught out when they zero out
343 |  *    `fieldset` elements in all browsers.
344 |  */
345 | 
346 | legend {
347 |   box-sizing: border-box; /* 1 */
348 |   color: inherit; /* 2 */
349 |   display: table; /* 1 */
350 |   max-width: 100%; /* 1 */
351 |   padding: 0; /* 3 */
352 |   white-space: normal; /* 1 */
353 | }
354 | 
355 | /**
356 |  * Remove the default vertical scrollbar in IE.
357 |  */
358 | 
359 | textarea {
360 |   overflow: auto;
361 | }
362 | 
363 | /**
364 |  * 1. Add the correct box sizing in IE 10-.
365 |  * 2. Remove the padding in IE 10-.
366 |  */
367 | 
368 | [type="checkbox"],
369 | [type="radio"] {
370 |   box-sizing: border-box; /* 1 */
371 |   padding: 0; /* 2 */
372 | }
373 | 
374 | /**
375 |  * Correct the cursor style of increment and decrement buttons in Chrome.
376 |  */
377 | 
378 | [type="number"]::-webkit-inner-spin-button,
379 | [type="number"]::-webkit-outer-spin-button {
380 |   height: auto;
381 | }
382 | 
383 | /**
384 |  * 1. Correct the odd appearance in Chrome and Safari.
385 |  * 2. Correct the outline style in Safari.
386 |  */
387 | 
388 | [type="search"] {
389 |   -webkit-appearance: textfield; /* 1 */
390 |   outline-offset: -2px; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
395 |  */
396 | 
397 | [type="search"]::-webkit-search-cancel-button,
398 | [type="search"]::-webkit-search-decoration {
399 |   -webkit-appearance: none;
400 | }
401 | 
402 | /**
403 |  * Correct the text style of placeholders in Chrome, Edge, and Safari.
404 |  */
405 | 
406 | ::-webkit-input-placeholder {
407 |   color: inherit;
408 |   opacity: 0.54;
409 | }
410 | 
411 | /**
412 |  * 1. Correct the inability to style clickable types in iOS and Safari.
413 |  * 2. Change font properties to `inherit` in Safari.
414 |  */
415 | 
416 | ::-webkit-file-upload-button {
417 |   -webkit-appearance: button; /* 1 */
418 |   font: inherit; /* 2 */
419 | }
420 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/public/css/resets.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html {
 6 |   font-family: Verdana, sans-serif;
 7 |   font-size: 15px;
 8 | }
 9 | 
10 | h1, h2, h3, h4, h5, h6, p, button, textarea {
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | 
15 | a, button, textarea {
16 |   display: block;
17 |   outline: none;
18 | }
19 | 
20 | button, textarea {
21 |   border: none;
22 |   background-color: transparent;
23 | }
24 | 
25 | textarea {
26 |   width: 100%;
27 |   resize: none;
28 | }
29 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Initial | Developing a Redux Edge</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" type="text/css" href="/css/normalize.css">
 8 |     <link rel="stylesheet" type="text/css" href="/css/resets.css">
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script src="/js/app.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/components/App/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import NotesList from '../NotesList';
 3 | import NoteDetail from '../NoteDetail';
 4 | import * as style from './style';
 5 | 
 6 | const App = () => (
 7 |   <div style={style.wrapper}>
 8 |     <NotesList />
 9 |     <NoteDetail />
10 |   </div>
11 | );
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/components/App/style.js:
--------------------------------------------------------------------------------
1 | export const wrapper = {
2 |   display: 'flex',
3 |   alignItems: 'center',
4 | };
5 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/components/NoteDetail/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { connect } from 'react-redux';
 3 | import * as actionCreators from '../../store/actions';
 4 | import * as selectors from '../../store/selectors';
 5 | import * as style from './style';
 6 | 
 7 | const NoteDetail = ({ note, removeNote, closeNote, updateNote }) => (
 8 |   <div style={style.wrapper}>
 9 |     {!note
10 |       ? <div style={style.blankslate}>No note is open</div>
11 |       : <div style={style.note}>
12 |           <div style={style.date}>
13 |             {new Date(note.timestamp).toLocaleString()}
14 |           </div>
15 |           <textarea
16 |             autoFocus
17 |             key={note.id}
18 |             style={style.textarea}
19 |             onChange={(event) => updateNote(event.target.value, note.id)}
20 |             placeholder="New note..."
21 |             value={note.content}
22 |             />
23 |           <div style={style.row}>
24 |             <button
25 |               onClick={() => removeNote(note.id)}
26 |               style={{ ...style.button, ...style.danger }}
27 |               >
28 |               Remove
29 |             </button>
30 |             <button
31 |               onClick={closeNote}
32 |               style={style.button}
33 |               >
34 |               Close
35 |             </button>
36 |           </div>
37 |         </div>
38 |     }
39 |   </div>
40 | );
41 | 
42 | NoteDetail.propTypes = {
43 |   note: PropTypes.shape({
44 |     id: PropTypes.string.isRequired,
45 |     content: PropTypes.string.isRequired,
46 |     timestamp: PropTypes.number.isRequired,
47 |   }),
48 |   updateNote: PropTypes.func.isRequired,
49 |   removeNote: PropTypes.func.isRequired,
50 |   closeNote: PropTypes.func.isRequired,
51 | };
52 | 
53 | const selector = (state) => ({
54 |   note: selectors.getNote(state, selectors.getOpenNoteId(state)),
55 | });
56 | 
57 | export default connect(selector, actionCreators)(NoteDetail);
58 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/components/NoteDetail/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   flexGrow: 1,
 3 |   height: '100vh',
 4 |   padding: '3rem',
 5 |   backgroundColor: '#fafafa',
 6 |   overflowY: 'scroll',
 7 | };
 8 | 
 9 | export const note = {
10 |   height: '100%',
11 |   display: 'flex',
12 |   flexDirection: 'column',
13 | };
14 | 
15 | export const date = {
16 |   fontSize: '0.75rem',
17 |   color: '#808080',
18 |   marginBottom: '2rem',
19 | };
20 | 
21 | export const textarea = {
22 |   flexGrow: 1,
23 |   lineHeight: 1.4,
24 | };
25 | 
26 | export const blankslate = {
27 |   padding: '5rem',
28 |   textAlign: 'center',
29 |   fontSize: '0.75rem',
30 |   color: '#808080',
31 | };
32 | 
33 | export const row = {
34 |   display: 'flex',
35 |   justifyContent: 'flex-end',
36 |   paddingTop: '1rem',
37 | };
38 | 
39 | export const button = {
40 |   padding: '0.8rem 1rem',
41 |   marginLeft: '0.8rem',
42 |   backgroundColor: "#f2f2f2",
43 | };
44 | 
45 | export const danger = {
46 |   color: '#ec8c8e',
47 | };
48 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/components/NotesList/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { connect } from 'react-redux';
 3 | import * as actionCreators from '../../store/actions';
 4 | import * as selectors from '../../store/selectors';
 5 | import * as style from './style';
 6 | 
 7 | const NotesList = ({ notes, openNoteId, addNote, openNote }) => (
 8 |   <div style={style.wrapper}>
 9 |     <button
10 |       style={style.addNoteButton}
11 |       onClick={() => addNote()}
12 |       >
13 |       Add Note
14 |     </button>
15 |     {(notes.length === 0)
16 |       ? <div style={style.blankslate}>No notes</div>
17 |       : notes.map((note) => (
18 |           <button
19 |             key={note.id}
20 |             style={(note.id === openNoteId)
21 |               ? { ...style.note, ...style.selected }
22 |               : style.note
23 |             }
24 |             onClick={() => openNote(note.id)}
25 |             >
26 |             {note.content === ''
27 |               ? <span style={style.newNoteLabel}>New note...</span>
28 |               : note.content
29 |             }
30 |           </button>
31 |       ))
32 |     }
33 |   </div>
34 | );
35 | 
36 | NotesList.propTypes = {
37 |   notes: PropTypes.arrayOf(PropTypes.shape({
38 |     content: PropTypes.string,
39 |     id: PropTypes.string.isRequired,
40 |   })).isRequired,
41 |   openNoteId: PropTypes.string,
42 |   addNote: PropTypes.func.isRequired,
43 |   openNote: PropTypes.func.isRequired,
44 | };
45 | 
46 | const selector = (state) => ({
47 |   notes: selectors.getNotes(state),
48 |   openNoteId: selectors.getOpenNoteId(state),
49 | });
50 | 
51 | export default connect(selector, actionCreators)(NotesList);
52 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/components/NotesList/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   width: '22rem',
 3 |   height: '100vh',
 4 |   padding: '1rem',
 5 |   overflowX: 'hidden',
 6 |   overflowY: 'auto',
 7 |   backgroundColor: '#00cf87',
 8 | };
 9 | 
10 | export const addNoteButton = {
11 |   width: '100%',
12 |   marginBottom: '1rem',
13 |   padding: '0.8rem 1rem',
14 |   textAlign: 'center',
15 |   textTransform: 'uppercase',
16 |   border: '1px solid white',
17 |   borderRadius: 3,
18 |   color: 'white',
19 | };
20 | 
21 | export const note = {
22 |   width: '100%',
23 |   height: '3rem',
24 |   marginBottom: '0.2rem',
25 |   padding: '0.8rem 1rem',
26 |   textAlign: 'left',
27 |   textOverflow: 'ellipsis',
28 |   whiteSpace: 'nowrap',
29 |   overflow: 'hidden',
30 |   borderRadius: 3,
31 |   color: 'black',
32 |   backgroundColor: 'white',
33 |   boxShadow: '0px 2px 3px rgba(0,0,0,0.1)',
34 |   transition: 'border-right 0.1s linear',
35 | };
36 | 
37 | export const newNoteLabel = {
38 |   color: '#c3c3c3',
39 | };
40 | 
41 | export const selected = {
42 |   borderRight: '0.8rem solid #f3805b',
43 | };
44 | 
45 | export const blankslate = {
46 |   padding: '1rem',
47 |   fontSize: '0.75rem',
48 |   textAlign: 'center',
49 |   color: 'white',
50 |   opacity: 0.6,
51 | };
52 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { Provider } from 'react-redux';
 4 | import App from './components/App';
 5 | import configureStore from './store';
 6 | 
 7 | ReactDOM.render(
 8 |   <Provider store={configureStore()}>
 9 |     <App />
10 |   </Provider>,
11 |   document.getElementById('app')
12 | );
13 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/actions.js:
--------------------------------------------------------------------------------
 1 | import { v4 } from 'uuid';
 2 | 
 3 | export const addNote = (content = '', id = v4(), timestamp = Date.now()) => ({
 4 |   type: 'app/addNote',
 5 |   payload: {
 6 |     id,
 7 |     content,
 8 |     timestamp,
 9 |   },
10 | });
11 | 
12 | export const updateNote = (content, id, timestamp = Date.now()) => ({
13 |   type: 'app/updateNote',
14 |   payload: {
15 |     id,
16 |     content,
17 |     timestamp,
18 |   },
19 | });
20 | 
21 | export const removeNote = (id) => ({
22 |   type: 'app/removeNote',
23 |   payload: { id },
24 | });
25 | 
26 | export const closeNote = () => ({
27 |   type: 'app/closeNote',
28 | });
29 | 
30 | export const openNote = (id) => ({
31 |   type: 'app/openNote',
32 |   payload: { id },
33 | });
34 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/actions.test.js:
--------------------------------------------------------------------------------
 1 | import test from 'tape';
 2 | import * as actions from './actions';
 3 | 
 4 | test('action creator | addNote :: Create correct action',
 5 |   ({ deepEqual, end }) => {
 6 | 
 7 |     const actualAction = actions.addNote('Hi', 'id-123', 1);
 8 |     const expectedAction = {
 9 |       type: 'app/addNote',
10 |       payload: {
11 |         id: 'id-123',
12 |         content: 'Hi',
13 |         timestamp: 1,
14 |       },
15 |     };
16 | 
17 |     deepEqual(actualAction, expectedAction);
18 |     end();
19 |   }
20 | );
21 | 
22 | test('action creator | updateNote :: Create correct action',
23 |   ({ deepEqual, end }) => {
24 | 
25 |     const actualAction = actions.updateNote('Hello', 'id-123', 2);
26 |     const expectedAction = {
27 |       type: 'app/updateNote',
28 |       payload: {
29 |         id: 'id-123',
30 |         content: 'Hello',
31 |         timestamp: 2,
32 |       },
33 |     };
34 | 
35 |     deepEqual(actualAction, expectedAction);
36 |     end();
37 |   }
38 | );
39 | 
40 | test('action creator | removeNote :: Create correct action',
41 |   ({ deepEqual, end }) => {
42 | 
43 |     const actualAction = actions.removeNote('id-123');
44 |     const expectedAction = {
45 |       type: 'app/removeNote',
46 |       payload: {
47 |         id: 'id-123',
48 |       },
49 |     };
50 | 
51 |     deepEqual(actualAction, expectedAction);
52 |     end();
53 |   }
54 | );
55 | 
56 | test('action creator | openNote :: Create correct action',
57 |   ({ deepEqual, end }) => {
58 | 
59 |     const actualAction = actions.openNote('id-123');
60 |     const expectedAction = {
61 |       type: 'app/openNote',
62 |       payload: {
63 |         id: 'id-123',
64 |       },
65 |     };
66 | 
67 |     deepEqual(actualAction, expectedAction);
68 |     end();
69 |   }
70 | );
71 | 
72 | test('action creator | closeNote :: Create correct action',
73 |   ({ deepEqual, end }) => {
74 | 
75 |     const actualAction = actions.closeNote();
76 |     const expectedAction = {
77 |       type: 'app/closeNote',
78 |     };
79 | 
80 |     deepEqual(actualAction, expectedAction);
81 |     end();
82 |   }
83 | );
84 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import rootReducer from './reducers';
3 | 
4 | export default function configureStore() {
5 |   const store = createStore(rootReducer);
6 |   return store;
7 | }
8 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/reducers.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | import { dissoc } from 'ramda';
 3 | import { without } from 'ramda';
 4 | import { merge } from 'ramda';
 5 | import { prepend } from 'ramda';
 6 | 
 7 | export const byId = (state = {}, { type, payload }) => {
 8 |   switch (type) {
 9 |     case 'app/addNote':
10 |     case 'app/updateNote':
11 |       return merge(state, { [payload.id]: payload });
12 |     case 'app/removeNote':
13 |       return dissoc(payload.id, state);
14 |     default:
15 |       return state;
16 |   }
17 | };
18 | 
19 | export const ids = (state = [], { type, payload }) => {
20 |   switch (type) {
21 |     case 'app/addNote':
22 |       return prepend(payload.id, state);
23 |     case 'app/removeNote':
24 |       return without(payload.id, state);
25 |     default:
26 |       return state;
27 |   }
28 | };
29 | 
30 | export const openNoteId = (state = null, { type, payload }) => {
31 |   switch (type) {
32 |     case 'app/addNote':
33 |     case 'app/openNote':
34 |       return payload.id;
35 |     case 'app/removeNote':
36 |     case 'app/closeNote':
37 |       return null;
38 |     default:
39 |       return state;
40 |   }
41 | };
42 | 
43 | export default combineReducers({
44 |   byId,
45 |   ids,
46 |   openNoteId,
47 | });
48 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/reducers.test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import * as reducers from './reducers';
  3 | import * as actions from './actions';
  4 | import { getMockState } from './testUtils';
  5 | 
  6 | test('reducer | byId :: Handle "addNote" action',
  7 |   ({ deepEqual, end }) => {
  8 | 
  9 |     const state = getMockState.withNoNotes();
 10 | 
 11 |     const actualNextState = reducers.byId(state.byId, actions.addNote('Hello world', "id-123", 1));
 12 |     const expectedNextState = {
 13 |       'id-123': {
 14 |         id: 'id-123',
 15 |         content: 'Hello world',
 16 |         timestamp: 1,
 17 |       },
 18 |     };
 19 | 
 20 |     deepEqual(actualNextState, expectedNextState);
 21 |     end();
 22 |   }
 23 | );
 24 | 
 25 | test('reducer | byId :: Handle "updateNote" action',
 26 |   ({ deepEqual, end }) => {
 27 | 
 28 |     const state = getMockState.withOneNote();
 29 | 
 30 |     const actualNextState = reducers.byId(state.byId, actions.updateNote('Hi there', "id-123", 2));
 31 |     const expectedNextState = {
 32 |       'id-123': {
 33 |         id: 'id-123',
 34 |         content: 'Hi there',
 35 |         timestamp: 2,
 36 |       },
 37 |     };
 38 | 
 39 |     deepEqual(actualNextState, expectedNextState);
 40 |     end();
 41 |   }
 42 | );
 43 | 
 44 | test('reducer | byId :: Handle "removeNote" action',
 45 |   ({ deepEqual, end }) => {
 46 | 
 47 |     const state = getMockState.withOneNote();
 48 | 
 49 |     const actualNextState = reducers.byId(state.byId, actions.removeNote("id-123"));
 50 |     const expectedNextState = {};
 51 | 
 52 |     deepEqual(actualNextState, expectedNextState);
 53 |     end();
 54 |   }
 55 | );
 56 | 
 57 | // ids reducer
 58 | 
 59 | test('reducer | ids :: Handle "addNote" action',
 60 |   ({ deepEqual, end }) => {
 61 | 
 62 |     const state = getMockState.withNoNotes();
 63 | 
 64 |     const actualNextState = reducers.ids(state.ids, actions.addNote("Hi", "id-123"));
 65 |     const expectedNextState = [ 'id-123' ];
 66 | 
 67 |     deepEqual(actualNextState, expectedNextState);
 68 |     end();
 69 |   }
 70 | );
 71 | 
 72 | test('reducer | ids :: Handle "removeNote" action',
 73 |   ({ deepEqual, end }) => {
 74 | 
 75 |     const state = getMockState.withOneNote();
 76 | 
 77 |     const actualNextState = reducers.ids(state.ids, actions.removeNote("id-123"));
 78 |     const expectedNextState = [];
 79 | 
 80 |     deepEqual(actualNextState, expectedNextState);
 81 |     end();
 82 |   }
 83 | );
 84 | 
 85 | // openNoteId reducer
 86 | 
 87 | test('reducer | openNoteId :: Handle "addNote" action',
 88 |   ({ equal, end }) => {
 89 | 
 90 |     const state = getMockState.withNoOpenNotes();
 91 | 
 92 |     const actualNextState = reducers.openNoteId(state.openNoteId, actions.addNote("Hi", "id-123"));
 93 |     const expectedNextState = 'id-123';
 94 | 
 95 |     equal(actualNextState, expectedNextState);
 96 |     end();
 97 |   }
 98 | );
 99 | 
100 | test('reducer | openNoteId :: Handle "openNote" action',
101 |   ({ equal, end }) => {
102 | 
103 |     const state = getMockState.withNoOpenNotes();
104 | 
105 |     const actualNextState = reducers.openNoteId(state.openNoteId, actions.openNote("id-123"));
106 |     const expectedNextState = 'id-123';
107 | 
108 |     equal(actualNextState, expectedNextState);
109 |     end();
110 |   }
111 | );
112 | 
113 | test('reducer | openNoteId :: Handle "removeNote" action',
114 |   ({ equal, end }) => {
115 | 
116 |     const state = getMockState.withOneNote();
117 | 
118 |     const actualNextState = reducers.openNoteId(state.openNoteId, actions.removeNote("id-123"));
119 |     const expectedNextState = null;
120 | 
121 |     equal(actualNextState, expectedNextState);
122 |     end();
123 |   }
124 | );
125 | 
126 | test('reducer | openNoteId :: Handle "closeNote" action',
127 |   ({ equal, end }) => {
128 | 
129 |     const state = getMockState.withOneNote();
130 | 
131 |     const actualNextState = reducers.openNoteId(state.openNoteId, actions.closeNote());
132 |     const expectedNextState = null;
133 | 
134 |     equal(actualNextState, expectedNextState);
135 |     end();
136 |   }
137 | );
138 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/selectors.js:
--------------------------------------------------------------------------------
1 | export const getNotes = (state) =>
2 |   state.ids.map((id) => state.byId[id]);
3 | 
4 | export const getNote = (state, id) =>
5 |   state.byId[id] || null;
6 | 
7 | export const getOpenNoteId = (state) =>
8 |   state.openNoteId;
9 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/selectors.test.js:
--------------------------------------------------------------------------------
 1 | import test from 'tape';
 2 | import * as selectors from './selectors';
 3 | import { getMockState } from './testUtils';
 4 | 
 5 | test('selector | getNotes :: Return empty array if state contains no notes',
 6 |   ({ deepEqual, end }) => {
 7 | 
 8 |     const state = getMockState.withNoNotes();
 9 | 
10 |     const actualSelection = selectors.getNotes(state);
11 |     const expectedSelection = [];
12 | 
13 |     deepEqual(actualSelection, expectedSelection);
14 |     end();
15 |   }
16 | );
17 | 
18 | test('selector | getNotes :: Return array of note objects if state contains any notes',
19 |   ({ deepEqual, end }) => {
20 | 
21 |     const state = getMockState.withOneNote();
22 | 
23 |     const expectedSelection = [
24 |       {
25 |         id: 'id-123',
26 |         content: 'Hello world',
27 |         timestamp: 1,
28 |       },
29 |     ];
30 |     const actualSelection = selectors.getNotes(state);
31 | 
32 |     deepEqual(actualSelection, expectedSelection);
33 |     end();
34 |   }
35 | );
36 | 
37 | test('selector | getNote :: Return null if state doesn\'t contain a note with supplied id',
38 |   ({ equal, end }) => {
39 | 
40 |     const state = getMockState.withTwoNotes();
41 | 
42 |     const actualSelection = selectors.getNote(state, 'id-999');
43 |     const expectedSelection = null;
44 | 
45 |     equal(actualSelection, expectedSelection);
46 |     end();
47 |   }
48 | );
49 | 
50 | test('selector | getNote :: Return note object if state contains note with passed id',
51 |   ({ deepEqual, end }) => {
52 | 
53 |     const state = getMockState.withTwoNotes();
54 | 
55 |     const actualSelection = selectors.getNote(state, 'id-123');
56 |     const expectedSelection = {
57 |       id: 'id-123',
58 |       content: 'Hello world',
59 |       timestamp: 1,
60 |     };
61 | 
62 |     deepEqual(actualSelection, expectedSelection);
63 |     end();
64 |   }
65 | );
66 | 
67 | test('selector | getOpenNoteId :: Return null if state doesn\'t have open note set',
68 |   ({ equal, end }) => {
69 | 
70 |     const state = getMockState.withNoNotes();
71 | 
72 |     const actualSelection = selectors.getOpenNoteId(state);
73 |     const expectedSelection = null;
74 | 
75 |     equal(actualSelection, expectedSelection);
76 |     end();
77 |   }
78 | );
79 | 
80 | test('selector | getOpenNoteId :: Return note id if state has open note set',
81 |   ({ equal, end }) => {
82 | 
83 |     const state = getMockState.withOneNote();
84 | 
85 |     const actualSelection = selectors.getOpenNoteId(state);
86 |     const expectedSelection = 'id-123';
87 | 
88 |     equal(actualSelection, expectedSelection);
89 |     end();
90 |   }
91 | );
92 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/source/store/testUtils.js:
--------------------------------------------------------------------------------
 1 | export const getMockState = {
 2 |   withNoNotes: () => ({
 3 |     byId: {},
 4 |     ids: [],
 5 |     openNoteId: null,
 6 |   }),
 7 |   withOneNote: () => ({
 8 |     byId: {
 9 |       'id-123': {
10 |         id: 'id-123',
11 |         content: 'Hello world',
12 |         timestamp: 1,
13 |       },
14 |     },
15 |     ids: [ 'id-123' ],
16 |     openNoteId: 'id-123',
17 |   }),
18 |   withTwoNotes: () => ({
19 |     byId: {
20 |       'id-123': {
21 |         id: 'id-123',
22 |         content: 'Hello world',
23 |         timestamp: 1,
24 |       },
25 |       'id-456': {
26 |         id: 'id-456',
27 |         content: 'Hi globe',
28 |         timestamp: 2,
29 |       },
30 |     },
31 |     ids: [ 'id-123', 'id-456' ],
32 |     openNoteId: 'id-456',
33 |   }),
34 |   withNoOpenNotes: () => ({
35 |     byId: {
36 |       'id-123': {
37 |         id: 'id-123',
38 |         content: 'Hello world',
39 |         timestamp: 1,
40 |       },
41 |     },
42 |     ids: [ 'id-123' ],
43 |     openNoteId: null,
44 |   }),
45 | };
46 | 


--------------------------------------------------------------------------------
/chapter-03-mvp/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const entry = [ './source/index' ];
 4 | 
 5 | const output = {
 6 |   path: path.resolve(__dirname, 'public/js'),
 7 |   filename: 'app.js',
 8 | };
 9 | 
10 | const resolve = {
11 |   extensions: [ '', '.js', '.jsx' ],
12 | };
13 | 
14 | const scriptLoader = {
15 |   loader: 'babel',
16 |   include: path.resolve(__dirname, 'source'),
17 |   test: /\.jsx$|\.js$/,
18 | };
19 | 
20 | module.exports = {
21 |   devtool: 'eval',
22 |   entry,
23 |   output,
24 |   resolve,
25 |   module: { loaders: [ scriptLoader ] },
26 | };
27 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "react",
5 |     "stage-2"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "node": true,
 6 |     "es6": true
 7 |   },
 8 |   "ecmaFeatures": {
 9 |     "jsx": true,
10 |     "modules": true,
11 |     "spread": true,
12 |     "experimentalObjectRestSpread": true
13 |   },
14 |   "plugins": [
15 |     "react"
16 |   ],
17 |   "rules": {
18 |     "array-bracket-spacing": ["error", "always"],
19 |     "block-spacing": "error",
20 |     "comma-spacing": ["error", {"before": false, "after": true}],
21 |     "eqeqeq": ["error", "smart"],
22 |     "no-cond-assign": "error",
23 |     "no-const-assign": "error",
24 |     "no-dupe-args": "error",
25 |     "no-dupe-class-members": "error",
26 |     "no-dupe-keys": "error",
27 |     "no-duplicate-case": "error",
28 |     "no-empty": "error",
29 |     "no-eval": "error",
30 |     "no-extend-native": "error",
31 |     "no-extra-semi": "error",
32 |     "no-func-assign": "error",
33 |     "no-invalid-this": "error",
34 |     "no-irregular-whitespace": "error",
35 |     "no-lone-blocks": "error",
36 |     "no-mixed-spaces-and-tabs": "error",
37 |     "no-sparse-arrays": "error",
38 |     "no-undef": "error",
39 |     "no-use-before-define": "error",
40 |     "no-var": "error",
41 |     "object-shorthand": "error",
42 |     "prefer-arrow-callback": "error",
43 |     "react/jsx-indent-props": ["error", 2],
44 |     "react/jsx-no-duplicate-props": "error",
45 |     "react/jsx-no-undef": "error",
46 |     "react/jsx-uses-react": "error",
47 |     "react/jsx-uses-vars": "error",
48 |     "react/no-direct-mutation-state": "error",
49 |     "react/no-unknown-property": "error",
50 |     "react/self-closing-comp": "error",
51 |     "react/wrap-multilines": "error",
52 |     "arrow-parens": ["warn", "always"],
53 |     "arrow-spacing": "warn",
54 |     "brace-style": ["warn", "1tbs"],
55 |     "comma-dangle": ["warn", "always-multiline"],
56 |     "curly": ["warn", "multi-line"],
57 |     "dot-location": ["warn", "property"],
58 |     "jsx-quotes": ["warn", "prefer-double"],
59 |     "no-console": "warn",
60 |     "no-constant-condition": "warn",
61 |     "no-fallthrough": "warn",
62 |     "no-labels": "warn",
63 |     "no-multiple-empty-lines": ["warn", {"max": 1}],
64 |     "no-trailing-spaces": "warn",
65 |     "no-underscore-dangle": "warn",
66 |     "no-unneeded-ternary": "warn",
67 |     "no-unused-vars": ["warn", {"varsIgnorePattern": "^styles$"}],
68 |     "object-curly-spacing": ["warn", "always"],
69 |     "prefer-const": "warn",
70 |     "prefer-spread": "warn",
71 |     "prefer-template": "warn",
72 |     "react/jsx-closing-bracket-location": ["warn", {"selfClosing": "props-aligned", "nonEmpty": "props-aligned"}],
73 |     "react/jsx-curly-spacing": ["warn", "never"],
74 |     "react/no-danger": "warn",
75 |     "react/prop-types": "warn",
76 |     "semi": ["warn", "always"]
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/js
3 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const express = require('express');
 3 | const app = express();
 4 | const uuid = require('uuid');
 5 | const bodyParser = require('body-parser');
 6 | 
 7 | const notes = {};
 8 | 
 9 | app.use(express.static('public'));
10 | app.use(bodyParser.json());
11 | 
12 | app.get('/notes', (req, res) => {
13 |   res.send(
14 |     Object.keys(notes)
15 |       .map((key) => notes[key])
16 |       .sort((a, b) => b.timestamp - a.timestamp)
17 |   );
18 | });
19 | 
20 | app.post('/notes', (req, res) => {
21 |   const note = {
22 |     id: uuid.v4(),
23 |     content: req.body.content,
24 |     timestamp: Date.now(),
25 |   };
26 |   notes[note.id] = note;
27 | 
28 |   res.send(note);
29 | });
30 | 
31 | app.delete('/notes/:id', (req, res) => {
32 |   const note = notes[req.params.id];
33 | 
34 |   if (!note) {
35 |     return res.status(404).send('Note not found');
36 |   }
37 | 
38 |   delete notes[req.params.id];
39 |   res.send();
40 | });
41 | 
42 | app.put('/notes/:id', (req, res) => {
43 |   const note = notes[req.params.id];
44 | 
45 |   if (!note) {
46 |     return res.status(404).send('Note not found');
47 |   }
48 | 
49 |   note.content = req.body.content;
50 |   res.send(note);
51 | });
52 | 
53 | app.get('*', (req, res) => {
54 |   res.sendFile(path.resolve(__dirname, 'public/index.html'));
55 | });
56 | 
57 | app.listen(3000, () => {
58 |   //eslint-disable-next-line no-console
59 |   console.log('`Developing a Redux Edge` notes app listening on port 3000!');
60 | });
61 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dare-notes-app",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "scripts": {
 6 |     "lint": "eslint 'source/**'",
 7 |     "test": "tape --require babel-register source/**/*.test.js",
 8 |     "prestart": "webpack",
 9 |     "start": "node index"
10 |   },
11 |   "author": "Artur Muller <me@arturmuller.com> (http://arturmuller.com)",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel-eslint": "^6.0.0",
15 |     "babel-register": "^6.9.0",
16 |     "eslint": "^2.12.0",
17 |     "eslint-plugin-react": "^4.3.0",
18 |     "fetch-mock": "^4.5.4",
19 |     "redux-mock-store": "^1.1.1",
20 |     "tape": "^4.5.1"
21 |   },
22 |   "dependencies": {
23 |     "babel-core": "^6.7.6",
24 |     "babel-loader": "^6.2.4",
25 |     "babel-preset-es2015": "^6.6.0",
26 |     "babel-preset-react": "^6.5.0",
27 |     "babel-preset-stage-2": "^6.5.0",
28 |     "body-parser": "^1.15.2",
29 |     "express": "^4.13.4",
30 |     "isomorphic-fetch": "^2.2.1",
31 |     "normalizr": "^2.1.0",
32 |     "ramda": "^0.21.0",
33 |     "react": "^15.0.0",
34 |     "react-dom": "^15.0.0",
35 |     "react-redux": "^4.0.0",
36 |     "redux": "^3.0.0",
37 |     "redux-thunk": "^2.1.0",
38 |     "uuid": "^2.0.2",
39 |     "webpack": "^1.12.2"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/public/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /**
  4 |  * 1. Change the default font family in all browsers (opinionated).
  5 |  * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
  6 |  */
  7 | 
  8 | html {
  9 |   font-family: sans-serif; /* 1 */
 10 |   -ms-text-size-adjust: 100%; /* 2 */
 11 |   -webkit-text-size-adjust: 100%; /* 2 */
 12 | }
 13 | 
 14 | /**
 15 |  * Remove the margin in all browsers (opinionated).
 16 |  */
 17 | 
 18 | body {
 19 |   margin: 0;
 20 | }
 21 | 
 22 | /* HTML5 display definitions
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Add the correct display in IE 9-.
 27 |  * 1. Add the correct display in Edge, IE, and Firefox.
 28 |  * 2. Add the correct display in IE.
 29 |  */
 30 | 
 31 | article,
 32 | aside,
 33 | details, /* 1 */
 34 | figcaption,
 35 | figure,
 36 | footer,
 37 | header,
 38 | main, /* 2 */
 39 | menu,
 40 | nav,
 41 | section,
 42 | summary { /* 1 */
 43 |   display: block;
 44 | }
 45 | 
 46 | /**
 47 |  * Add the correct display in IE 9-.
 48 |  */
 49 | 
 50 | audio,
 51 | canvas,
 52 | progress,
 53 | video {
 54 |   display: inline-block;
 55 | }
 56 | 
 57 | /**
 58 |  * Add the correct display in iOS 4-7.
 59 |  */
 60 | 
 61 | audio:not([controls]) {
 62 |   display: none;
 63 |   height: 0;
 64 | }
 65 | 
 66 | /**
 67 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 68 |  */
 69 | 
 70 | progress {
 71 |   vertical-align: baseline;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct display in IE 10-.
 76 |  * 1. Add the correct display in IE.
 77 |  */
 78 | 
 79 | template, /* 1 */
 80 | [hidden] {
 81 |   display: none;
 82 | }
 83 | 
 84 | /* Links
 85 |    ========================================================================== */
 86 | 
 87 | /**
 88 |  * 1. Remove the gray background on active links in IE 10.
 89 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 90 |  */
 91 | 
 92 | a {
 93 |   background-color: transparent; /* 1 */
 94 |   -webkit-text-decoration-skip: objects; /* 2 */
 95 | }
 96 | 
 97 | /**
 98 |  * Remove the outline on focused links when they are also active or hovered
 99 |  * in all browsers (opinionated).
100 |  */
101 | 
102 | a:active,
103 | a:hover {
104 |   outline-width: 0;
105 | }
106 | 
107 | /* Text-level semantics
108 |    ========================================================================== */
109 | 
110 | /**
111 |  * 1. Remove the bottom border in Firefox 39-.
112 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
113 |  */
114 | 
115 | abbr[title] {
116 |   border-bottom: none; /* 1 */
117 |   text-decoration: underline; /* 2 */
118 |   text-decoration: underline dotted; /* 2 */
119 | }
120 | 
121 | /**
122 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
123 |  */
124 | 
125 | b,
126 | strong {
127 |   font-weight: inherit;
128 | }
129 | 
130 | /**
131 |  * Add the correct font weight in Chrome, Edge, and Safari.
132 |  */
133 | 
134 | b,
135 | strong {
136 |   font-weight: bolder;
137 | }
138 | 
139 | /**
140 |  * Add the correct font style in Android 4.3-.
141 |  */
142 | 
143 | dfn {
144 |   font-style: italic;
145 | }
146 | 
147 | /**
148 |  * Correct the font size and margin on `h1` elements within `section` and
149 |  * `article` contexts in Chrome, Firefox, and Safari.
150 |  */
151 | 
152 | h1 {
153 |   font-size: 2em;
154 |   margin: 0.67em 0;
155 | }
156 | 
157 | /**
158 |  * Add the correct background and color in IE 9-.
159 |  */
160 | 
161 | mark {
162 |   background-color: #ff0;
163 |   color: #000;
164 | }
165 | 
166 | /**
167 |  * Add the correct font size in all browsers.
168 |  */
169 | 
170 | small {
171 |   font-size: 80%;
172 | }
173 | 
174 | /**
175 |  * Prevent `sub` and `sup` elements from affecting the line height in
176 |  * all browsers.
177 |  */
178 | 
179 | sub,
180 | sup {
181 |   font-size: 75%;
182 |   line-height: 0;
183 |   position: relative;
184 |   vertical-align: baseline;
185 | }
186 | 
187 | sub {
188 |   bottom: -0.25em;
189 | }
190 | 
191 | sup {
192 |   top: -0.5em;
193 | }
194 | 
195 | /* Embedded content
196 |    ========================================================================== */
197 | 
198 | /**
199 |  * Remove the border on images inside links in IE 10-.
200 |  */
201 | 
202 | img {
203 |   border-style: none;
204 | }
205 | 
206 | /**
207 |  * Hide the overflow in IE.
208 |  */
209 | 
210 | svg:not(:root) {
211 |   overflow: hidden;
212 | }
213 | 
214 | /* Grouping content
215 |    ========================================================================== */
216 | 
217 | /**
218 |  * 1. Correct the inheritance and scaling of font size in all browsers.
219 |  * 2. Correct the odd `em` font sizing in all browsers.
220 |  */
221 | 
222 | code,
223 | kbd,
224 | pre,
225 | samp {
226 |   font-family: monospace, monospace; /* 1 */
227 |   font-size: 1em; /* 2 */
228 | }
229 | 
230 | /**
231 |  * Add the correct margin in IE 8.
232 |  */
233 | 
234 | figure {
235 |   margin: 1em 40px;
236 | }
237 | 
238 | /**
239 |  * 1. Add the correct box sizing in Firefox.
240 |  * 2. Show the overflow in Edge and IE.
241 |  */
242 | 
243 | hr {
244 |   box-sizing: content-box; /* 1 */
245 |   height: 0; /* 1 */
246 |   overflow: visible; /* 2 */
247 | }
248 | 
249 | /* Forms
250 |    ========================================================================== */
251 | 
252 | /**
253 |  * 1. Change font properties to `inherit` in all browsers (opinionated).
254 |  * 2. Remove the margin in Firefox and Safari.
255 |  */
256 | 
257 | button,
258 | input,
259 | select,
260 | textarea {
261 |   font: inherit; /* 1 */
262 |   margin: 0; /* 2 */
263 | }
264 | 
265 | /**
266 |  * Restore the font weight unset by the previous rule.
267 |  */
268 | 
269 | optgroup {
270 |   font-weight: bold;
271 | }
272 | 
273 | /**
274 |  * Show the overflow in IE.
275 |  * 1. Show the overflow in Edge.
276 |  */
277 | 
278 | button,
279 | input { /* 1 */
280 |   overflow: visible;
281 | }
282 | 
283 | /**
284 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
285 |  * 1. Remove the inheritance of text transform in Firefox.
286 |  */
287 | 
288 | button,
289 | select { /* 1 */
290 |   text-transform: none;
291 | }
292 | 
293 | /**
294 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
295 |  *    controls in Android 4.
296 |  * 2. Correct the inability to style clickable types in iOS and Safari.
297 |  */
298 | 
299 | button,
300 | html [type="button"], /* 1 */
301 | [type="reset"],
302 | [type="submit"] {
303 |   -webkit-appearance: button; /* 2 */
304 | }
305 | 
306 | /**
307 |  * Remove the inner border and padding in Firefox.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | [type="button"]::-moz-focus-inner,
312 | [type="reset"]::-moz-focus-inner,
313 | [type="submit"]::-moz-focus-inner {
314 |   border-style: none;
315 |   padding: 0;
316 | }
317 | 
318 | /**
319 |  * Restore the focus styles unset by the previous rule.
320 |  */
321 | 
322 | button:-moz-focusring,
323 | [type="button"]:-moz-focusring,
324 | [type="reset"]:-moz-focusring,
325 | [type="submit"]:-moz-focusring {
326 |   outline: 1px dotted ButtonText;
327 | }
328 | 
329 | /**
330 |  * Change the border, margin, and padding in all browsers (opinionated).
331 |  */
332 | 
333 | fieldset {
334 |   border: 1px solid #c0c0c0;
335 |   margin: 0 2px;
336 |   padding: 0.35em 0.625em 0.75em;
337 | }
338 | 
339 | /**
340 |  * 1. Correct the text wrapping in Edge and IE.
341 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
342 |  * 3. Remove the padding so developers are not caught out when they zero out
343 |  *    `fieldset` elements in all browsers.
344 |  */
345 | 
346 | legend {
347 |   box-sizing: border-box; /* 1 */
348 |   color: inherit; /* 2 */
349 |   display: table; /* 1 */
350 |   max-width: 100%; /* 1 */
351 |   padding: 0; /* 3 */
352 |   white-space: normal; /* 1 */
353 | }
354 | 
355 | /**
356 |  * Remove the default vertical scrollbar in IE.
357 |  */
358 | 
359 | textarea {
360 |   overflow: auto;
361 | }
362 | 
363 | /**
364 |  * 1. Add the correct box sizing in IE 10-.
365 |  * 2. Remove the padding in IE 10-.
366 |  */
367 | 
368 | [type="checkbox"],
369 | [type="radio"] {
370 |   box-sizing: border-box; /* 1 */
371 |   padding: 0; /* 2 */
372 | }
373 | 
374 | /**
375 |  * Correct the cursor style of increment and decrement buttons in Chrome.
376 |  */
377 | 
378 | [type="number"]::-webkit-inner-spin-button,
379 | [type="number"]::-webkit-outer-spin-button {
380 |   height: auto;
381 | }
382 | 
383 | /**
384 |  * 1. Correct the odd appearance in Chrome and Safari.
385 |  * 2. Correct the outline style in Safari.
386 |  */
387 | 
388 | [type="search"] {
389 |   -webkit-appearance: textfield; /* 1 */
390 |   outline-offset: -2px; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
395 |  */
396 | 
397 | [type="search"]::-webkit-search-cancel-button,
398 | [type="search"]::-webkit-search-decoration {
399 |   -webkit-appearance: none;
400 | }
401 | 
402 | /**
403 |  * Correct the text style of placeholders in Chrome, Edge, and Safari.
404 |  */
405 | 
406 | ::-webkit-input-placeholder {
407 |   color: inherit;
408 |   opacity: 0.54;
409 | }
410 | 
411 | /**
412 |  * 1. Correct the inability to style clickable types in iOS and Safari.
413 |  * 2. Change font properties to `inherit` in Safari.
414 |  */
415 | 
416 | ::-webkit-file-upload-button {
417 |   -webkit-appearance: button; /* 1 */
418 |   font: inherit; /* 2 */
419 | }
420 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/public/css/resets.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html {
 6 |   font-family: Verdana, sans-serif;
 7 |   font-size: 15px;
 8 | }
 9 | 
10 | h1, h2, h3, h4, h5, h6, p, button, textarea {
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | 
15 | a, button, textarea {
16 |   display: block;
17 |   outline: none;
18 | }
19 | 
20 | button, textarea {
21 |   border: none;
22 |   background-color: transparent;
23 | }
24 | 
25 | textarea {
26 |   width: 100%;
27 |   resize: none;
28 | }
29 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Initial | Developing a Redux Edge</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" type="text/css" href="/css/normalize.css">
 8 |     <link rel="stylesheet" type="text/css" href="/css/resets.css">
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script src="/js/app.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/components/App/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import NotesList from '../NotesList';
 3 | import NoteDetail from '../NoteDetail';
 4 | import * as style from './style';
 5 | 
 6 | const App = () => (
 7 |   <div style={style.wrapper}>
 8 |     <NotesList />
 9 |     <NoteDetail />
10 |   </div>
11 | );
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/components/App/style.js:
--------------------------------------------------------------------------------
1 | export const wrapper = {
2 |   display: 'flex',
3 |   alignItems: 'center',
4 | };
5 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/components/NoteDetail/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { connect } from 'react-redux';
 3 | import * as actionCreators from '../../store/actions';
 4 | import * as selectors from '../../store/selectors';
 5 | import * as style from './style';
 6 | 
 7 | const NoteDetail = ({ note, removeNote, closeNote, updateNote, updateNoteServer }) => (
 8 |   <div style={style.wrapper}>
 9 |     {!note
10 |       ? <div style={style.blankslate}>No note is open</div>
11 |       : <div style={style.note}>
12 |           <div style={style.date}>
13 |             {new Date(note.timestamp).toLocaleString()}
14 |           </div>
15 |           <textarea
16 |             autoFocus
17 |             key={note.id}
18 |             style={style.textarea}
19 |             onChange={(event) => updateNote(event.target.value, note.id)}
20 |             placeholder="New note..."
21 |             value={note.content}
22 |             />
23 |           <div style={style.row}>
24 |             <button
25 |               onClick={() => updateNoteServer(note.id, note.content)}
26 |               style={style.button}
27 |               >
28 |               Save
29 |             </button>
30 |             <button
31 |               onClick={() => removeNote(note.id)}
32 |               style={{ ...style.button, ...style.danger }}
33 |               >
34 |               Remove
35 |             </button>
36 |             <button
37 |               onClick={closeNote}
38 |               style={style.button}
39 |               >
40 |               Close
41 |             </button>
42 |           </div>
43 |         </div>
44 |     }
45 |   </div>
46 | );
47 | 
48 | NoteDetail.propTypes = {
49 |   note: PropTypes.shape({
50 |     id: PropTypes.string.isRequired,
51 |     content: PropTypes.string.isRequired,
52 |     timestamp: PropTypes.number.isRequired,
53 |   }),
54 |   updateNote: PropTypes.func.isRequired,
55 |   updateNoteServer: PropTypes.func.isRequired,
56 |   removeNote: PropTypes.func.isRequired,
57 |   closeNote: PropTypes.func.isRequired,
58 | };
59 | 
60 | const selector = (state) => ({
61 |   note: selectors.getNote(state, selectors.getOpenNoteId(state)),
62 | });
63 | 
64 | export default connect(selector, actionCreators)(NoteDetail);
65 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/components/NoteDetail/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   flexGrow: 1,
 3 |   height: '100vh',
 4 |   padding: '3rem',
 5 |   backgroundColor: '#fafafa',
 6 |   overflowY: 'scroll',
 7 | };
 8 | 
 9 | export const note = {
10 |   height: '100%',
11 |   display: 'flex',
12 |   flexDirection: 'column',
13 | };
14 | 
15 | export const date = {
16 |   fontSize: '0.75rem',
17 |   color: '#808080',
18 |   marginBottom: '2rem',
19 | };
20 | 
21 | export const textarea = {
22 |   flexGrow: 1,
23 |   lineHeight: 1.4,
24 | };
25 | 
26 | export const blankslate = {
27 |   padding: '5rem',
28 |   textAlign: 'center',
29 |   fontSize: '0.75rem',
30 |   color: '#808080',
31 | };
32 | 
33 | export const row = {
34 |   display: 'flex',
35 |   justifyContent: 'flex-end',
36 |   paddingTop: '1rem',
37 | };
38 | 
39 | export const button = {
40 |   padding: '0.8rem 1rem',
41 |   marginLeft: '0.8rem',
42 |   backgroundColor: "#f2f2f2",
43 | };
44 | 
45 | export const danger = {
46 |   color: '#ec8c8e',
47 | };
48 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/components/NotesList/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes, Component } from 'react';
 2 | import { connect } from 'react-redux';
 3 | import * as actionCreators from '../../store/actions';
 4 | import * as selectors from '../../store/selectors';
 5 | import * as style from './style';
 6 | 
 7 | class NotesList extends Component {
 8 | 
 9 |   componentWillMount() {
10 |     this.props.fetchNotes();
11 |   }
12 | 
13 |   render() {
14 |     const { notes, openNoteId, addNote, openNote } = this.props;
15 |     return (
16 |       <div style={style.wrapper}>
17 |         <button
18 |           style={style.addNoteButton}
19 |           onClick={addNote}
20 |           >
21 |           Add Note
22 |         </button>
23 |         {(notes.length === 0)
24 |           ? <div style={style.blankslate}>No notes</div>
25 |           : notes.map((note) => (
26 |               <button
27 |                 key={note.id}
28 |                 style={(note.id === openNoteId)
29 |                   ? { ...style.note, ...style.selected }
30 |                   : style.note
31 |                 }
32 |                 onClick={() => openNote(note.id)}
33 |                 >
34 |                 {note.content === ''
35 |                   ? <span style={style.newNoteLabel}>New note...</span>
36 |                   : note.content
37 |                 }
38 |               </button>
39 |           ))
40 |         }
41 |       </div>
42 |     );
43 |   }
44 | }
45 | 
46 | NotesList.propTypes = {
47 |   notes: PropTypes.arrayOf(PropTypes.shape({
48 |     content: PropTypes.string,
49 |     id: PropTypes.string.isRequired,
50 |   })).isRequired,
51 |   openNoteId: PropTypes.string,
52 |   addNote: PropTypes.func.isRequired,
53 |   openNote: PropTypes.func.isRequired,
54 |   fetchNotes: PropTypes.func.isRequired,
55 | };
56 | 
57 | const selector = (state) => ({
58 |   notes: selectors.getNotes(state),
59 |   openNoteId: selectors.getOpenNoteId(state),
60 | });
61 | 
62 | export default connect(selector, actionCreators)(NotesList);
63 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/components/NotesList/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   width: '22rem',
 3 |   height: '100vh',
 4 |   padding: '1rem',
 5 |   overflowX: 'hidden',
 6 |   overflowY: 'auto',
 7 |   backgroundColor: '#00cf87',
 8 | };
 9 | 
10 | export const addNoteButton = {
11 |   width: '100%',
12 |   marginBottom: '1rem',
13 |   padding: '0.8rem 1rem',
14 |   textAlign: 'center',
15 |   textTransform: 'uppercase',
16 |   border: '1px solid white',
17 |   borderRadius: 3,
18 |   color: 'white',
19 | };
20 | 
21 | export const note = {
22 |   width: '100%',
23 |   height: '3rem',
24 |   marginBottom: '0.2rem',
25 |   padding: '0.8rem 1rem',
26 |   textAlign: 'left',
27 |   textOverflow: 'ellipsis',
28 |   whiteSpace: 'nowrap',
29 |   overflow: 'hidden',
30 |   borderRadius: 3,
31 |   color: 'black',
32 |   backgroundColor: 'white',
33 |   boxShadow: '0px 2px 3px rgba(0,0,0,0.1)',
34 |   transition: 'border-right 0.1s linear',
35 | };
36 | 
37 | export const newNoteLabel = {
38 |   color: '#c3c3c3',
39 | };
40 | 
41 | export const selected = {
42 |   borderRight: '0.8rem solid #f3805b',
43 | };
44 | 
45 | export const blankslate = {
46 |   padding: '1rem',
47 |   fontSize: '0.75rem',
48 |   textAlign: 'center',
49 |   color: 'white',
50 |   opacity: 0.6,
51 | };
52 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { Provider } from 'react-redux';
 4 | import App from './components/App';
 5 | import configureStore from './store';
 6 | 
 7 | ReactDOM.render(
 8 |   <Provider store={configureStore()}>
 9 |     <App />
10 |   </Provider>,
11 |   document.getElementById('app')
12 | );
13 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/actionUtils.js:
--------------------------------------------------------------------------------
 1 | export const asyncAction = ({ func, start, success, failure }) => (
 2 |   (...args) => (dispatch) => {
 3 |     dispatch(start());
 4 |     return func(...args)
 5 |       .then((data) => dispatch(success(data)))
 6 |       .catch((error) => dispatch(failure(error)));
 7 |   }
 8 | );
 9 | 
10 | export const startAction = (type) => () => ({
11 |   type,
12 |   meta: {
13 |     done: false,
14 |   },
15 | });
16 | 
17 | export const successAction = (type) => (payload) => ({
18 |   type,
19 |   payload,
20 |   meta: {
21 |     done: true,
22 |   },
23 | });
24 | 
25 | export const failureAction = (type) => (error) => ({
26 |   type,
27 |   payload: error,
28 |   error: true,
29 |   meta: {
30 |     done: true,
31 |   },
32 | });
33 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/actions.js:
--------------------------------------------------------------------------------
 1 | import api from '../utils/api';
 2 | import { startAction, successAction, failureAction, asyncAction } from './actionUtils';
 3 | 
 4 | const fetchNotesType = 'app/fetchNotes';
 5 | export const fetchNotesStart = startAction(fetchNotesType);
 6 | export const fetchNotesSuccess = successAction(fetchNotesType);
 7 | export const fetchNotesFailure = failureAction(fetchNotesType);
 8 | export const fetchNotes = asyncAction({
 9 |   func: () => api.notes.fetch(),
10 |   start: fetchNotesStart,
11 |   success: fetchNotesSuccess,
12 |   failure: fetchNotesFailure,
13 | });
14 | 
15 | const addNoteType = 'app/addNote';
16 | export const addNoteStart = startAction(addNoteType);
17 | export const addNoteSuccess = successAction(addNoteType);
18 | export const addNoteFailure = failureAction(addNoteType);
19 | export const addNote = asyncAction({
20 |   func: (content) => api.notes.add(content),
21 |   start: addNoteStart,
22 |   success: addNoteSuccess,
23 |   failure: addNoteFailure,
24 | });
25 | 
26 | export const updateNote = (content, id, timestamp = Date.now()) => ({
27 |   type: 'app/updateNote',
28 |   payload: {
29 |     id,
30 |     content,
31 |     timestamp,
32 |   },
33 | });
34 | 
35 | const updateNoteServerType = 'app/updateNoteServer';
36 | export const updateServerStart = startAction(updateNoteServerType);
37 | export const updateServerSuccess = successAction(updateNoteServerType);
38 | export const updateServerFailure = failureAction(updateNoteServerType);
39 | export const updateNoteServer = asyncAction({
40 |   func: (id, content) => api.notes.update(id, content),
41 |   start: updateServerStart,
42 |   success: updateServerSuccess,
43 |   failure: updateServerFailure,
44 | });
45 | 
46 | const removeNoteType = 'app/removeNote';
47 | export const removeNoteStart = startAction(removeNoteType);
48 | export const removeNoteSuccess = successAction(removeNoteType);
49 | export const removeNoteFailure = failureAction(removeNoteType);
50 | export const removeNote = asyncAction({
51 |   func: (id) => api.notes.delete(id).then(() => ({ id })),
52 |   start: removeNoteStart,
53 |   success: removeNoteSuccess,
54 |   failure: removeNoteFailure,
55 | });
56 | 
57 | export const closeNote = () => ({
58 |   type: 'app/closeNote',
59 | });
60 | 
61 | export const openNote = (id) => ({
62 |   type: 'app/openNote',
63 |   payload: { id },
64 | });
65 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/actions.test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import configureStore from 'redux-mock-store';
  3 | import thunk from 'redux-thunk';
  4 | import fetchMock from 'fetch-mock';
  5 | 
  6 | import * as actions from './actions';
  7 | 
  8 | const middlewares = [ thunk ];
  9 | const mockStore = configureStore(middlewares);
 10 | 
 11 | const assertReturnsFunction = ({ equal, end }, func) => {
 12 |   const result = func();
 13 |   equal(typeof result, 'function');
 14 |   end();
 15 | };
 16 | 
 17 | const assertFirstDispatchedAction = ({ func, type, deepEqual, end }) => {
 18 |   const store = mockStore({});
 19 |   store.dispatch(func());
 20 |   const dispatchedActions = store.getActions();
 21 |   const actualAction = dispatchedActions[0];
 22 |   const expectedAction = {
 23 |     type,
 24 |     meta: {
 25 |       done: false,
 26 |     },
 27 |   };
 28 | 
 29 |   deepEqual(actualAction, expectedAction);
 30 |   end();
 31 | };
 32 | 
 33 | const assertLastDispatchedAction = ({ deepEqual, end, func, expectedAction }) => {
 34 |   const store = mockStore({});
 35 |   store.dispatch(func())
 36 |     .then(() => {
 37 |       const dispatchedActions = store.getActions();
 38 |       const actualAction = dispatchedActions[dispatchedActions.length - 1];
 39 |       deepEqual(actualAction, expectedAction);
 40 |       end();
 41 |     });
 42 | };
 43 | 
 44 | const createErrorAction = (type) => ({
 45 |   type,
 46 |   payload: {},
 47 |   error: true,
 48 |   meta: { done: true },
 49 | });
 50 | 
 51 | const createSuccessAction = (type, payload) => ({
 52 |   type,
 53 |   payload,
 54 |   meta: { done: true },
 55 | });
 56 | 
 57 | const testAsyncAction = ({ test }, options) => {
 58 |   const {
 59 |     path,
 60 |     method,
 61 |     successMockReturn,
 62 |     successPayload,
 63 |     failureMockReturn,
 64 |     func,
 65 |     type,
 66 |   } = options;
 67 | 
 68 |   test('Setup', ({ end }) => {
 69 |     fetchMock.mock(path, method, successMockReturn);
 70 |     end();
 71 |   });
 72 | 
 73 |   test('Returns a function', (test) => {
 74 |     assertReturnsFunction(test, func);
 75 |   });
 76 | 
 77 |   test('Dispatches initial action', (test) => {
 78 |     assertFirstDispatchedAction({ ...test, func, type });
 79 |   });
 80 | 
 81 |   test('Dispatches correct action on success', (test) => {
 82 |     const expectedAction = createSuccessAction(type, successPayload);
 83 |     assertLastDispatchedAction({ ...test, func, expectedAction });
 84 |   });
 85 | 
 86 |   test('Dispatches correct action on failure', (test) => {
 87 |     fetchMock.reMock(path, method, failureMockReturn);
 88 |     const expectedAction = createErrorAction(type);
 89 |     assertLastDispatchedAction({ ...test, func, expectedAction });
 90 |   });
 91 | 
 92 |   test('Teardown', ({ end }) => {
 93 |     fetchMock.restore();
 94 |     end();
 95 |   });
 96 | };
 97 | 
 98 | test('action creator | fetchNotes ::', (t1) => {
 99 |   const NOTE = {
100 |     id: 123,
101 |     content: 'testing',
102 |     timestamp: 456,
103 |   };
104 |   const func = () => actions.fetchNotes();
105 |   const type = 'app/fetchNotes';
106 |   const successPayload = { noteIds: [ NOTE.id ], notes: { [NOTE.id]: NOTE } };
107 |   const path = '/notes';
108 |   const method = 'GET';
109 |   const successMockReturn = [ NOTE ];
110 |   const failureMockReturn = { body: {}, status: 400 };
111 | 
112 |   testAsyncAction(t1, {
113 |     func,
114 |     type,
115 |     successPayload,
116 |     path,
117 |     method,
118 |     successMockReturn,
119 |     failureMockReturn,
120 |   });
121 | });
122 | 
123 | test('action creator | addNote ::', (t1) => {
124 |   const successPayload = {
125 |     id: 123,
126 |     content: 'Hi',
127 |     timestamp: 456,
128 |   };
129 |   const func = () => actions.addNote('Hi');
130 |   const type = 'app/addNote';
131 |   const path = '/notes';
132 |   const method = 'POST';
133 |   const successMockReturn = (url, { body }) => ({
134 |     id: 123,
135 |     content: JSON.parse(body).content,
136 |     timestamp: 456,
137 |   });
138 |   const failureMockReturn = { body: {}, status: 400 };
139 | 
140 |   testAsyncAction(t1, {
141 |     func,
142 |     type,
143 |     successPayload,
144 |     path,
145 |     method,
146 |     successMockReturn,
147 |     failureMockReturn,
148 |   });
149 | });
150 | 
151 | test('action creator | updateNoteServer ::', (t1) => {
152 |   const successPayload = {
153 |     id: 123,
154 |     content: 'Hi',
155 |     timestamp: 456,
156 |   };
157 |   const func = () => actions.updateNoteServer(123, 'Hi');
158 |   const type = 'app/updateNoteServer';
159 |   const path = '/notes/123';
160 |   const method = 'PUT';
161 |   const successMockReturn = (url, { body }) => ({
162 |     id: 123,
163 |     content: JSON.parse(body).content,
164 |     timestamp: 456,
165 |   });
166 |   const failureMockReturn = { body: {}, status: 400 };
167 | 
168 |   testAsyncAction(t1, {
169 |     func,
170 |     type,
171 |     successPayload,
172 |     path,
173 |     method,
174 |     successMockReturn,
175 |     failureMockReturn,
176 |   });
177 | });
178 | 
179 | test('action creator | updateNote :: Create correct action',
180 |   ({ deepEqual, end }) => {
181 | 
182 |     const actualAction = actions.updateNote('Hello', 'id-123', 2);
183 |     const expectedAction = {
184 |       type: 'app/updateNote',
185 |       payload: {
186 |         id: 'id-123',
187 |         content: 'Hello',
188 |         timestamp: 2,
189 |       },
190 |     };
191 | 
192 |     deepEqual(actualAction, expectedAction);
193 |     end();
194 |   }
195 | );
196 | 
197 | test('action creator | removeNote ::', (t1) => {
198 |   const func = () => actions.removeNote(123);
199 |   const type = 'app/removeNote';
200 |   const successPayload = { id: 123 };
201 |   const path = '/notes/123';
202 |   const method = 'DELETE';
203 |   const successMockReturn = { status: 200, body: '' };
204 |   const failureMockReturn = { body: {}, status: 400 };
205 | 
206 |   testAsyncAction(t1, {
207 |     func,
208 |     type,
209 |     successPayload,
210 |     path,
211 |     method,
212 |     successMockReturn,
213 |     failureMockReturn,
214 |   });
215 | });
216 | 
217 | test('action creator | openNote :: Create correct action',
218 |   ({ deepEqual, end }) => {
219 | 
220 |     const actualAction = actions.openNote('id-123');
221 |     const expectedAction = {
222 |       type: 'app/openNote',
223 |       payload: {
224 |         id: 'id-123',
225 |       },
226 |     };
227 | 
228 |     deepEqual(actualAction, expectedAction);
229 |     end();
230 |   }
231 | );
232 | 
233 | test('action creator | closeNote :: Create correct action',
234 |   ({ deepEqual, end }) => {
235 | 
236 |     const actualAction = actions.closeNote();
237 |     const expectedAction = {
238 |       type: 'app/closeNote',
239 |     };
240 | 
241 |     deepEqual(actualAction, expectedAction);
242 |     end();
243 |   }
244 | );
245 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import thunk from 'redux-thunk';
3 | 
4 | import rootReducer from './reducers';
5 | export default function configureStore() {
6 |   const store = createStore(rootReducer, applyMiddleware(thunk));
7 |   return store;
8 | }
9 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/reducers.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | import { dissoc } from 'ramda';
 3 | import { without } from 'ramda';
 4 | import { merge } from 'ramda';
 5 | import { prepend } from 'ramda';
 6 | 
 7 | export const byId = (state = {}, { type, payload, meta, error }) => {
 8 |   switch (type) {
 9 |     case 'app/fetchNotes':
10 |       if (meta.done && !error) {
11 |         return payload.notes;
12 |       }
13 |       return state;
14 |     case 'app/addNote':
15 |       if (meta.done && !error) {
16 |         return merge(state, { [payload.id]: payload });
17 |       }
18 |       return state;
19 |     case 'app/updateNote':
20 |       return merge(state, { [payload.id]: payload });
21 |     case 'app/updateNoteServer':
22 |       if (meta.done && !error) {
23 |         return merge(state, { [payload.id]: payload });
24 |       }
25 |       return state;
26 |     case 'app/removeNote':
27 |       if (meta.done && !error) {
28 |         return dissoc(payload.id, state);
29 |       }
30 |       return state;
31 |     default:
32 |       return state;
33 |   }
34 | };
35 | 
36 | export const ids = (state = [], { type, payload, meta, error }) => {
37 |   switch (type) {
38 |     case 'app/fetchNotes':
39 |       if (meta.done && !error) {
40 |         return payload.noteIds;
41 |       }
42 |       return state;
43 |     case 'app/addNote':
44 |       if (meta.done && !error) {
45 |         return prepend(payload.id, state);
46 |       }
47 |       return state;
48 |     case 'app/removeNote':
49 |       if (meta.done && !error) {
50 |         return without(payload.id, state);
51 |       }
52 |       return state;
53 |     default:
54 |       return state;
55 |   }
56 | };
57 | 
58 | export const openNoteId = (state = null, { type, payload, meta, error }) => {
59 |   switch (type) {
60 |     case 'app/addNote':
61 |       if (meta.done && !error) {
62 |         return payload.id;
63 |       }
64 |       return null;
65 |     case 'app/openNote':
66 |       return payload.id;
67 |     case 'app/removeNote':
68 |       if (meta.done && !error) {
69 |         return null;
70 |       }
71 |       return state;
72 |     case 'app/closeNote':
73 |       return null;
74 |     default:
75 |       return state;
76 |   }
77 | };
78 | 
79 | export default combineReducers({
80 |   byId,
81 |   ids,
82 |   openNoteId,
83 | });
84 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/reducers.test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import * as reducers from './reducers';
  3 | import * as actions from './actions';
  4 | import { getMockState, getActionPayload } from './testUtils';
  5 | 
  6 | // byId reducer
  7 | 
  8 | test('reducer | byId :: Handle "fetchNotesSuccess" action',
  9 |   ({ deepEqual, end }) => {
 10 |     const state = getMockState.withNoNotes();
 11 |     const fetchedNotes = getActionPayload.fetchNotesSuccess();
 12 |     const actualNextState = reducers.byId(
 13 |       state.byId,
 14 |       actions.fetchNotesSuccess(fetchedNotes)
 15 |     );
 16 |     const noteId = fetchedNotes.noteIds[0];
 17 |     const expectedNextState = {
 18 |       [noteId]: fetchedNotes.notes[noteId],
 19 |     };
 20 | 
 21 |     deepEqual(actualNextState, expectedNextState);
 22 |     end();
 23 |   }
 24 | );
 25 | 
 26 | test('reducer | byId :: Handle "addNoteSuccess" action',
 27 |   ({ deepEqual, end }) => {
 28 |     const state = getMockState.withNoNotes();
 29 |     const newNote = getActionPayload.addNoteSuccess();
 30 |     const actualNextState = reducers.byId(
 31 |       state.byId,
 32 |       actions.addNoteSuccess(newNote)
 33 |     );
 34 |     const expectedNextState = {
 35 |       [newNote.id]: newNote,
 36 |     };
 37 | 
 38 |     deepEqual(actualNextState, expectedNextState);
 39 |     end();
 40 |   }
 41 | );
 42 | 
 43 | test('reducer | byId :: Handle "updateServerSuccess" action',
 44 |   ({ deepEqual, end }) => {
 45 |     const state = getMockState.withOneNote();
 46 |     const updatedNote = getActionPayload.updateServerSuccess();
 47 |     const actualNextState = reducers.byId(
 48 |       state.byId,
 49 |       actions.updateServerSuccess(updatedNote)
 50 |     );
 51 |     const expectedNextState = {
 52 |       [updatedNote.id]: updatedNote,
 53 |     };
 54 | 
 55 |     deepEqual(actualNextState, expectedNextState);
 56 |     end();
 57 |   }
 58 | );
 59 | 
 60 | test('reducer | byId :: Handle "updateNote" action',
 61 |   ({ deepEqual, end }) => {
 62 |     const state = getMockState.withOneNote();
 63 |     const actualNextState = reducers.byId(
 64 |       state.byId,
 65 |       actions.updateNote('Hi there', 'id-123', 2)
 66 |     );
 67 |     const expectedNextState = {
 68 |       'id-123': {
 69 |         id: 'id-123',
 70 |         content: 'Hi there',
 71 |         timestamp: 2,
 72 |       },
 73 |     };
 74 | 
 75 |     deepEqual(actualNextState, expectedNextState);
 76 |     end();
 77 |   }
 78 | );
 79 | 
 80 | test('reducer | byId :: Handle "removeNoteSuccess" action',
 81 |   ({ deepEqual, end }) => {
 82 |     const state = getMockState.withOneNote();
 83 |     const actualNextState = reducers.byId(
 84 |       state.byId,
 85 |       actions.removeNoteSuccess({ id: 'id-123' })
 86 |     );
 87 |     const expectedNextState = {};
 88 | 
 89 |     deepEqual(actualNextState, expectedNextState);
 90 |     end();
 91 |   }
 92 | );
 93 | 
 94 | // ids reducer
 95 | 
 96 | test('reducer | ids :: Handle "fetchNotesSuccess" action',
 97 |   ({ deepEqual, end }) => {
 98 |     const state = getMockState.withNoNotes();
 99 |     const actualNextState = reducers.ids(
100 |       state.ids,
101 |       actions.fetchNotesSuccess(getActionPayload.fetchNotesSuccess())
102 |     );
103 |     const expectedNextState = [ 'id-123' ];
104 | 
105 |     deepEqual(actualNextState, expectedNextState);
106 |     end();
107 |   }
108 | );
109 | 
110 | test('reducer | ids :: Handle "addNoteSuccess" action',
111 |   ({ deepEqual, end }) => {
112 |     const state = getMockState.withNoNotes();
113 |     const actualNextState = reducers.ids(
114 |       state.ids,
115 |       actions.addNoteSuccess(getActionPayload.addNoteSuccess())
116 |     );
117 |     const expectedNextState = [ 'id-123' ];
118 | 
119 |     deepEqual(actualNextState, expectedNextState);
120 |     end();
121 |   }
122 | );
123 | 
124 | test('reducer | ids :: Handle "removeNoteSuccess" action',
125 |   ({ deepEqual, end }) => {
126 |     const state = getMockState.withOneNote();
127 |     const actualNextState = reducers.ids(
128 |       state.ids,
129 |       actions.removeNoteSuccess({ id: 'id-123' })
130 |     );
131 |     const expectedNextState = [];
132 | 
133 |     deepEqual(actualNextState, expectedNextState);
134 |     end();
135 |   }
136 | );
137 | 
138 | // openNoteId reducer
139 | 
140 | test('reducer | openNoteId :: Handle "addNoteSuccess" action',
141 |   ({ equal, end }) => {
142 |     const state = getMockState.withNoOpenNotes();
143 |     const actualNextState = reducers.openNoteId(
144 |       state.openNoteId,
145 |       actions.addNoteSuccess(getActionPayload.addNoteSuccess())
146 |     );
147 |     const expectedNextState = 'id-123';
148 | 
149 |     equal(actualNextState, expectedNextState);
150 |     end();
151 |   }
152 | );
153 | 
154 | test('reducer | openNoteId :: Handle "openNote" action',
155 |   ({ equal, end }) => {
156 |     const state = getMockState.withNoOpenNotes();
157 |     const actualNextState = reducers.openNoteId(
158 |       state.openNoteId,
159 |       actions.openNote('id-123')
160 |     );
161 |     const expectedNextState = 'id-123';
162 | 
163 |     equal(actualNextState, expectedNextState);
164 |     end();
165 |   }
166 | );
167 | 
168 | test('reducer | openNoteId :: Handle "removeNoteSuccess" action',
169 |   ({ equal, end }) => {
170 |     const state = getMockState.withOneNote();
171 |     const actualNextState = reducers.openNoteId(
172 |       state.openNoteId,
173 |       actions.removeNoteSuccess({ id: 'id-123' })
174 |     );
175 |     const expectedNextState = null;
176 | 
177 |     equal(actualNextState, expectedNextState);
178 |     end();
179 |   }
180 | );
181 | 
182 | test('reducer | openNoteId :: Handle "closeNote" action',
183 |   ({ equal, end }) => {
184 |     const state = getMockState.withOneNote();
185 |     const actualNextState = reducers.openNoteId(
186 |       state.openNoteId,
187 |       actions.closeNote()
188 |     );
189 |     const expectedNextState = null;
190 | 
191 |     equal(actualNextState, expectedNextState);
192 |     end();
193 |   }
194 | );
195 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/selectors.js:
--------------------------------------------------------------------------------
1 | export const getNotes = (state) =>
2 |   state.ids.map((id) => state.byId[id]);
3 | 
4 | export const getNote = (state, id) =>
5 |   state.byId[id] || null;
6 | 
7 | export const getOpenNoteId = (state) =>
8 |   state.openNoteId;
9 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/selectors.test.js:
--------------------------------------------------------------------------------
 1 | import test from 'tape';
 2 | import * as selectors from './selectors';
 3 | import { getMockState } from './testUtils';
 4 | 
 5 | test('selector | getNotes :: Return empty array if state contains no notes',
 6 |   ({ deepEqual, end }) => {
 7 | 
 8 |     const state = getMockState.withNoNotes();
 9 | 
10 |     const actualSelection = selectors.getNotes(state);
11 |     const expectedSelection = [];
12 | 
13 |     deepEqual(actualSelection, expectedSelection);
14 |     end();
15 |   }
16 | );
17 | 
18 | test('selector | getNotes :: Return array of note objects if state contains any notes',
19 |   ({ deepEqual, end }) => {
20 | 
21 |     const state = getMockState.withOneNote();
22 | 
23 |     const expectedSelection = [
24 |       {
25 |         id: 'id-123',
26 |         content: 'Hello world',
27 |         timestamp: 1,
28 |       },
29 |     ];
30 |     const actualSelection = selectors.getNotes(state);
31 | 
32 |     deepEqual(actualSelection, expectedSelection);
33 |     end();
34 |   }
35 | );
36 | 
37 | test('selector | getNote :: Return null if state doesn\'t contain a note with supplied id',
38 |   ({ equal, end }) => {
39 | 
40 |     const state = getMockState.withTwoNotes();
41 | 
42 |     const actualSelection = selectors.getNote(state, 'id-999');
43 |     const expectedSelection = null;
44 | 
45 |     equal(actualSelection, expectedSelection);
46 |     end();
47 |   }
48 | );
49 | 
50 | test('selector | getNote :: Return note object if state contains note with passed id',
51 |   ({ deepEqual, end }) => {
52 | 
53 |     const state = getMockState.withTwoNotes();
54 | 
55 |     const actualSelection = selectors.getNote(state, 'id-123');
56 |     const expectedSelection = {
57 |       id: 'id-123',
58 |       content: 'Hello world',
59 |       timestamp: 1,
60 |     };
61 | 
62 |     deepEqual(actualSelection, expectedSelection);
63 |     end();
64 |   }
65 | );
66 | 
67 | test('selector | getOpenNoteId :: Return null if state doesn\'t have open note set',
68 |   ({ equal, end }) => {
69 | 
70 |     const state = getMockState.withNoNotes();
71 | 
72 |     const actualSelection = selectors.getOpenNoteId(state);
73 |     const expectedSelection = null;
74 | 
75 |     equal(actualSelection, expectedSelection);
76 |     end();
77 |   }
78 | );
79 | 
80 | test('selector | getOpenNoteId :: Return note id if state has open note set',
81 |   ({ equal, end }) => {
82 | 
83 |     const state = getMockState.withOneNote();
84 | 
85 |     const actualSelection = selectors.getOpenNoteId(state);
86 |     const expectedSelection = 'id-123';
87 | 
88 |     equal(actualSelection, expectedSelection);
89 |     end();
90 |   }
91 | );
92 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/store/testUtils.js:
--------------------------------------------------------------------------------
 1 | export const getActionPayload = {
 2 |   fetchNotesSuccess: () => ({
 3 |     notes: {
 4 |       'id-123': {
 5 |         content: 'Hello world',
 6 |         timestamp: 1,
 7 |         id: 'id-123',
 8 |       },
 9 |     },
10 |     noteIds: [ 'id-123' ],
11 |   }),
12 | 
13 |   addNoteSuccess: () => ({
14 |     content: 'Hello world',
15 |     id: 'id-123',
16 |     timestamp: 1,
17 |   }),
18 | 
19 |   updateServerSuccess: () => ({
20 |     id: 'id-123',
21 |     content: 'new content',
22 |     timestamp: 123,
23 |   }),
24 | };
25 | 
26 | export const getMockState = {
27 |   withNoNotes: () => ({
28 |     byId: {},
29 |     ids: [],
30 |     openNoteId: null,
31 |   }),
32 |   withOneNote: () => ({
33 |     byId: {
34 |       'id-123': {
35 |         id: 'id-123',
36 |         content: 'Hello world',
37 |         timestamp: 1,
38 |       },
39 |     },
40 |     ids: [ 'id-123' ],
41 |     openNoteId: 'id-123',
42 |   }),
43 |   withTwoNotes: () => ({
44 |     byId: {
45 |       'id-123': {
46 |         id: 'id-123',
47 |         content: 'Hello world',
48 |         timestamp: 1,
49 |       },
50 |       'id-456': {
51 |         id: 'id-456',
52 |         content: 'Hi globe',
53 |         timestamp: 2,
54 |       },
55 |     },
56 |     ids: [ 'id-123', 'id-456' ],
57 |     openNoteId: 'id-456',
58 |   }),
59 |   withNoOpenNotes: () => ({
60 |     byId: {
61 |       'id-123': {
62 |         id: 'id-123',
63 |         content: 'Hello world',
64 |         timestamp: 1,
65 |       },
66 |     },
67 |     ids: [ 'id-123' ],
68 |     openNoteId: null,
69 |   }),
70 | };
71 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/utils/api.js:
--------------------------------------------------------------------------------
 1 | import 'isomorphic-fetch';
 2 | import { normalize, Schema, arrayOf } from 'normalizr';
 3 | 
 4 | const notes = new Schema('notes');
 5 | 
 6 | export const toJson = (res) => res.json();
 7 | 
 8 | export const checkStatus = (res) => {
 9 |   const { status } = res;
10 |   if (status >= 200 && status < 300) {
11 |     return res;
12 |   }
13 | 
14 |   return Promise.reject(new Error(res.statusText || res.status));
15 | };
16 | 
17 | export const normalizeNotesList = (data) => normalize(data, arrayOf(notes));
18 | 
19 | export const returnNotesAndIds = ({ entities: { notes }, result: noteIds }) => ({
20 |   notes,
21 |   noteIds,
22 | });
23 | 
24 | export const fetchJson = (url, options = {}) => (
25 |   fetch(url, {
26 |     ...options,
27 |     headers: {
28 |       ...options.headers,
29 |       'Accept': 'application/json',
30 |       'Content-Type': 'application/json',
31 |     },
32 |   })
33 |   .then(checkStatus)
34 |   .then(toJson)
35 | );
36 | 
37 | export default {
38 |   notes: {
39 | 
40 |     fetch() {
41 |       return fetchJson('/notes')
42 |         .then(normalizeNotesList)
43 |         .then(returnNotesAndIds);
44 |     },
45 | 
46 |     add(content) {
47 |       return fetchJson(
48 |         '/notes',
49 |         {
50 |           method: 'POST',
51 |           body: JSON.stringify({ content }),
52 |         }
53 |       );
54 |     },
55 | 
56 |     update(id, content) {
57 |       return fetchJson(
58 |         `/notes/${id}`,
59 |         {
60 |           method: 'PUT',
61 |           body: JSON.stringify({ content }),
62 |         }
63 |       );
64 |     },
65 | 
66 |     delete(id) {
67 |       return fetch(`/notes/${id}`, { method: 'DELETE' })
68 |         .then(checkStatus)
69 |         .then((res) => res.text());
70 |     },
71 |   },
72 | };
73 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/utils/api.test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import fetchMock from 'fetch-mock';
  3 | 
  4 | import api from './api';
  5 | import { testErrorRejection } from './testUtils';
  6 | 
  7 | test('api | notes.fetch ::', (t1) => {
  8 |   const NOTE_ONE = {
  9 |     id: 123,
 10 |     content: 'testing',
 11 |     timestamp: 1,
 12 |   };
 13 |   const NOTE_TWO = {
 14 |     id: 456,
 15 |     content: 'testing too',
 16 |     timestamp: 1,
 17 |   };
 18 |   const DUMMY_CREATE_RESPONSE = [ NOTE_ONE, NOTE_TWO ];
 19 | 
 20 |   t1.test('Returns notes and noteIds', ({ deepEqual, end }) => {
 21 |     fetchMock.mock('/notes', DUMMY_CREATE_RESPONSE);
 22 |     api.notes
 23 |       .fetch()
 24 |       .then(({ notes, noteIds }) => {
 25 |         const expedtedNotes = {
 26 |           [NOTE_ONE.id]: NOTE_ONE,
 27 |           [NOTE_TWO.id]: NOTE_TWO,
 28 |         };
 29 |         const expectedNoteIds = [ 123, 456 ];
 30 | 
 31 |         deepEqual(noteIds, expectedNoteIds);
 32 |         deepEqual(notes, expedtedNotes);
 33 | 
 34 |         end();
 35 |       });
 36 |   });
 37 | 
 38 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
 39 |     testErrorRejection({
 40 |       path: '/notes',
 41 |       equal,
 42 |       func: () => api.notes.fetch(),
 43 |     })
 44 |       .then(() => end());
 45 |   });
 46 | 
 47 |   t1.test('Teardown', ({ end }) => {
 48 |     fetchMock.restore();
 49 |     end();
 50 |   });
 51 | });
 52 | 
 53 | test('api | notes.add ::', (t1) => {
 54 |   const NOTE = {
 55 |     id: 123,
 56 |     timestamp: 1,
 57 |   };
 58 | 
 59 |   t1.test('Returns a new note from the api', ({ deepEqual, end }) => {
 60 |     fetchMock.mock('/notes', 'POST', (url, options) => {
 61 |       const { content } = JSON.parse(options.body);
 62 |       return {
 63 |         ...NOTE,
 64 |         content,
 65 |       };
 66 |     });
 67 | 
 68 |     api.notes
 69 |       .add('testContent')
 70 |       .then((note) => {
 71 |         const expectedNote = {
 72 |           ...NOTE,
 73 |           content: 'testContent',
 74 |         };
 75 |         deepEqual(note, expectedNote);
 76 |         end();
 77 |       });
 78 |   });
 79 | 
 80 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
 81 |     testErrorRejection({
 82 |       path: '/notes',
 83 |       equal,
 84 |       method: 'POST',
 85 |       func: () => api.notes.add('test'),
 86 |     })
 87 |       .then(() => end());
 88 |   });
 89 | 
 90 |   t1.test('Teardown', ({ end }) => {
 91 |     fetchMock.restore();
 92 |     end();
 93 |   });
 94 | });
 95 | 
 96 | test('api | notes.update ::', (t1) => {
 97 |   const NOTE = {
 98 |     id: 123,
 99 |     timestamp: 1,
100 |   };
101 | 
102 |   t1.test('Returns an updated note from the api', ({ deepEqual, end }) => {
103 |     fetchMock.mock('/notes/123', 'PUT', (url, options) => {
104 |       const { content } = JSON.parse(options.body);
105 |       return {
106 |         ...NOTE,
107 |         content,
108 |       };
109 |     });
110 | 
111 |     api.notes
112 |       .update(123, 'testContent')
113 |       .then((note) => {
114 |         const expectedNote = {
115 |           ...NOTE,
116 |           content: 'testContent',
117 |         };
118 |         deepEqual(note, expectedNote);
119 |         end();
120 |       });
121 |   });
122 | 
123 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
124 |     testErrorRejection({
125 |       path: '/notes/123',
126 |       equal,
127 |       method: 'PUT',
128 |       func: () => api.notes.update(123, 'test'),
129 |     })
130 |       .then(() => end());
131 |   });
132 | 
133 |   t1.test('Teardown', ({ end }) => {
134 |     fetchMock.restore();
135 |     end();
136 |   });
137 | });
138 | 
139 | test('api | notes.delete ::', (t1) => {
140 | 
141 |   t1.test('Removes a note from the api', ({ equal, end }) => {
142 |     fetchMock.mock('/notes/123', 'DELETE', 200);
143 | 
144 |     api.notes
145 |       .delete(123)
146 |       .then((res) => {
147 |         equal(res, '');
148 |         end();
149 |       });
150 |   });
151 | 
152 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
153 |     testErrorRejection({
154 |       path: '/notes/123',
155 |       method: 'DELETE',
156 |       equal,
157 |       func: () => api.notes.delete(123),
158 |     })
159 |       .then(() => end());
160 |   });
161 | 
162 |   t1.test('Teardown', ({ end }) => {
163 |     fetchMock.restore();
164 |     end();
165 |   });
166 | });
167 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/source/utils/testUtils.js:
--------------------------------------------------------------------------------
 1 | import fetchMock from 'fetch-mock';
 2 | 
 3 | export const testErrorRejection = ({ path, method = 'GET', equal, func }) => {
 4 |   const codes = [
 5 |     { status: 300, text: 'Multiple Choices' },
 6 |     { status: 400, text: 'Bad Request' },
 7 |     { status: 500, text: 'Internal Server Error' },
 8 |   ];
 9 | 
10 |   return codes.reduce((p, { status, text }) => (
11 |     p.then(() => {
12 |       fetchMock.reMock(path, method, { status });
13 |       return func()
14 |         .catch((error) => {
15 |           equal(error.message, text);
16 |         });
17 |     })
18 |   ), Promise.resolve());
19 | };
20 | 


--------------------------------------------------------------------------------
/chapter-04-syncing-with-server/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const entry = [ './source/index' ];
 4 | 
 5 | const output = {
 6 |   path: path.resolve(__dirname, 'public/js'),
 7 |   filename: 'app.js',
 8 | };
 9 | 
10 | const resolve = {
11 |   extensions: [ '', '.js', '.jsx' ],
12 | };
13 | 
14 | const scriptLoader = {
15 |   loader: 'babel',
16 |   include: path.resolve(__dirname, 'source'),
17 |   test: /\.jsx$|\.js$/,
18 | };
19 | 
20 | module.exports = {
21 |   devtool: 'eval',
22 |   entry,
23 |   output,
24 |   resolve,
25 |   module: { loaders: [ scriptLoader ] },
26 | };
27 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "react",
5 |     "stage-2"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "node": true,
 6 |     "es6": true
 7 |   },
 8 |   "ecmaFeatures": {
 9 |     "jsx": true,
10 |     "modules": true,
11 |     "spread": true,
12 |     "experimentalObjectRestSpread": true
13 |   },
14 |   "plugins": [
15 |     "react"
16 |   ],
17 |   "rules": {
18 |     "array-bracket-spacing": ["error", "always"],
19 |     "block-spacing": "error",
20 |     "comma-spacing": ["error", {"before": false, "after": true}],
21 |     "eqeqeq": ["error", "smart"],
22 |     "no-cond-assign": "error",
23 |     "no-const-assign": "error",
24 |     "no-dupe-args": "error",
25 |     "no-dupe-class-members": "error",
26 |     "no-dupe-keys": "error",
27 |     "no-duplicate-case": "error",
28 |     "no-empty": "error",
29 |     "no-eval": "error",
30 |     "no-extend-native": "error",
31 |     "no-extra-semi": "error",
32 |     "no-func-assign": "error",
33 |     "no-invalid-this": "error",
34 |     "no-irregular-whitespace": "error",
35 |     "no-lone-blocks": "error",
36 |     "no-mixed-spaces-and-tabs": "error",
37 |     "no-sparse-arrays": "error",
38 |     "no-undef": "error",
39 |     "no-use-before-define": "error",
40 |     "no-var": "error",
41 |     "object-shorthand": "error",
42 |     "prefer-arrow-callback": "error",
43 |     "react/jsx-indent-props": ["error", 2],
44 |     "react/jsx-no-duplicate-props": "error",
45 |     "react/jsx-no-undef": "error",
46 |     "react/jsx-uses-react": "error",
47 |     "react/jsx-uses-vars": "error",
48 |     "react/no-direct-mutation-state": "error",
49 |     "react/no-unknown-property": "error",
50 |     "react/self-closing-comp": "error",
51 |     "react/wrap-multilines": "error",
52 |     "arrow-parens": ["warn", "always"],
53 |     "arrow-spacing": "warn",
54 |     "brace-style": ["warn", "1tbs"],
55 |     "comma-dangle": ["warn", "always-multiline"],
56 |     "curly": ["warn", "multi-line"],
57 |     "dot-location": ["warn", "property"],
58 |     "jsx-quotes": ["warn", "prefer-double"],
59 |     "no-console": "warn",
60 |     "no-constant-condition": "warn",
61 |     "no-fallthrough": "warn",
62 |     "no-labels": "warn",
63 |     "no-multiple-empty-lines": ["warn", {"max": 1}],
64 |     "no-trailing-spaces": "warn",
65 |     "no-underscore-dangle": "warn",
66 |     "no-unneeded-ternary": "warn",
67 |     "no-unused-vars": ["warn"],
68 |     "object-curly-spacing": ["warn", "always"],
69 |     "prefer-const": "warn",
70 |     "prefer-spread": "warn",
71 |     "prefer-template": "warn",
72 |     "react/jsx-closing-bracket-location": ["warn", {"selfClosing": "props-aligned", "nonEmpty": "props-aligned"}],
73 |     "react/jsx-curly-spacing": ["warn", "never"],
74 |     "react/no-danger": "warn",
75 |     "react/prop-types": "warn",
76 |     "semi": ["warn", "always"]
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/js
3 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const express = require('express');
 3 | const app = express();
 4 | const uuid = require('uuid');
 5 | const bodyParser = require('body-parser');
 6 | 
 7 | const notes = {
 8 |   'a236c29f-2685-4ab4-b181-e58c10c45550': {
 9 |     id: 'a236c29f-2685-4ab4-b181-e58c10c45550',
10 |     content: "Hello world!",
11 |     timestamp: 1467901970847,
12 |   },
13 |   'a12b75ad-e06b-41f3-abbb-f6dcfae5c969': {
14 |     id: 'a12b75ad-e06b-41f3-abbb-f6dcfae5c969',
15 |     content: "Hi globe...",
16 |     timestamp: 1467901976596,
17 |   },
18 |   '5c500147-9525-4269-bd9d-d04ad44b21b3': {
19 |     id: '5c500147-9525-4269-bd9d-d04ad44b21b3',
20 |     content: "",
21 |     timestamp: 1467901977847,
22 |   },
23 | };
24 | 
25 | app.use(express.static('public'));
26 | app.use(bodyParser.json());
27 | app.use((req, res, next) => {
28 |   setTimeout(next, process.env.DELAY || 250);
29 | });
30 | 
31 | app.get('/api/notes', (req, res) => {
32 |   res.send(
33 |     Object.keys(notes)
34 |       .map((key) => notes[key])
35 |       .sort((a, b) => b.timestamp - a.timestamp)
36 |   );
37 | });
38 | 
39 | app.post('/api/notes', (req, res) => {
40 |   const note = {
41 |     id: uuid.v4(),
42 |     content: "",
43 |     timestamp: Date.now(),
44 |   };
45 |   notes[note.id] = note;
46 | 
47 |   res.send(note);
48 | });
49 | 
50 | app.delete('/api/notes/:id', (req, res) => {
51 |   const id = req.params.id;
52 |   const note = notes[id];
53 | 
54 |   if (!note) {
55 |     return res.sendStatus(404);
56 |   }
57 | 
58 |   delete notes[id];
59 |   res.send(note);
60 | });
61 | 
62 | app.put('/api/notes/:id', (req, res) => {
63 |   const note = notes[req.params.id];
64 | 
65 |   if (!note) {
66 |     return res.sendStatus(404);
67 |   }
68 | 
69 |   note.content = req.body.content;
70 |   res.send(note);
71 | });
72 | 
73 | app.get('*', (req, res) => {
74 |   res.sendFile(path.resolve(__dirname, 'public/index.html'));
75 | });
76 | 
77 | app.listen(3000, () => {
78 |   //eslint-disable-next-line no-console
79 |   console.log('`Developing a Redux Edge` notes app listening on port 3000!');
80 | });
81 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dare-notes-app",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "scripts": {
 6 |     "lint": "eslint 'source/**'",
 7 |     "test": "tape --require babel-register source/**/*.test.js",
 8 |     "prestart": "webpack",
 9 |     "start": "node index"
10 |   },
11 |   "author": "Artur Muller <me@arturmuller.com> (http://arturmuller.com)",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel-eslint": "^6.0.0",
15 |     "babel-register": "^6.9.0",
16 |     "eslint": "^2.12.0",
17 |     "eslint-plugin-react": "^4.3.0",
18 |     "fetch-mock": "^4.5.4",
19 |     "redux-mock-store": "^1.1.1",
20 |     "tape": "^4.5.1"
21 |   },
22 |   "dependencies": {
23 |     "babel-core": "^6.7.6",
24 |     "babel-loader": "^6.2.4",
25 |     "babel-preset-es2015": "^6.6.0",
26 |     "babel-preset-react": "^6.5.0",
27 |     "babel-preset-stage-2": "^6.5.0",
28 |     "body-parser": "^1.15.2",
29 |     "express": "^4.13.4",
30 |     "isomorphic-fetch": "^2.2.1",
31 |     "normalizr": "^2.1.0",
32 |     "ramda": "^0.21.0",
33 |     "react": "^15.0.0",
34 |     "react-dom": "^15.0.0",
35 |     "react-redux": "^4.0.0",
36 |     "redux": "^3.0.0",
37 |     "redux-logger": "^2.0.3",
38 |     "redux-thunk": "^2.1.0",
39 |     "uuid": "^2.0.2",
40 |     "webpack": "^1.12.2"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/public/css/animations.css:
--------------------------------------------------------------------------------
 1 | @keyframes rotate {
 2 |   from { transform: rotate(0deg); }
 3 |   to { transform: rotate(360deg); }
 4 | }
 5 | 
 6 | @keyframes slideIn {
 7 |   from { transform: translateX(10rem); opacity: 0; }
 8 |   to { transform: translateX(0); opacity: 1; }
 9 | }
10 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/public/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /**
  4 |  * 1. Change the default font family in all browsers (opinionated).
  5 |  * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
  6 |  */
  7 | 
  8 | html {
  9 |   font-family: sans-serif; /* 1 */
 10 |   -ms-text-size-adjust: 100%; /* 2 */
 11 |   -webkit-text-size-adjust: 100%; /* 2 */
 12 | }
 13 | 
 14 | /**
 15 |  * Remove the margin in all browsers (opinionated).
 16 |  */
 17 | 
 18 | body {
 19 |   margin: 0;
 20 | }
 21 | 
 22 | /* HTML5 display definitions
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Add the correct display in IE 9-.
 27 |  * 1. Add the correct display in Edge, IE, and Firefox.
 28 |  * 2. Add the correct display in IE.
 29 |  */
 30 | 
 31 | article,
 32 | aside,
 33 | details, /* 1 */
 34 | figcaption,
 35 | figure,
 36 | footer,
 37 | header,
 38 | main, /* 2 */
 39 | menu,
 40 | nav,
 41 | section,
 42 | summary { /* 1 */
 43 |   display: block;
 44 | }
 45 | 
 46 | /**
 47 |  * Add the correct display in IE 9-.
 48 |  */
 49 | 
 50 | audio,
 51 | canvas,
 52 | progress,
 53 | video {
 54 |   display: inline-block;
 55 | }
 56 | 
 57 | /**
 58 |  * Add the correct display in iOS 4-7.
 59 |  */
 60 | 
 61 | audio:not([controls]) {
 62 |   display: none;
 63 |   height: 0;
 64 | }
 65 | 
 66 | /**
 67 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 68 |  */
 69 | 
 70 | progress {
 71 |   vertical-align: baseline;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct display in IE 10-.
 76 |  * 1. Add the correct display in IE.
 77 |  */
 78 | 
 79 | template, /* 1 */
 80 | [hidden] {
 81 |   display: none;
 82 | }
 83 | 
 84 | /* Links
 85 |    ========================================================================== */
 86 | 
 87 | /**
 88 |  * 1. Remove the gray background on active links in IE 10.
 89 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 90 |  */
 91 | 
 92 | a {
 93 |   background-color: transparent; /* 1 */
 94 |   -webkit-text-decoration-skip: objects; /* 2 */
 95 | }
 96 | 
 97 | /**
 98 |  * Remove the outline on focused links when they are also active or hovered
 99 |  * in all browsers (opinionated).
100 |  */
101 | 
102 | a:active,
103 | a:hover {
104 |   outline-width: 0;
105 | }
106 | 
107 | /* Text-level semantics
108 |    ========================================================================== */
109 | 
110 | /**
111 |  * 1. Remove the bottom border in Firefox 39-.
112 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
113 |  */
114 | 
115 | abbr[title] {
116 |   border-bottom: none; /* 1 */
117 |   text-decoration: underline; /* 2 */
118 |   text-decoration: underline dotted; /* 2 */
119 | }
120 | 
121 | /**
122 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
123 |  */
124 | 
125 | b,
126 | strong {
127 |   font-weight: inherit;
128 | }
129 | 
130 | /**
131 |  * Add the correct font weight in Chrome, Edge, and Safari.
132 |  */
133 | 
134 | b,
135 | strong {
136 |   font-weight: bolder;
137 | }
138 | 
139 | /**
140 |  * Add the correct font style in Android 4.3-.
141 |  */
142 | 
143 | dfn {
144 |   font-style: italic;
145 | }
146 | 
147 | /**
148 |  * Correct the font size and margin on `h1` elements within `section` and
149 |  * `article` contexts in Chrome, Firefox, and Safari.
150 |  */
151 | 
152 | h1 {
153 |   font-size: 2em;
154 |   margin: 0.67em 0;
155 | }
156 | 
157 | /**
158 |  * Add the correct background and color in IE 9-.
159 |  */
160 | 
161 | mark {
162 |   background-color: #ff0;
163 |   color: #000;
164 | }
165 | 
166 | /**
167 |  * Add the correct font size in all browsers.
168 |  */
169 | 
170 | small {
171 |   font-size: 80%;
172 | }
173 | 
174 | /**
175 |  * Prevent `sub` and `sup` elements from affecting the line height in
176 |  * all browsers.
177 |  */
178 | 
179 | sub,
180 | sup {
181 |   font-size: 75%;
182 |   line-height: 0;
183 |   position: relative;
184 |   vertical-align: baseline;
185 | }
186 | 
187 | sub {
188 |   bottom: -0.25em;
189 | }
190 | 
191 | sup {
192 |   top: -0.5em;
193 | }
194 | 
195 | /* Embedded content
196 |    ========================================================================== */
197 | 
198 | /**
199 |  * Remove the border on images inside links in IE 10-.
200 |  */
201 | 
202 | img {
203 |   border-style: none;
204 | }
205 | 
206 | /**
207 |  * Hide the overflow in IE.
208 |  */
209 | 
210 | svg:not(:root) {
211 |   overflow: hidden;
212 | }
213 | 
214 | /* Grouping content
215 |    ========================================================================== */
216 | 
217 | /**
218 |  * 1. Correct the inheritance and scaling of font size in all browsers.
219 |  * 2. Correct the odd `em` font sizing in all browsers.
220 |  */
221 | 
222 | code,
223 | kbd,
224 | pre,
225 | samp {
226 |   font-family: monospace, monospace; /* 1 */
227 |   font-size: 1em; /* 2 */
228 | }
229 | 
230 | /**
231 |  * Add the correct margin in IE 8.
232 |  */
233 | 
234 | figure {
235 |   margin: 1em 40px;
236 | }
237 | 
238 | /**
239 |  * 1. Add the correct box sizing in Firefox.
240 |  * 2. Show the overflow in Edge and IE.
241 |  */
242 | 
243 | hr {
244 |   box-sizing: content-box; /* 1 */
245 |   height: 0; /* 1 */
246 |   overflow: visible; /* 2 */
247 | }
248 | 
249 | /* Forms
250 |    ========================================================================== */
251 | 
252 | /**
253 |  * 1. Change font properties to `inherit` in all browsers (opinionated).
254 |  * 2. Remove the margin in Firefox and Safari.
255 |  */
256 | 
257 | button,
258 | input,
259 | select,
260 | textarea {
261 |   font: inherit; /* 1 */
262 |   margin: 0; /* 2 */
263 | }
264 | 
265 | /**
266 |  * Restore the font weight unset by the previous rule.
267 |  */
268 | 
269 | optgroup {
270 |   font-weight: bold;
271 | }
272 | 
273 | /**
274 |  * Show the overflow in IE.
275 |  * 1. Show the overflow in Edge.
276 |  */
277 | 
278 | button,
279 | input { /* 1 */
280 |   overflow: visible;
281 | }
282 | 
283 | /**
284 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
285 |  * 1. Remove the inheritance of text transform in Firefox.
286 |  */
287 | 
288 | button,
289 | select { /* 1 */
290 |   text-transform: none;
291 | }
292 | 
293 | /**
294 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
295 |  *    controls in Android 4.
296 |  * 2. Correct the inability to style clickable types in iOS and Safari.
297 |  */
298 | 
299 | button,
300 | html [type="button"], /* 1 */
301 | [type="reset"],
302 | [type="submit"] {
303 |   -webkit-appearance: button; /* 2 */
304 | }
305 | 
306 | /**
307 |  * Remove the inner border and padding in Firefox.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | [type="button"]::-moz-focus-inner,
312 | [type="reset"]::-moz-focus-inner,
313 | [type="submit"]::-moz-focus-inner {
314 |   border-style: none;
315 |   padding: 0;
316 | }
317 | 
318 | /**
319 |  * Restore the focus styles unset by the previous rule.
320 |  */
321 | 
322 | button:-moz-focusring,
323 | [type="button"]:-moz-focusring,
324 | [type="reset"]:-moz-focusring,
325 | [type="submit"]:-moz-focusring {
326 |   outline: 1px dotted ButtonText;
327 | }
328 | 
329 | /**
330 |  * Change the border, margin, and padding in all browsers (opinionated).
331 |  */
332 | 
333 | fieldset {
334 |   border: 1px solid #c0c0c0;
335 |   margin: 0 2px;
336 |   padding: 0.35em 0.625em 0.75em;
337 | }
338 | 
339 | /**
340 |  * 1. Correct the text wrapping in Edge and IE.
341 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
342 |  * 3. Remove the padding so developers are not caught out when they zero out
343 |  *    `fieldset` elements in all browsers.
344 |  */
345 | 
346 | legend {
347 |   box-sizing: border-box; /* 1 */
348 |   color: inherit; /* 2 */
349 |   display: table; /* 1 */
350 |   max-width: 100%; /* 1 */
351 |   padding: 0; /* 3 */
352 |   white-space: normal; /* 1 */
353 | }
354 | 
355 | /**
356 |  * Remove the default vertical scrollbar in IE.
357 |  */
358 | 
359 | textarea {
360 |   overflow: auto;
361 | }
362 | 
363 | /**
364 |  * 1. Add the correct box sizing in IE 10-.
365 |  * 2. Remove the padding in IE 10-.
366 |  */
367 | 
368 | [type="checkbox"],
369 | [type="radio"] {
370 |   box-sizing: border-box; /* 1 */
371 |   padding: 0; /* 2 */
372 | }
373 | 
374 | /**
375 |  * Correct the cursor style of increment and decrement buttons in Chrome.
376 |  */
377 | 
378 | [type="number"]::-webkit-inner-spin-button,
379 | [type="number"]::-webkit-outer-spin-button {
380 |   height: auto;
381 | }
382 | 
383 | /**
384 |  * 1. Correct the odd appearance in Chrome and Safari.
385 |  * 2. Correct the outline style in Safari.
386 |  */
387 | 
388 | [type="search"] {
389 |   -webkit-appearance: textfield; /* 1 */
390 |   outline-offset: -2px; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
395 |  */
396 | 
397 | [type="search"]::-webkit-search-cancel-button,
398 | [type="search"]::-webkit-search-decoration {
399 |   -webkit-appearance: none;
400 | }
401 | 
402 | /**
403 |  * Correct the text style of placeholders in Chrome, Edge, and Safari.
404 |  */
405 | 
406 | ::-webkit-input-placeholder {
407 |   color: inherit;
408 |   opacity: 0.54;
409 | }
410 | 
411 | /**
412 |  * 1. Correct the inability to style clickable types in iOS and Safari.
413 |  * 2. Change font properties to `inherit` in Safari.
414 |  */
415 | 
416 | ::-webkit-file-upload-button {
417 |   -webkit-appearance: button; /* 1 */
418 |   font: inherit; /* 2 */
419 | }
420 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/public/css/resets.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html {
 6 |   font-family: Verdana, sans-serif;
 7 |   font-size: 15px;
 8 | }
 9 | 
10 | h1, h2, h3, h4, h5, h6, p, button, textarea {
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | 
15 | a, button, textarea {
16 |   display: block;
17 |   outline: none;
18 | }
19 | 
20 | button, textarea {
21 |   border: none;
22 |   background-color: transparent;
23 | }
24 | 
25 | textarea {
26 |   width: 100%;
27 |   resize: none;
28 | }
29 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Initial | Developing a Redux Edge</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" type="text/css" href="/css/normalize.css">
 8 |     <link rel="stylesheet" type="text/css" href="/css/resets.css">
 9 |     <link rel="stylesheet" type="text/css" href="/css/animations.css">
10 |   </head>
11 |   <body>
12 |     <div id="app"></div>
13 |     <script src="/js/app.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/api/index.js:
--------------------------------------------------------------------------------
 1 | import 'isomorphic-fetch';
 2 | import { normalize, Schema, arrayOf } from 'normalizr';
 3 | const notes = new Schema('notes');
 4 | 
 5 | export const rejectErrors = (res) => {
 6 |   const { status } = res;
 7 |   if (status >= 200 && status < 300) {
 8 |     return res;
 9 |   }
10 |   return Promise.reject({ message: res.statusText });
11 | };
12 | 
13 | export const fetchJson = (url, options = {}) => (
14 |   fetch(url, {
15 |     ...options,
16 |     headers: {
17 |       ...options.headers,
18 |       'Accept': 'application/json',
19 |       'Content-Type': 'application/json',
20 |     },
21 |   })
22 |   .then(rejectErrors)
23 |   .then((res) => res.json())
24 | );
25 | 
26 | export default {
27 |   notes: {
28 | 
29 |     readList() {
30 |       return fetchJson('/api/notes')
31 |         .then((data) => {
32 |           const normalized = normalize(data, arrayOf(notes));
33 |           return {
34 |             notes: normalized.entities.notes || {},
35 |             ids: normalized.result,
36 |           };
37 |         });
38 |     },
39 | 
40 |     create() {
41 |       return fetchJson(
42 |         '/api/notes',
43 |         {
44 |           method: 'POST',
45 |         }
46 |       );
47 |     },
48 | 
49 |     update(id, content) {
50 |       return fetchJson(
51 |         `/api/notes/${id}`,
52 |         {
53 |           method: 'PUT',
54 |           body: JSON.stringify({ content }),
55 |         }
56 |       );
57 |     },
58 | 
59 |     delete(id) {
60 |       return fetchJson(
61 |         `/api/notes/${id}`,
62 |         {
63 |           method: 'DELETE',
64 |         }
65 |       );
66 |     },
67 |   },
68 | };
69 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/api/test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import fetchMock from 'fetch-mock';
  3 | 
  4 | import api from './api';
  5 | import { testErrorRejection } from './testUtils';
  6 | 
  7 | test('api | notes.fetch ::', (t1) => {
  8 |   const NOTE_ONE = {
  9 |     id: 123,
 10 |     content: 'testing',
 11 |     timestamp: 1,
 12 |   };
 13 |   const NOTE_TWO = {
 14 |     id: 456,
 15 |     content: 'testing too',
 16 |     timestamp: 1,
 17 |   };
 18 |   const DUMMY_CREATE_RESPONSE = [ NOTE_ONE, NOTE_TWO ];
 19 | 
 20 |   t1.test('Returns notes and noteIds', ({ deepEqual, end }) => {
 21 |     fetchMock.mock('/notes', DUMMY_CREATE_RESPONSE);
 22 |     api.notes
 23 |       .fetch()
 24 |       .then(({ notes, noteIds }) => {
 25 |         const expedtedNotes = {
 26 |           [NOTE_ONE.id]: NOTE_ONE,
 27 |           [NOTE_TWO.id]: NOTE_TWO,
 28 |         };
 29 |         const expectedNoteIds = [ 123, 456 ];
 30 | 
 31 |         deepEqual(noteIds, expectedNoteIds);
 32 |         deepEqual(notes, expedtedNotes);
 33 | 
 34 |         end();
 35 |       });
 36 |   });
 37 | 
 38 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
 39 |     testErrorRejection({
 40 |       path: '/notes',
 41 |       equal,
 42 |       func: () => api.notes.fetch(),
 43 |     })
 44 |       .then(() => end());
 45 |   });
 46 | 
 47 |   t1.test('Teardown', ({ end }) => {
 48 |     fetchMock.restore();
 49 |     end();
 50 |   });
 51 | });
 52 | 
 53 | test('api | notes.add ::', (t1) => {
 54 |   const NOTE = {
 55 |     id: 123,
 56 |     timestamp: 1,
 57 |   };
 58 | 
 59 |   t1.test('Returns a new note from the api', ({ deepEqual, end }) => {
 60 |     fetchMock.mock('/notes', 'POST', (url, options) => {
 61 |       const { content } = JSON.parse(options.body);
 62 |       return {
 63 |         ...NOTE,
 64 |         content,
 65 |       };
 66 |     });
 67 | 
 68 |     api.notes
 69 |       .add('testContent')
 70 |       .then((note) => {
 71 |         const expectedNote = {
 72 |           ...NOTE,
 73 |           content: 'testContent',
 74 |         };
 75 |         deepEqual(note, expectedNote);
 76 |         end();
 77 |       });
 78 |   });
 79 | 
 80 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
 81 |     testErrorRejection({
 82 |       path: '/notes',
 83 |       equal,
 84 |       method: 'POST',
 85 |       func: () => api.notes.add('test'),
 86 |     })
 87 |       .then(() => end());
 88 |   });
 89 | 
 90 |   t1.test('Teardown', ({ end }) => {
 91 |     fetchMock.restore();
 92 |     end();
 93 |   });
 94 | });
 95 | 
 96 | test('api | notes.update ::', (t1) => {
 97 |   const NOTE = {
 98 |     id: 123,
 99 |     timestamp: 1,
100 |   };
101 | 
102 |   t1.test('Returns an updated note from the api', ({ deepEqual, end }) => {
103 |     fetchMock.mock('/notes/123', 'PUT', (url, options) => {
104 |       const { content } = JSON.parse(options.body);
105 |       return {
106 |         ...NOTE,
107 |         content,
108 |       };
109 |     });
110 | 
111 |     api.notes
112 |       .update(123, 'testContent')
113 |       .then((note) => {
114 |         const expectedNote = {
115 |           ...NOTE,
116 |           content: 'testContent',
117 |         };
118 |         deepEqual(note, expectedNote);
119 |         end();
120 |       });
121 |   });
122 | 
123 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
124 |     testErrorRejection({
125 |       path: '/notes/123',
126 |       equal,
127 |       method: 'PUT',
128 |       func: () => api.notes.update(123, 'test'),
129 |     })
130 |       .then(() => end());
131 |   });
132 | 
133 |   t1.test('Teardown', ({ end }) => {
134 |     fetchMock.restore();
135 |     end();
136 |   });
137 | });
138 | 
139 | test('api | notes.delete ::', (t1) => {
140 | 
141 |   t1.test('Removes a note from the api', ({ equal, end }) => {
142 |     fetchMock.mock('/notes/123', 'DELETE', 200);
143 | 
144 |     api.notes
145 |       .delete(123)
146 |       .then((res) => {
147 |         equal(res, '');
148 |         end();
149 |       });
150 |   });
151 | 
152 |   t1.test('Gets rejected with an error containing the status text if the status is not 2xx', ({ equal, end }) => {
153 |     testErrorRejection({
154 |       path: '/notes/123',
155 |       method: 'DELETE',
156 |       equal,
157 |       func: () => api.notes.delete(123),
158 |     })
159 |       .then(() => end());
160 |   });
161 | 
162 |   t1.test('Teardown', ({ end }) => {
163 |     fetchMock.restore();
164 |     end();
165 |   });
166 | });
167 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/api/testUtils.js:
--------------------------------------------------------------------------------
 1 | import fetchMock from 'fetch-mock';
 2 | 
 3 | export const testErrorRejection = ({ path, method = 'GET', equal, func }) => {
 4 |   const codes = [
 5 |     { status: 300, text: 'Multiple Choices' },
 6 |     { status: 400, text: 'Bad Request' },
 7 |     { status: 500, text: 'Internal Server Error' },
 8 |   ];
 9 | 
10 |   return codes.reduce((p, { status, text }) => (
11 |     p.then(() => {
12 |       fetchMock.reMock(path, method, { status });
13 |       return func()
14 |         .catch((error) => {
15 |           equal(error.message, text);
16 |         });
17 |     })
18 |   ), Promise.resolve());
19 | };
20 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/App/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Component } from 'react';
 3 | import { PropTypes } from 'react';
 4 | import { connect } from 'react-redux';
 5 | import NotesList from '../NotesList';
 6 | import NoteDetail from '../NoteDetail';
 7 | import Toasts from '../Toasts';
 8 | import Nav from '../Nav';
 9 | import * as selectors from '../../store/selectors';
10 | import * as actionCreators from '../../store/actions';
11 | import * as style from './style';
12 | 
13 | class App extends Component {
14 |   componentWillMount() {
15 |     this.props.requestReadNotes();
16 |   }
17 | 
18 |   render() {
19 |     const { readNotesRequest } = this.props;
20 | 
21 |     switch (readNotesRequest.status) {
22 |       case 'success':
23 |         return (
24 |           <div style={style.wrapper}>
25 |             <Nav />
26 |             <Toasts />
27 |             <div style={style.row}>
28 |               <NotesList />
29 |               <NoteDetail />
30 |             </div>
31 |           </div>
32 |         );
33 |       case 'failure':
34 |         return (
35 |           <div style={style.notice}>
36 |             {(readNotesRequest.error.message === 'Failed to fetch')
37 |               ? 'No connection, try again later!'
38 |               : 'Hmm... Something didn\'t go as planned.'
39 |             }
40 |           </div>
41 |         );
42 |       default:
43 |         return (
44 |           <div style={style.notice}>
45 |             Loading...
46 |           </div>
47 |         );
48 |     }
49 |   }
50 | }
51 | 
52 | App.propTypes = {
53 |   requestReadNotes: PropTypes.func.isRequired,
54 |   readNotesRequest: PropTypes.object.isRequired,
55 | };
56 | 
57 | const mapStateToProps = (state) => ({
58 |   readNotesRequest: selectors.getRequest(state, 'readNotes'),
59 | });
60 | 
61 | export default connect(mapStateToProps, actionCreators)(App);
62 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/App/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   display: 'flex',
 3 |   flexDirection: 'column',
 4 |   height: '100vh',
 5 | };
 6 | 
 7 | export const row = {
 8 |   display: 'flex',
 9 |   flexGrow: 1,
10 | };
11 | 
12 | export const notice = {
13 |   color: '#d8d8d8',
14 |   textAlign: 'center',
15 |   fontSize: '1.4rem',
16 |   padding: '5rem 2rem 2rem',
17 |   backgroundColor: '#fafafa',
18 |   height: '100vh',
19 | };
20 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/Nav/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { PropTypes } from 'react';
 3 | import { connect } from 'react-redux';
 4 | import * as selectors from '../../store/selectors';
 5 | import * as styles from './styles';
 6 | 
 7 | const Spinner = () => (
 8 |   <svg style={styles.spinner} width="2.8em" height="2.8em" viewBox="0 0 42 42">
 9 |     <g stroke="none" fill="none" transform="translate(1, 1)">
10 |       <path d="M18.5,0 L21.5,0 L21.5,9 L18.5,9 L18.5,0 L18.5,0 Z M28.7009619,1.92949192 L31.2990381,3.42949192 L26.7990381,11.2237206 L24.2009619,9.72372056 L28.7009619,1.92949192 L28.7009619,1.92949192 Z M36.5705081,8.70096189 L38.0705081,11.2990381 L30.2762794,15.7990381 L28.7762794,13.2009619 L36.5705081,8.70096189 L36.5705081,8.70096189 Z M40,18.5 L40,21.5 L31,21.5 L31,18.5 L40,18.5 L40,18.5 Z M38.0705081,28.7009619 L36.5705081,31.2990381 L28.7762794,26.7990381 L30.2762794,24.2009619 L38.0705081,28.7009619 L38.0705081,28.7009619 Z M31.2990381,36.5705081 L28.7009619,38.0705081 L24.2009619,30.2762794 L26.7990381,28.7762794 L31.2990381,36.5705081 L31.2990381,36.5705081 Z M21.5,40 L18.5,40 L18.5,31 L21.5,31 L21.5,40 L21.5,40 Z M11.2990381,38.0705081 L8.70096189,36.5705081 L13.2009619,28.7762794 L15.7990381,30.2762794 L11.2990381,38.0705081 L11.2990381,38.0705081 Z M3.42949192,31.2990381 L1.92949192,28.7009619 L9.7237206,24.2009619 L11.2237206,26.7990381 L3.42949192,31.2990381 L3.42949192,31.2990381 Z M0,21.5 L0,18.5 L9,18.5 L9,21.5 L0,21.5 L0,21.5 Z M1.92949192,11.2990381 L3.42949192,8.70096189 L11.2237206,13.2009619 L9.7237206,15.7990381 L1.92949192,11.2990381 L1.92949192,11.2990381 Z M8.70096189,3.42949192 L11.2990381,1.92949192 L15.7990381,9.72372056 L13.2009619,11.2237206 L8.70096189,3.42949192 L8.70096189,3.42949192 Z" fill="#ADBCC9"></path>
11 |     </g>
12 |   </svg>
13 | );
14 | 
15 | const Nav = ({ areRequestsPending }) => (
16 |   <div style={styles.wrapper}>
17 |     <h1 style={styles.heading}>Developing a Redux Edge: Notes</h1>
18 |     {areRequestsPending && <Spinner />}
19 |   </div>
20 | );
21 | 
22 | Nav.propTypes = {
23 |   areRequestsPending: PropTypes.bool.isRequired,
24 | };
25 | 
26 | const mapStateToProps = (state) => ({
27 |   areRequestsPending: selectors.areRequestsPending(selectors.getRequests(state)),
28 | });
29 | 
30 | export default connect(mapStateToProps)(Nav);
31 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/Nav/styles.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   display: 'flex',
 3 |   minHeight: '3.8rem',
 4 |   padding: '0 1rem',
 5 |   boxShadow: '0 .2rem .4rem rgba(0,0,0,.1)',
 6 |   justifyContent: 'space-between',
 7 |   alignItems: 'center',
 8 |   zIndex: 1,
 9 | };
10 | 
11 | export const heading = {
12 |   color: 'black',
13 |   fontWeight: '400',
14 |   fontSize: '1.2rem',
15 |   textAlign: 'center',
16 | };
17 | 
18 | export const spinner = {
19 |   color: 'grey',
20 |   fontSize: '.8rem',
21 |   textAlign: 'center',
22 |   animationName: 'rotate',
23 |   animationDuration: '1.5s',
24 |   animationIterationCount: 'infinite',
25 |   animationTimingFunction: 'linear',
26 | };
27 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/NoteDetail/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { connect } from 'react-redux';
 3 | import * as actionCreators from '../../store/actions';
 4 | import * as selectors from '../../store/selectors';
 5 | import * as style from './style';
 6 | 
 7 | const NoteDetail = ({ note, closeNote, updateNote, requestDeleteNote, requestUpdateNote, updateNoteRequest, deleteNoteRequest }) => (
 8 |   <div style={style.wrapper}>
 9 |     {!note
10 |       ? <div style={style.blankslate}>No note is open</div>
11 |       : <div style={style.note}>
12 |           <div style={style.date}>
13 |             {new Date(note.timestamp).toLocaleString()}
14 |           </div>
15 |           <textarea
16 |             autoFocus
17 |             key={note.id}
18 |             style={style.textarea}
19 |             onChange={(event) => updateNote(event.target.value, note.id)}
20 |             placeholder="New note..."
21 |             value={note.content}
22 |             />
23 |           <div style={style.row}>
24 |             <button
25 |               onClick={() => requestUpdateNote(note.id, note.content)}
26 |               disabled={updateNoteRequest.status === 'pending'}
27 |               style={style.button}
28 |               >
29 |               {updateNoteRequest.status === 'pending'
30 |                 ? 'Saving...' : 'Save'}
31 |             </button>
32 |             <div style={style.group}>
33 |               <button
34 |                 onClick={() => requestDeleteNote(note.id)}
35 |                 disabled={deleteNoteRequest.status === 'pending'}
36 |                 style={{ ...style.button, ...style.danger, ...style.marginLeft }}
37 |                 >
38 |                 {deleteNoteRequest.status === 'pending'
39 |                   ? 'Removing...' : 'Remove'}
40 |               </button>
41 |               <button
42 |                 onClick={closeNote}
43 |                 style={{ ...style.button, ...style.marginLeft }}
44 |                 >
45 |                 Close
46 |               </button>
47 |             </div>
48 |           </div>
49 |         </div>
50 |     }
51 |   </div>
52 | );
53 | 
54 | NoteDetail.propTypes = {
55 |   note: PropTypes.shape({
56 |     id: PropTypes.string.isRequired,
57 |     content: PropTypes.string.isRequired,
58 |     timestamp: PropTypes.number.isRequired,
59 |   }),
60 |   updateNote: PropTypes.func.isRequired,
61 |   requestUpdateNote: PropTypes.func.isRequired,
62 |   requestDeleteNote: PropTypes.func.isRequired,
63 |   closeNote: PropTypes.func.isRequired,
64 |   updateNoteRequest: PropTypes.object.isRequired,
65 |   deleteNoteRequest: PropTypes.object.isRequired,
66 | };
67 | 
68 | const mapStateToProps = (state) => {
69 |   const openNoteId = selectors.getOpenNoteId(state);
70 |   return {
71 |     note: selectors.getNote(state, openNoteId),
72 |     updateNoteRequest: selectors.getRequest(state, `updateNote/${openNoteId}`),
73 |     deleteNoteRequest: selectors.getRequest(state, `deleteNote/${openNoteId}`),
74 |   };
75 | };
76 | 
77 | export default connect(mapStateToProps, actionCreators)(NoteDetail);
78 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/NoteDetail/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   flexGrow: 1,
 3 |   padding: '3rem',
 4 |   backgroundColor: '#fafafa',
 5 |   overflowY: 'scroll',
 6 | };
 7 | 
 8 | export const note = {
 9 |   height: '100%',
10 |   display: 'flex',
11 |   flexDirection: 'column',
12 | };
13 | 
14 | export const date = {
15 |   fontSize: '0.75rem',
16 |   color: '#808080',
17 |   marginBottom: '2rem',
18 | };
19 | 
20 | export const textarea = {
21 |   flexGrow: 1,
22 |   lineHeight: 1.4,
23 | };
24 | 
25 | export const blankslate = {
26 |   padding: '5rem',
27 |   textAlign: 'center',
28 |   fontSize: '0.75rem',
29 |   color: '#808080',
30 | };
31 | 
32 | export const row = {
33 |   display: 'flex',
34 |   justifyContent: 'space-between',
35 |   paddingTop: '1rem',
36 | };
37 | 
38 | export const group = {
39 |   display: 'flex',
40 | };
41 | 
42 | export const button = {
43 |   padding: '0.8rem 1rem',
44 |   backgroundColor: "#f2f2f2",
45 | };
46 | 
47 | export const marginLeft = {
48 |   marginLeft: '0.8rem',
49 | };
50 | 
51 | export const danger = {
52 |   color: '#ec8c8e',
53 | };
54 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/NotesList/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { PropTypes } from 'react';
 3 | import { connect } from 'react-redux';
 4 | import * as actionCreators from '../../store/actions';
 5 | import * as selectors from '../../store/selectors';
 6 | import * as style from './style';
 7 | 
 8 | const NotesList = ({ notes, openNoteId, openNote, requestCreateNote, createNoteRequest } ) => (
 9 |   <div style={style.wrapper}>
10 |     <button
11 |       style={style.addNoteButton}
12 |       onClick={requestCreateNote}
13 |       disabled={createNoteRequest.status === 'pending'}
14 |       >
15 |       {createNoteRequest.status === 'pending'
16 |         ? 'Adding Note...' : 'Add Note'}
17 |     </button>
18 |     {(notes.length === 0)
19 |       ? <div style={style.blankslate}>No notes</div>
20 |       : notes.map((note) => (
21 |           <button
22 |             key={note.id}
23 |             style={(note.id === openNoteId)
24 |               ? { ...style.note, ...style.selected }
25 |               : style.note
26 |             }
27 |             onClick={() => openNote(note.id)}
28 |             >
29 |             {note.content === ''
30 |               ? <span style={style.newNoteLabel}>New note...</span>
31 |               : note.content
32 |             }
33 |           </button>
34 |       ))
35 |     }
36 |   </div>
37 | );
38 | 
39 | NotesList.propTypes = {
40 |   notes: PropTypes.arrayOf(PropTypes.shape({
41 |     content: PropTypes.string,
42 |     id: PropTypes.string.isRequired,
43 |   })).isRequired,
44 |   openNoteId: PropTypes.string,
45 |   openNote: PropTypes.func.isRequired,
46 |   requestCreateNote: PropTypes.func.isRequired,
47 |   createNoteRequest: PropTypes.object.isRequired,
48 | };
49 | 
50 | const mapStateToProps = (state) => ({
51 |   notes: selectors.getNotes(state),
52 |   openNoteId: selectors.getOpenNoteId(state),
53 |   createNoteRequest: selectors.getRequest(state, 'createNote'),
54 | });
55 | 
56 | export default connect(mapStateToProps, actionCreators)(NotesList);
57 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/NotesList/style.js:
--------------------------------------------------------------------------------
 1 | export const wrapper = {
 2 |   width: '22rem',
 3 |   padding: '1rem',
 4 |   overflowX: 'hidden',
 5 |   overflowY: 'auto',
 6 |   backgroundColor: '#00cf87',
 7 | };
 8 | 
 9 | export const addNoteButton = {
10 |   width: '100%',
11 |   marginBottom: '1rem',
12 |   padding: '0.8rem 1rem',
13 |   textAlign: 'center',
14 |   textTransform: 'uppercase',
15 |   border: '1px solid white',
16 |   borderRadius: 3,
17 |   color: 'white',
18 | };
19 | 
20 | export const note = {
21 |   width: '100%',
22 |   height: '3rem',
23 |   marginBottom: '0.2rem',
24 |   padding: '0.8rem 1rem',
25 |   textAlign: 'left',
26 |   textOverflow: 'ellipsis',
27 |   whiteSpace: 'nowrap',
28 |   overflow: 'hidden',
29 |   borderRadius: 3,
30 |   color: 'black',
31 |   backgroundColor: 'white',
32 |   boxShadow: '0px 2px 3px rgba(0,0,0,0.1)',
33 |   transition: 'border-right 0.1s linear',
34 | };
35 | 
36 | export const newNoteLabel = {
37 |   color: '#c3c3c3',
38 | };
39 | 
40 | export const selected = {
41 |   borderRight: '0.8rem solid #f3805b',
42 | };
43 | 
44 | export const blankslate = {
45 |   padding: '1rem',
46 |   fontSize: '0.75rem',
47 |   textAlign: 'center',
48 |   color: 'white',
49 |   opacity: 0.6,
50 | };
51 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/Toasts/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { PropTypes } from 'react';
 3 | import { connect } from 'react-redux';
 4 | import * as actionCreators from '../../store/actions';
 5 | import * as selectors from '../../store/selectors';
 6 | import * as styles from './styles';
 7 | 
 8 | class Toast extends React.Component {
 9 |   componentDidMount() {
10 |     this.timeout = setTimeout(
11 |       () => this.props.clearToast(this.props.id),
12 |       3000
13 |     );
14 |   }
15 |   componentWillUnmount() {
16 |     if (this.timeout) {
17 |       clearTimeout(this.timeout);
18 |     }
19 |   }
20 |   render() {
21 |     const { id, message, level } = this.props;
22 |     return (
23 |       <div key={id} style={{ ...styles.toast, ...styles[level] }}>
24 |         {message}
25 |       </div>
26 |     );
27 |   }
28 | }
29 | 
30 | Toast.propTypes = {
31 |   id: PropTypes.string.isRequired,
32 |   message: PropTypes.string.isRequired,
33 |   level: PropTypes.oneOf([ 'info', 'warn' ]).isRequired,
34 | };
35 | 
36 | const Toasts = ({ toast, clearToast }) => (
37 |   <div style={styles.wrapper}>
38 |     {toast &&
39 |       <Toast
40 |         {...toast}
41 |         key={toast.id}
42 |         clearToast={clearToast}
43 |         />
44 |     }
45 |   </div>
46 | );
47 | 
48 | Toasts.propTypes = {
49 |   toast: PropTypes.shape(Toast.propTypes),
50 |   clearToast: PropTypes.func.isRequired,
51 | };
52 | 
53 | const mapStateToProps = (state) => ({
54 |   toast: selectors.getToast(state),
55 | });
56 | 
57 | export default connect(mapStateToProps, actionCreators)(Toasts);
58 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/components/Toasts/styles.js:
--------------------------------------------------------------------------------
 1 | export const toast = {
 2 |   position: 'fixed',
 3 |   right: '0.75rem',
 4 |   top: '4.75rem',
 5 |   boxShadow: '0 .2rem .4rem rgba(0,0,0,.1)',
 6 |   borderRadius: '.2rem',
 7 |   padding: '1rem',
 8 |   animationName: 'slideIn',
 9 |   animationDuration: '.2s',
10 | };
11 | 
12 | export const info = {
13 |   backgroundColor: 'black',
14 |   color: 'white',
15 | };
16 | 
17 | export const warn = {
18 |   backgroundColor: '#b93f55',
19 |   color: 'white',
20 | };
21 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { Provider } from 'react-redux';
 4 | import App from './components/App';
 5 | import configureStore from './store';
 6 | 
 7 | ReactDOM.render(
 8 |   <Provider store={configureStore()}>
 9 |     <App />
10 |   </Provider>,
11 |   document.getElementById('app')
12 | );
13 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/actions.js:
--------------------------------------------------------------------------------
  1 | import api from '../api';
  2 | import { v4 } from 'uuid';
  3 | 
  4 | export const noop = (explanation) => ({
  5 |   type: 'app/noop',
  6 |   payload: explanation,
  7 | });
  8 | 
  9 | export const insertNote = (note) => ({
 10 |   type: 'app/insertNote',
 11 |   payload: note,
 12 | });
 13 | 
 14 | export const replaceNotes = (notes) => ({
 15 |   type: 'app/replaceNotes',
 16 |   payload: notes,
 17 | });
 18 | 
 19 | export const updateNote = (content, id, timestamp = Date.now()) => ({
 20 |   type: 'app/updateNote',
 21 |   payload: {
 22 |     id,
 23 |     content,
 24 |     timestamp,
 25 |   },
 26 | });
 27 | 
 28 | export const removeNote = (id) => ({
 29 |   type: 'app/removeNote',
 30 |   payload: { id },
 31 | });
 32 | 
 33 | export const closeNote = () => ({
 34 |   type: 'app/closeNote',
 35 | });
 36 | 
 37 | export const openNote = (id) => ({
 38 |   type: 'app/openNote',
 39 |   payload: { id },
 40 | });
 41 | 
 42 | export const setToast = (message, level = 'info', id = v4() ) => ({
 43 |   type: 'app/setToast',
 44 |   payload: {
 45 |     id,
 46 |     message,
 47 |     level,
 48 |   },
 49 | });
 50 | 
 51 | export const clearToast = () => ({
 52 |   type: 'app/clearToast',
 53 | });
 54 | 
 55 | export const markRequestPending = (key) => ({
 56 |   type: 'app/markRequestPending',
 57 |   meta: { key },
 58 | });
 59 | 
 60 | export const markRequestSuccess = (key) => ({
 61 |   type: 'app/markRequestSuccess',
 62 |   meta: { key },
 63 | });
 64 | 
 65 | export const markRequestFailed = (reason, key) => ({
 66 |   type: 'app/markRequestFailed',
 67 |   payload: reason,
 68 |   meta: { key },
 69 | });
 70 | 
 71 | export const createRequestThunk = ({ request, key, start = [], success = [], failure = [] }) => {
 72 | 
 73 |   return (...args) => (dispatch) => {
 74 |     const requestKey = (typeof key === 'function') ? key(...args) : key;
 75 | 
 76 |     start.forEach((actionCreator) => dispatch(actionCreator()));
 77 |     dispatch(markRequestPending(requestKey));
 78 |     return request(...args)
 79 |       .then((data) => {
 80 |         success.forEach((actionCreator) => dispatch(actionCreator(data)));
 81 |         dispatch(markRequestSuccess(requestKey));
 82 |       })
 83 |       .catch((reason) => {
 84 |         failure.forEach((actionCreator) => dispatch(actionCreator(reason)));
 85 |         dispatch(markRequestFailed(reason, requestKey));
 86 |       });
 87 |   };
 88 | };
 89 | 
 90 | export const requestReadNotes = createRequestThunk({
 91 |   request: api.notes.readList,
 92 |   key: 'readNotes',
 93 |   success: [ replaceNotes, (notes) => (notes.ids.length > 0) ? openNote(notes.ids[0]) : noop('No note to open') ],
 94 | });
 95 | 
 96 | export const requestCreateNote = createRequestThunk({
 97 |   request: api.notes.create,
 98 |   key: 'createNote',
 99 |   success: [ insertNote, (note) => openNote(note.id), () => setToast('Note created') ],
100 |   failure: [ () => setToast('Couldn\'t add note', 'warn') ],
101 | });
102 | 
103 | export const requestUpdateNote = createRequestThunk({
104 |   request: api.notes.update,
105 |   key: (id) => `updateNote/${id}`,
106 |   success: [ updateNote, () => setToast('Note saved') ],
107 |   failure: [ () => setToast('Couldn\'t save note', 'warn') ],
108 | });
109 | 
110 | export const requestDeleteNote = createRequestThunk({
111 |   request: api.notes.delete,
112 |   key: (id) => `deleteNote/${id}`,
113 |   success: [ (note) => removeNote(note.id), () => setToast('Note deleted') ],
114 |   failure: [ () => setToast('Couldn\'t remove note', 'warn') ],
115 | });
116 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/actions.test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import configureStore from 'redux-mock-store';
  3 | import thunk from 'redux-thunk';
  4 | import fetchMock from 'fetch-mock';
  5 | 
  6 | import * as actions from './actions';
  7 | 
  8 | const middlewares = [ thunk ];
  9 | const mockStore = configureStore(middlewares);
 10 | 
 11 | const assertReturnsFunction = ({ equal, end }, func) => {
 12 |   const result = func();
 13 |   equal(typeof result, 'function');
 14 |   end();
 15 | };
 16 | 
 17 | const assertFirstDispatchedAction = ({ func, type, deepEqual, end }) => {
 18 |   const store = mockStore({});
 19 |   store.dispatch(func());
 20 |   const dispatchedActions = store.getActions();
 21 |   const actualAction = dispatchedActions[0];
 22 |   const expectedAction = {
 23 |     type,
 24 |     meta: {
 25 |       done: false,
 26 |     },
 27 |   };
 28 | 
 29 |   deepEqual(actualAction, expectedAction);
 30 |   end();
 31 | };
 32 | 
 33 | const assertLastDispatchedAction = ({ deepEqual, end, func, expectedAction }) => {
 34 |   const store = mockStore({});
 35 |   store.dispatch(func())
 36 |     .then(() => {
 37 |       const dispatchedActions = store.getActions();
 38 |       const actualAction = dispatchedActions[dispatchedActions.length - 1];
 39 |       deepEqual(actualAction, expectedAction);
 40 |       end();
 41 |     });
 42 | };
 43 | 
 44 | const createErrorAction = (type) => ({
 45 |   type,
 46 |   payload: {},
 47 |   error: true,
 48 |   meta: { done: true },
 49 | });
 50 | 
 51 | const createSuccessAction = (type, payload) => ({
 52 |   type,
 53 |   payload,
 54 |   meta: { done: true },
 55 | });
 56 | 
 57 | const testAsyncAction = ({ test }, options) => {
 58 |   const {
 59 |     path,
 60 |     method,
 61 |     successMockReturn,
 62 |     successPayload,
 63 |     failureMockReturn,
 64 |     func,
 65 |     type,
 66 |   } = options;
 67 | 
 68 |   test('Setup', ({ end }) => {
 69 |     fetchMock.mock(path, method, successMockReturn);
 70 |     end();
 71 |   });
 72 | 
 73 |   test('Returns a function', (test) => {
 74 |     assertReturnsFunction(test, func);
 75 |   });
 76 | 
 77 |   test('Dispatches initial action', (test) => {
 78 |     assertFirstDispatchedAction({ ...test, func, type });
 79 |   });
 80 | 
 81 |   test('Dispatches correct action on success', (test) => {
 82 |     const expectedAction = createSuccessAction(type, successPayload);
 83 |     assertLastDispatchedAction({ ...test, func, expectedAction });
 84 |   });
 85 | 
 86 |   test('Dispatches correct action on failure', (test) => {
 87 |     fetchMock.reMock(path, method, failureMockReturn);
 88 |     const expectedAction = createErrorAction(type);
 89 |     assertLastDispatchedAction({ ...test, func, expectedAction });
 90 |   });
 91 | 
 92 |   test('Teardown', ({ end }) => {
 93 |     fetchMock.restore();
 94 |     end();
 95 |   });
 96 | };
 97 | 
 98 | test('action creator | fetchNotes ::', (t1) => {
 99 |   const NOTE = {
100 |     id: 123,
101 |     content: 'testing',
102 |     timestamp: 456,
103 |   };
104 |   const func = () => actions.fetchNotes();
105 |   const type = 'app/fetchNotes';
106 |   const successPayload = { noteIds: [ NOTE.id ], notes: { [NOTE.id]: NOTE } };
107 |   const path = '/notes';
108 |   const method = 'GET';
109 |   const successMockReturn = [ NOTE ];
110 |   const failureMockReturn = { body: {}, status: 400 };
111 | 
112 |   testAsyncAction(t1, {
113 |     func,
114 |     type,
115 |     successPayload,
116 |     path,
117 |     method,
118 |     successMockReturn,
119 |     failureMockReturn,
120 |   });
121 | });
122 | 
123 | test('action creator | addNote ::', (t1) => {
124 |   const successPayload = {
125 |     id: 123,
126 |     content: 'Hi',
127 |     timestamp: 456,
128 |   };
129 |   const func = () => actions.addNote('Hi');
130 |   const type = 'app/addNote';
131 |   const path = '/notes';
132 |   const method = 'POST';
133 |   const successMockReturn = (url, { body }) => ({
134 |     id: 123,
135 |     content: JSON.parse(body).content,
136 |     timestamp: 456,
137 |   });
138 |   const failureMockReturn = { body: {}, status: 400 };
139 | 
140 |   testAsyncAction(t1, {
141 |     func,
142 |     type,
143 |     successPayload,
144 |     path,
145 |     method,
146 |     successMockReturn,
147 |     failureMockReturn,
148 |   });
149 | });
150 | 
151 | test('action creator | updateNoteServer ::', (t1) => {
152 |   const successPayload = {
153 |     id: 123,
154 |     content: 'Hi',
155 |     timestamp: 456,
156 |   };
157 |   const func = () => actions.updateNoteServer(123, 'Hi');
158 |   const type = 'app/updateNoteServer';
159 |   const path = '/notes/123';
160 |   const method = 'PUT';
161 |   const successMockReturn = (url, { body }) => ({
162 |     id: 123,
163 |     content: JSON.parse(body).content,
164 |     timestamp: 456,
165 |   });
166 |   const failureMockReturn = { body: {}, status: 400 };
167 | 
168 |   testAsyncAction(t1, {
169 |     func,
170 |     type,
171 |     successPayload,
172 |     path,
173 |     method,
174 |     successMockReturn,
175 |     failureMockReturn,
176 |   });
177 | });
178 | 
179 | test('action creator | updateNote :: Create correct action',
180 |   ({ deepEqual, end }) => {
181 | 
182 |     const actualAction = actions.updateNote('Hello', 'id-123', 2);
183 |     const expectedAction = {
184 |       type: 'app/updateNote',
185 |       payload: {
186 |         id: 'id-123',
187 |         content: 'Hello',
188 |         timestamp: 2,
189 |       },
190 |     };
191 | 
192 |     deepEqual(actualAction, expectedAction);
193 |     end();
194 |   }
195 | );
196 | 
197 | test('action creator | removeNote ::', (t1) => {
198 |   const func = () => actions.removeNote(123);
199 |   const type = 'app/removeNote';
200 |   const successPayload = { id: 123 };
201 |   const path = '/notes/123';
202 |   const method = 'DELETE';
203 |   const successMockReturn = { status: 200, body: '' };
204 |   const failureMockReturn = { body: {}, status: 400 };
205 | 
206 |   testAsyncAction(t1, {
207 |     func,
208 |     type,
209 |     successPayload,
210 |     path,
211 |     method,
212 |     successMockReturn,
213 |     failureMockReturn,
214 |   });
215 | });
216 | 
217 | test('action creator | openNote :: Create correct action',
218 |   ({ deepEqual, end }) => {
219 | 
220 |     const actualAction = actions.openNote('id-123');
221 |     const expectedAction = {
222 |       type: 'app/openNote',
223 |       payload: {
224 |         id: 'id-123',
225 |       },
226 |     };
227 | 
228 |     deepEqual(actualAction, expectedAction);
229 |     end();
230 |   }
231 | );
232 | 
233 | test('action creator | closeNote :: Create correct action',
234 |   ({ deepEqual, end }) => {
235 | 
236 |     const actualAction = actions.closeNote();
237 |     const expectedAction = {
238 |       type: 'app/closeNote',
239 |     };
240 | 
241 |     deepEqual(actualAction, expectedAction);
242 |     end();
243 |   }
244 | );
245 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware } from 'redux';
 2 | import thunk from 'redux-thunk';
 3 | import createLogger from 'redux-logger';
 4 | import rootReducer from './reducers';
 5 | 
 6 | const logger = createLogger({ collapsed: true });
 7 | 
 8 | export default function configureStore() {
 9 |   const store = createStore(rootReducer, applyMiddleware(thunk, logger));
10 |   return store;
11 | }
12 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/reducers.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | import { dissoc } from 'ramda';
 3 | import { without } from 'ramda';
 4 | import { merge } from 'ramda';
 5 | import { prepend } from 'ramda';
 6 | 
 7 | export const byId = (state = {}, { type, payload }) => {
 8 |   switch (type) {
 9 |     case 'app/updateNote':
10 |     case 'app/insertNote':
11 |       return merge(state, { [payload.id]: payload });
12 |     case 'app/replaceNotes':
13 |       return payload.notes;
14 |     case 'app/removeNote':
15 |       return dissoc(payload.id, state);
16 |     default:
17 |       return state;
18 |   }
19 | };
20 | 
21 | export const ids = (state = [], { type, payload }) => {
22 |   switch (type) {
23 |     case 'app/replaceNotes':
24 |       return payload.ids;
25 |     case 'app/insertNote':
26 |       return prepend(payload.id, state);
27 |     case 'app/removeNote':
28 |       return without(payload.id, state);
29 |     default:
30 |       return state;
31 |   }
32 | };
33 | 
34 | export const openNoteId = (state = null, { type, payload }) => {
35 |   switch (type) {
36 |     case 'app/openNote':
37 |       return payload.id;
38 |     case 'app/closeNote':
39 |       return null;
40 |     default:
41 |       return state;
42 |   }
43 | };
44 | 
45 | export const toast = (state = null, { type, payload }) => {
46 |   switch (type) {
47 |     case 'app/setToast':
48 |       return payload;
49 |     case 'app/clearToast':
50 |       return null;
51 |     default:
52 |       return state;
53 |   }
54 | };
55 | 
56 | export const requests = (state = {}, { type, payload, meta }) => {
57 |   switch (type) {
58 |     case 'app/markRequestPending':
59 |       return merge(state, { [meta.key]: { status: 'pending', error: null } });
60 |     case 'app/markRequestSuccess':
61 |       return merge(state, { [meta.key]: { status: 'success', error: null } });
62 |     case 'app/markRequestFailed':
63 |       return merge(state, { [meta.key]: { status: 'failure', error: payload } });
64 |     default:
65 |       return state;
66 |   }
67 | };
68 | 
69 | export default combineReducers({
70 |   notes: combineReducers({
71 |     byId,
72 |     ids,
73 |   }),
74 |   ui: combineReducers({
75 |     openNoteId,
76 |     toast,
77 |   }),
78 |   requests,
79 | });
80 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/reducers.test.js:
--------------------------------------------------------------------------------
  1 | import test from 'tape';
  2 | import * as reducers from './reducers';
  3 | import * as actions from './actions';
  4 | import { getMockState, getActionPayload } from './testUtils';
  5 | 
  6 | // byId reducer
  7 | 
  8 | test('reducer | byId :: Handle "fetchNotesSuccess" action',
  9 |   ({ deepEqual, end }) => {
 10 |     const state = getMockState.withNoNotes();
 11 |     const fetchedNotes = getActionPayload.fetchNotesSuccess();
 12 |     const actualNextState = reducers.byId(
 13 |       state.byId,
 14 |       actions.fetchNotesSuccess(fetchedNotes)
 15 |     );
 16 |     const noteId = fetchedNotes.noteIds[0];
 17 |     const expectedNextState = {
 18 |       [noteId]: fetchedNotes.notes[noteId],
 19 |     };
 20 | 
 21 |     deepEqual(actualNextState, expectedNextState);
 22 |     end();
 23 |   }
 24 | );
 25 | 
 26 | test('reducer | byId :: Handle "addNoteSuccess" action',
 27 |   ({ deepEqual, end }) => {
 28 |     const state = getMockState.withNoNotes();
 29 |     const newNote = getActionPayload.addNoteSuccess();
 30 |     const actualNextState = reducers.byId(
 31 |       state.byId,
 32 |       actions.addNoteSuccess(newNote)
 33 |     );
 34 |     const expectedNextState = {
 35 |       [newNote.id]: newNote,
 36 |     };
 37 | 
 38 |     deepEqual(actualNextState, expectedNextState);
 39 |     end();
 40 |   }
 41 | );
 42 | 
 43 | test('reducer | byId :: Handle "updateServerSuccess" action',
 44 |   ({ deepEqual, end }) => {
 45 |     const state = getMockState.withOneNote();
 46 |     const updatedNote = getActionPayload.updateServerSuccess();
 47 |     const actualNextState = reducers.byId(
 48 |       state.byId,
 49 |       actions.updateServerSuccess(updatedNote)
 50 |     );
 51 |     const expectedNextState = {
 52 |       [updatedNote.id]: updatedNote,
 53 |     };
 54 | 
 55 |     deepEqual(actualNextState, expectedNextState);
 56 |     end();
 57 |   }
 58 | );
 59 | 
 60 | test('reducer | byId :: Handle "updateNote" action',
 61 |   ({ deepEqual, end }) => {
 62 |     const state = getMockState.withOneNote();
 63 |     const actualNextState = reducers.byId(
 64 |       state.byId,
 65 |       actions.updateNote('Hi there', 'id-123', 2)
 66 |     );
 67 |     const expectedNextState = {
 68 |       'id-123': {
 69 |         id: 'id-123',
 70 |         content: 'Hi there',
 71 |         timestamp: 2,
 72 |       },
 73 |     };
 74 | 
 75 |     deepEqual(actualNextState, expectedNextState);
 76 |     end();
 77 |   }
 78 | );
 79 | 
 80 | test('reducer | byId :: Handle "removeNoteSuccess" action',
 81 |   ({ deepEqual, end }) => {
 82 |     const state = getMockState.withOneNote();
 83 |     const actualNextState = reducers.byId(
 84 |       state.byId,
 85 |       actions.removeNoteSuccess({ id: 'id-123' })
 86 |     );
 87 |     const expectedNextState = {};
 88 | 
 89 |     deepEqual(actualNextState, expectedNextState);
 90 |     end();
 91 |   }
 92 | );
 93 | 
 94 | // ids reducer
 95 | 
 96 | test('reducer | ids :: Handle "fetchNotesSuccess" action',
 97 |   ({ deepEqual, end }) => {
 98 |     const state = getMockState.withNoNotes();
 99 |     const actualNextState = reducers.ids(
100 |       state.ids,
101 |       actions.fetchNotesSuccess(getActionPayload.fetchNotesSuccess())
102 |     );
103 |     const expectedNextState = [ 'id-123' ];
104 | 
105 |     deepEqual(actualNextState, expectedNextState);
106 |     end();
107 |   }
108 | );
109 | 
110 | test('reducer | ids :: Handle "addNoteSuccess" action',
111 |   ({ deepEqual, end }) => {
112 |     const state = getMockState.withNoNotes();
113 |     const actualNextState = reducers.ids(
114 |       state.ids,
115 |       actions.addNoteSuccess(getActionPayload.addNoteSuccess())
116 |     );
117 |     const expectedNextState = [ 'id-123' ];
118 | 
119 |     deepEqual(actualNextState, expectedNextState);
120 |     end();
121 |   }
122 | );
123 | 
124 | test('reducer | ids :: Handle "removeNoteSuccess" action',
125 |   ({ deepEqual, end }) => {
126 |     const state = getMockState.withOneNote();
127 |     const actualNextState = reducers.ids(
128 |       state.ids,
129 |       actions.removeNoteSuccess({ id: 'id-123' })
130 |     );
131 |     const expectedNextState = [];
132 | 
133 |     deepEqual(actualNextState, expectedNextState);
134 |     end();
135 |   }
136 | );
137 | 
138 | // openNoteId reducer
139 | 
140 | test('reducer | openNoteId :: Handle "addNoteSuccess" action',
141 |   ({ equal, end }) => {
142 |     const state = getMockState.withNoOpenNotes();
143 |     const actualNextState = reducers.openNoteId(
144 |       state.openNoteId,
145 |       actions.addNoteSuccess(getActionPayload.addNoteSuccess())
146 |     );
147 |     const expectedNextState = 'id-123';
148 | 
149 |     equal(actualNextState, expectedNextState);
150 |     end();
151 |   }
152 | );
153 | 
154 | test('reducer | openNoteId :: Handle "openNote" action',
155 |   ({ equal, end }) => {
156 |     const state = getMockState.withNoOpenNotes();
157 |     const actualNextState = reducers.openNoteId(
158 |       state.openNoteId,
159 |       actions.openNote('id-123')
160 |     );
161 |     const expectedNextState = 'id-123';
162 | 
163 |     equal(actualNextState, expectedNextState);
164 |     end();
165 |   }
166 | );
167 | 
168 | test('reducer | openNoteId :: Handle "removeNoteSuccess" action',
169 |   ({ equal, end }) => {
170 |     const state = getMockState.withOneNote();
171 |     const actualNextState = reducers.openNoteId(
172 |       state.openNoteId,
173 |       actions.removeNoteSuccess({ id: 'id-123' })
174 |     );
175 |     const expectedNextState = null;
176 | 
177 |     equal(actualNextState, expectedNextState);
178 |     end();
179 |   }
180 | );
181 | 
182 | test('reducer | openNoteId :: Handle "closeNote" action',
183 |   ({ equal, end }) => {
184 |     const state = getMockState.withOneNote();
185 |     const actualNextState = reducers.openNoteId(
186 |       state.openNoteId,
187 |       actions.closeNote()
188 |     );
189 |     const expectedNextState = null;
190 | 
191 |     equal(actualNextState, expectedNextState);
192 |     end();
193 |   }
194 | );
195 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/selectors.js:
--------------------------------------------------------------------------------
 1 | export const getNotes = (state) =>
 2 |   state.notes.ids.map((id) => state.notes.byId[id]);
 3 | 
 4 | export const getNote = (state, id) =>
 5 |   state.notes.byId[id] || null;
 6 | 
 7 | export const getOpenNoteId = (state) =>
 8 |   state.ui.openNoteId;
 9 | 
10 | export const getToast = (state) =>
11 |   state.ui.toast;
12 | 
13 | export const getRequest = (state, key) =>
14 |   state.requests[key] || {};
15 | 
16 | export const getRequests = (state) =>
17 |   state.requests;
18 | 
19 | export const areRequestsPending = (requests) => {
20 |   return Object.keys(requests)
21 |     .some((key) => requests[key].status === 'pending');
22 | };
23 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/selectors.test.js:
--------------------------------------------------------------------------------
 1 | import test from 'tape';
 2 | import * as selectors from './selectors';
 3 | import { getMockState } from './testUtils';
 4 | 
 5 | test('selector | getNotes :: Return empty array if state contains no notes',
 6 |   ({ deepEqual, end }) => {
 7 | 
 8 |     const state = getMockState.withNoNotes();
 9 | 
10 |     const actualSelection = selectors.getNotes(state);
11 |     const expectedSelection = [];
12 | 
13 |     deepEqual(actualSelection, expectedSelection);
14 |     end();
15 |   }
16 | );
17 | 
18 | test('selector | getNotes :: Return array of note objects if state contains some notes',
19 |   ({ deepEqual, end }) => {
20 | 
21 |     const state = getMockState.withOneNote();
22 | 
23 |     const expectedSelection = [
24 |       {
25 |         id: 'id-123',
26 |         content: 'Hello world',
27 |         timestamp: 1,
28 |       },
29 |     ];
30 |     const actualSelection = selectors.getNotes(state);
31 | 
32 |     deepEqual(actualSelection, expectedSelection);
33 |     end();
34 |   }
35 | );
36 | 
37 | test('selector | getNote :: Return null if state doesn\'t contain a note with that id',
38 |   ({ deepEqual, end }) => {
39 | 
40 |     const state = getMockState.withTwoNotes();
41 | 
42 |     const actualSelection = selectors.getNote(state, 'id-999');
43 |     const expectedSelection = null;
44 | 
45 |     deepEqual(actualSelection, expectedSelection);
46 |     end();
47 |   }
48 | );
49 | 
50 | test('selector | getNote :: Return note object if state contains note with passed id',
51 |   ({ deepEqual, end }) => {
52 | 
53 |     const state = getMockState.withTwoNotes();
54 | 
55 |     const actualSelection = selectors.getNote(state, 'id-123');
56 |     const expectedSelection = {
57 |       id: 'id-123',
58 |       content: 'Hello world',
59 |       timestamp: 1,
60 |     };
61 | 
62 |     deepEqual(actualSelection, expectedSelection);
63 |     end();
64 |   }
65 | );
66 | 
67 | test('selector | getOpenNoteId :: Return null if state doesn\'t have open note set',
68 |   ({ equal, end }) => {
69 | 
70 |     const state = getMockState.withNoNotes();
71 | 
72 |     const actualSelection = selectors.getOpenNoteId(state);
73 |     const expectedSelection = null;
74 | 
75 |     equal(actualSelection, expectedSelection);
76 |     end();
77 |   }
78 | );
79 | 
80 | test('selector | getOpenNoteId :: Return note id if state has open note set',
81 |   ({ deepEqual, end }) => {
82 | 
83 |     const state = getMockState.withOneNote();
84 | 
85 |     const actualSelection = selectors.getOpenNoteId(state);
86 |     const expectedSelection = 'id-123';
87 | 
88 |     deepEqual(actualSelection, expectedSelection);
89 |     end();
90 |   }
91 | );
92 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/source/store/testUtils.js:
--------------------------------------------------------------------------------
 1 | export const getActionPayload = {
 2 |   fetchNotesSuccess: () => ({
 3 |     notes: {
 4 |       'id-123': {
 5 |         content: 'Hello world',
 6 |         timestamp: 1,
 7 |         id: 'id-123',
 8 |       },
 9 |     },
10 |     noteIds: [ 'id-123' ],
11 |   }),
12 | 
13 |   addNoteSuccess: () => ({
14 |     content: 'Hello world',
15 |     id: 'id-123',
16 |     timestamp: 1,
17 |   }),
18 | 
19 |   updateServerSuccess: () => ({
20 |     id: 'id-123',
21 |     content: 'new content',
22 |     timestamp: 123,
23 |   }),
24 | };
25 | 
26 | export const getMockState = {
27 |   withNoNotes: () => ({
28 |     byId: {},
29 |     ids: [],
30 |     openNoteId: null,
31 |   }),
32 |   withOneNote: () => ({
33 |     byId: {
34 |       'id-123': {
35 |         id: 'id-123',
36 |         content: 'Hello world',
37 |         timestamp: 1,
38 |       },
39 |     },
40 |     ids: [ 'id-123' ],
41 |     openNoteId: 'id-123',
42 |   }),
43 |   withTwoNotes: () => ({
44 |     byId: {
45 |       'id-123': {
46 |         id: 'id-123',
47 |         content: 'Hello world',
48 |         timestamp: 1,
49 |       },
50 |       'id-456': {
51 |         id: 'id-456',
52 |         content: 'Hi globe',
53 |         timestamp: 2,
54 |       },
55 |     },
56 |     ids: [ 'id-123', 'id-456' ],
57 |     openNoteId: 'id-456',
58 |   }),
59 |   withNoOpenNotes: () => ({
60 |     byId: {
61 |       'id-123': {
62 |         id: 'id-123',
63 |         content: 'Hello world',
64 |         timestamp: 1,
65 |       },
66 |     },
67 |     ids: [ 'id-123' ],
68 |     openNoteId: null,
69 |   }),
70 | };
71 | 


--------------------------------------------------------------------------------
/chapter-05-request-state/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const entry = [ './source/index' ];
 4 | 
 5 | const output = {
 6 |   path: path.resolve(__dirname, 'public/js'),
 7 |   filename: 'app.js',
 8 | };
 9 | 
10 | const resolve = {
11 |   extensions: [ '', '.js', '.jsx' ],
12 | };
13 | 
14 | const scriptLoader = {
15 |   loader: 'babel',
16 |   include: path.resolve(__dirname, 'source'),
17 |   test: /\.jsx$|\.js$/,
18 | };
19 | 
20 | module.exports = {
21 |   devtool: 'eval',
22 |   entry,
23 |   output,
24 |   resolve,
25 |   module: { loaders: [ scriptLoader ] },
26 | };
27 | 


--------------------------------------------------------------------------------