Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

State: Optimistically update the saved post #1093

Merged
merged 3 commits into from
Jun 12, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions editor/effects.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
import { get } from 'lodash';
import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
import { get, uniqueId } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -27,17 +28,30 @@ export default {
...edits,
content: serialize( getBlocks( state ) ),
};
const transactionId = uniqueId();

if ( ! isNew ) {
toSend.id = postId;
}

dispatch( { type: 'CLEAR_POST_EDITS' } );
dispatch( {
type: 'CLEAR_POST_EDITS',
optimist: { type: BEGIN, id: transactionId },
} );
dispatch( {
type: 'UPDATE_POST',
edits: toSend,
optimist: { id: transactionId },
} );
new wp.api.models.Post( toSend ).save().done( ( newPost ) => {
dispatch( {
type: 'REQUEST_POST_UPDATE_SUCCESS',
post: newPost,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this is causing an error when save completes:

image

isNew,
optimist: { type: COMMIT, id: transactionId },
} );
dispatch( {
type: 'UPDATE_POST',
edits: newPost,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem like something we should merge into our representation of a post, per the behavior of the reducer, but instead reset / replace with. Maybe a separate RESET_POST that has the same behavior as the currentPost handler for RESET_BLOCKS? In fact, I'm thinking maybe we should separate out a RESET_POST from RESET_BLOCKS anyways, because the post property here feels kinda awkwardly included anyways:

https://github.com/WordPress/gutenberg/blob/6dea0df/editor/index.js#L49-L53

Maybe instead:

store.dispatch( { type: 'RESET_POST', post } );
store.dispatch( { type: 'RESET_BLOCKS', blocks: wp.blocks.parse( post.content.raw ) } );

Or maybe we don't need RESET_BLOCKS at all, and consolidate further to a single RESET_POST which the block reducers listen for and parse upon.

(Forgive my spew of brain-thoughts 😄 )

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the "block" state is more close to "edits" than it is to "currentPost". Thus, we shouldn't reset its value after a save success, the user could have updated it.

} );
} ).fail( ( err ) => {
dispatch( {
Expand All @@ -47,6 +61,7 @@ export default {
message: __( 'An unknown error occurred.' ),
} ),
edits,
optimist: { type: REVERT, id: transactionId },
} );
} );
},
Expand Down
9 changes: 5 additions & 4 deletions editor/state.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
import optimist from 'redux-optimist';
import { combineReducers, applyMiddleware, createStore } from 'redux';
import refx from 'refx';
import { reduce, keyBy, first, last, omit, without, flowRight } from 'lodash';
Expand Down Expand Up @@ -230,8 +231,8 @@ export function currentPost( state = {}, action ) {
case 'RESET_BLOCKS':
return action.post || state;

case 'REQUEST_POST_UPDATE_SUCCESS':
return action.post;
case 'UPDATE_POST':
return { ...state, ...action.edits };
}

return state;
Expand Down Expand Up @@ -460,7 +461,7 @@ export function saving( state = {}, action ) {
* @return {Redux.Store} Redux store
*/
export function createReduxStore() {
const reducer = combineReducers( {
const reducer = optimist( combineReducers( {
editor,
currentPost,
selectedBlock,
Expand All @@ -470,7 +471,7 @@ export function createReduxStore() {
mode,
isSidebarOpened,
saving,
} );
} ) );

const enhancers = [ applyMiddleware( refx( effects ) ) ];
if ( window.__REDUX_DEVTOOLS_EXTENSION__ ) {
Expand Down
10 changes: 6 additions & 4 deletions editor/test/state.js
Original file line number Diff line number Diff line change
Expand Up @@ -588,18 +588,19 @@ describe( 'state', () => {
expect( state ).to.equal( original );
} );

it( 'should remember a post object sent with REQUEST_POST_UPDATE_SUCCESS', () => {
const original = deepFreeze( { title: 'unmodified' } );
it( 'should update the post object with UPDATE_POST', () => {
const original = deepFreeze( { title: 'unmodified', status: 'publish' } );

const state = currentPost( original, {
type: 'REQUEST_POST_UPDATE_SUCCESS',
post: {
type: 'UPDATE_POST',
edits: {
title: 'updated post object from server',
},
} );

expect( state ).to.eql( {
title: 'updated post object from server',
status: 'publish',
} );
} );
} );
Expand Down Expand Up @@ -979,6 +980,7 @@ describe( 'state', () => {
const state = store.getState();

expect( Object.keys( state ) ).to.have.members( [
'optimist',
'editor',
'currentPost',
'selectedBlock',
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"react-slot-fill": "^1.0.0-alpha.11",
"react-transition-group": "^1.1.3",
"redux": "^3.6.0",
"redux-optimist": "0.0.2",
"refx": "^2.0.0",
"uuid": "^3.0.1"
},
Expand Down