From 258eed6ee6c4639a57270b02064a8801724199cd Mon Sep 17 00:00:00 2001 From: Stepan Usatiuk Date: Sat, 16 Jun 2018 14:30:28 +0300 Subject: [PATCH] offline remove, toggle, edit todos --- package-lock.json | 28 ++++-- react/package-lock.json | 28 ++++-- react/src/actions/todos.js | 98 ++++++++++++--------- react/src/components/UserHeader.js | 35 ++++++-- react/src/containers/Status.js | 4 +- react/src/containers/UserHeaderContainer.js | 15 +++- react/src/reducers/todos.js | 2 +- 7 files changed, 141 insertions(+), 69 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe3ee01..81ed903 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3084,12 +3084,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3104,17 +3106,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3231,7 +3236,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3243,6 +3249,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3257,6 +3264,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3264,12 +3272,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3288,6 +3298,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3368,7 +3379,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3380,6 +3392,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3501,6 +3514,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/react/package-lock.json b/react/package-lock.json index 84c3cc0..83d0f46 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -4143,11 +4143,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4160,15 +4162,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4271,7 +4276,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4281,6 +4287,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4293,17 +4300,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4320,6 +4330,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4392,7 +4403,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4402,6 +4414,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4507,6 +4520,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/react/src/actions/todos.js b/react/src/actions/todos.js index 43a6e9d..f081d55 100644 --- a/react/src/actions/todos.js +++ b/react/src/actions/todos.js @@ -1,5 +1,5 @@ import { API_ROOT, getToken } from './util'; -import { fetchLists } from './lists'; +import { fetchLists, INVALIDATE_LISTS } from './lists'; export const ADD_TODO = 'ADD_TODO'; export const REMOVE_TODO = 'REMOVE_TODO'; @@ -70,66 +70,78 @@ export function addTodo(text) { export function removeTodo(id) { return async dispatch => { - dispatch(invalidateTodos()); - const response = await fetch(`${API_ROOT}/todos/${id}`, { - headers: { - Authorization: `Bearer ${getToken()}`, - 'content-type': 'application/json', + dispatch({ + type: REMOVE_TODO, + id, + meta: { + offline: { + effect: { + url: `${API_ROOT}/todos/${id}`, + headers: { + Authorization: `Bearer ${getToken()}`, + 'content-type': 'application/json', + }, + method: 'DELETE', + }, + rollback: { + type: INVALIDATE_LISTS, + }, + }, }, - method: 'DELETE', }); - const json = await response.json(); - if (json.success) { - dispatch({ type: REMOVE_TODO, id }); - } else { - dispatch(fetchLists()); - } - dispatch(validateTodos()); }; } export function toggleTodo(id) { return async (dispatch, getState) => { - dispatch(invalidateTodos()); const state = getState(); const todoObj = state.todos.todos[id]; const completed = !todoObj.completed; - const response = await fetch(`${API_ROOT}/todos/${id}`, { - body: JSON.stringify({ completed }), - headers: { - Authorization: `Bearer ${getToken()}`, - 'content-type': 'application/json', + dispatch({ + type: TOGGLE_TODO, + id, + meta: { + offline: { + effect: { + url: `${API_ROOT}/todos/${id}`, + body: JSON.stringify({ completed }), + headers: { + Authorization: `Bearer ${getToken()}`, + 'content-type': 'appl ication/json', + }, + method: 'PATCH', + }, + rollback: { + type: INVALIDATE_LISTS, + }, + }, }, - method: 'PATCH', }); - const json = await response.json(); - if (json.success) { - dispatch({ type: TOGGLE_TODO, id }); - } else { - dispatch(fetchLists()); - } - dispatch(validateTodos()); }; } export function editTodo(id, text) { return async dispatch => { - dispatch(invalidateTodos()); - const response = await fetch(`${API_ROOT}/todos/${id}`, { - body: JSON.stringify({ text }), - headers: { - Authorization: `Bearer ${getToken()}`, - 'content-type': 'application/json', + dispatch({ + type: EDIT_TODO, + id, + text, + meta: { + offline: { + effect: { + url: `${API_ROOT}/todos/${id}`, + body: JSON.stringify({ text }), + headers: { + Authorization: `Bearer ${getToken()}`, + 'content-type': 'application/json', + }, + method: 'PATCH', + }, + rollback: { + type: INVALIDATE_LISTS, + }, + }, }, - method: 'PATCH', }); - const json = await response.json(); - if (json.success) { - const todo = json.data; - dispatch({ type: EDIT_TODO, id, todo }); - } else { - dispatch(fetchLists()); - } - dispatch(validateTodos()); }; } diff --git a/react/src/components/UserHeader.js b/react/src/components/UserHeader.js index eb9cbab..28d6407 100644 --- a/react/src/components/UserHeader.js +++ b/react/src/components/UserHeader.js @@ -1,15 +1,34 @@ import React from 'react'; +import PropTypes from 'prop-types'; import LogoutLink from '../containers/LogoutLink'; import FetchButton from '../containers/FetchButton'; import Status from '../containers/Status'; -export default function UserHeader() { - return ( -
- sync - - logout -
- ); +export default class UserHeader extends React.Component { + componentDidUpdate() { + if ( + (this.props.dirtyLists || this.props.dirtyTodos) && + !this.props.fetchingLists + ) { + this.props.fetchLists(); + } + } + + render() { + return ( +
+ sync + + logout +
+ ); + } } + +UserHeader.propTypes = { + dirtyLists: PropTypes.bool.isRequired, + dirtyTodos: PropTypes.bool.isRequired, + fetchingLists: PropTypes.bool.isRequired, + fetchLists: PropTypes.func.isRequired, +}; diff --git a/react/src/containers/Status.js b/react/src/containers/Status.js index 003d039..d315816 100644 --- a/react/src/containers/Status.js +++ b/react/src/containers/Status.js @@ -13,8 +13,8 @@ function Status({ userFetching, listsFetching }) { marginLeft: '1rem', }} > - {userFetching ? 'user' : null} - {listsFetching ? 'lists' : null} + {userFetching ? 'loading user' : null} + {listsFetching ? 'loading lists' : null} ); } diff --git a/react/src/containers/UserHeaderContainer.js b/react/src/containers/UserHeaderContainer.js index 6af9128..b0102ce 100644 --- a/react/src/containers/UserHeaderContainer.js +++ b/react/src/containers/UserHeaderContainer.js @@ -1,10 +1,23 @@ import { connect } from 'react-redux'; import UserHeader from '../components/UserHeader'; +import { fetchLists } from '../actions/lists'; function mapStateToProps(state) { return { user: state.user, + dirtyLists: state.lists.dirty, + dirtyTodos: state.todos.dirty, + fetchingLists: state.lists.fetching, }; } -export default connect(mapStateToProps)(UserHeader); +function mapDispatchToProps(dispatch) { + return { + fetchLists: () => dispatch(fetchLists()), + }; +} + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(UserHeader); diff --git a/react/src/reducers/todos.js b/react/src/reducers/todos.js index b9fa82c..d031efc 100644 --- a/react/src/reducers/todos.js +++ b/react/src/reducers/todos.js @@ -53,7 +53,7 @@ export default function todos( ...state, todos: { ...state.todos, - [action.id]: action.todo, + [action.id]: { ...state.todos[action.id], text: action.text }, }, }; case REQUEST_TODOS: