Skip to content

Commit

Permalink
Replace all occurences of uid with clientId to align with web
Browse files Browse the repository at this point in the history
  • Loading branch information
@gziolo
gziolo committed Aug 10, 2018
1 parent 0e001f8 commit 2531484
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 76 deletions.
20 changes: 10 additions & 10 deletions src/app/AppContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@ const mapStateToProps = ( state ) => ( {
const mapDispatchToProps = ( dispatch, ownProps ) => {
return {
...ownProps,
onChange: ( uid, attributes ) => {
dispatch( updateBlockAttributes( uid, attributes ) );
onChange: ( clientId, attributes ) => {
dispatch( updateBlockAttributes( clientId, attributes ) );
},
focusBlockAction: ( uid ) => {
dispatch( focusBlockAction( uid ) );
focusBlockAction: ( clientId ) => {
dispatch( focusBlockAction( clientId ) );
},
moveBlockUpAction: ( uid ) => {
dispatch( moveBlockUpAction( uid ) );
moveBlockUpAction: ( clientId ) => {
dispatch( moveBlockUpAction( clientId ) );
},
moveBlockDownAction: ( uid ) => {
dispatch( moveBlockDownAction( uid ) );
moveBlockDownAction: ( clientId ) => {
dispatch( moveBlockDownAction( clientId ) );
},
deleteBlockAction: ( uid ) => {
dispatch( deleteBlockAction( uid ) );
deleteBlockAction: ( clientId ) => {
dispatch( deleteBlockAction( clientId ) );
},
};
};
Expand Down
12 changes: 6 additions & 6 deletions src/block-management/block-holder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import styles from './block-holder.scss';
import { getBlockType } from '@wordpress/blocks';

type PropsType = BlockType & {
onChange: ( uid: string, attributes: mixed ) => void,
onToolbarButtonPressed: ( button: number, uid: string ) => void,
onBlockHolderPressed: ( uid: string ) => void,
onChange: ( clientId: string, attributes: mixed ) => void,
onToolbarButtonPressed: ( button: number, clientId: string ) => void,
onBlockHolderPressed: ( clientId: string ) => void,
};
type StateType = {
selected: boolean,
Expand All @@ -36,7 +36,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
renderToolbarIfBlockFocused() {
if ( this.props.focused ) {
return (
<Toolbar uid={ this.props.uid } onButtonPressed={ this.props.onToolbarButtonPressed } />
<Toolbar clientId={ this.props.clientId } onButtonPressed={ this.props.onToolbarButtonPressed } />
);
}

Expand All @@ -61,7 +61,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
<Block
attributes={ { ...this.props.attributes } }
// pass a curried version of onChanged with just one argument
setAttributes={ ( attrs ) => this.props.onChange( this.props.uid, { ...this.props.attributes, ...attrs } ) }
setAttributes={ ( attrs ) => this.props.onChange( this.props.clientId, { ...this.props.attributes, ...attrs } ) }
isSelected={ this.props.focused }
style={ style }
/>
Expand All @@ -75,7 +75,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
render() {
return (
<TouchableWithoutFeedback
onPress={ this.props.onBlockHolderPressed.bind( this, this.props.uid ) }
onPress={ this.props.onBlockHolderPressed.bind( this, this.props.clientId ) }
>
<View style={ styles.blockHolder }>
<View style={ styles.blockTitle }>
Expand Down
37 changes: 19 additions & 18 deletions src/block-management/block-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import styles from './block-manager.scss';
import { getBlockType, serialize } from '@wordpress/blocks';

export type BlockListType = {
onChange: ( uid: string, attributes: mixed ) => void,
onChange: ( clientId: string, attributes: mixed ) => void,
focusBlockAction: string => mixed,
moveBlockUpAction: string => mixed,
moveBlockDownAction: string => mixed,
Expand All @@ -39,39 +39,39 @@ export default class BlockManager extends React.Component<PropsType, StateType>
constructor( props: PropsType ) {
super( props );
this.state = {
dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.uid ),
dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ),
showHtml: false,
};
}

onBlockHolderPressed( uid: string ) {
this.props.focusBlockAction( uid );
onBlockHolderPressed( clientId: string ) {
this.props.focusBlockAction( clientId );
}

getDataSourceIndexFromUid( uid: string ) {
getDataSourceIndexFromUid( clientId: string ) {
for ( let i = 0; i < this.state.dataSource.size(); ++i ) {
const block = this.state.dataSource.get( i );
if ( block.uid === uid ) {
if ( block.clientId === clientId ) {
return i;
}
}
return -1;
}

onToolbarButtonPressed( button: number, uid: string ) {
const dataSourceBlockIndex = this.getDataSourceIndexFromUid( uid );
onToolbarButtonPressed( button: number, clientId: string ) {
const dataSourceBlockIndex = this.getDataSourceIndexFromUid( clientId );
switch ( button ) {
case ToolbarButton.UP:
this.state.dataSource.moveUp( dataSourceBlockIndex );
this.props.moveBlockUpAction( uid );
this.props.moveBlockUpAction( clientId );
break;
case ToolbarButton.DOWN:
this.state.dataSource.moveDown( dataSourceBlockIndex );
this.props.moveBlockDownAction( uid );
this.props.moveBlockDownAction( clientId );
break;
case ToolbarButton.DELETE:
this.state.dataSource.splice( dataSourceBlockIndex, 1 );
this.props.deleteBlockAction( uid );
this.props.deleteBlockAction( clientId );
break;
case ToolbarButton.SETTINGS:
// TODO: implement settings
Expand Down Expand Up @@ -101,14 +101,14 @@ export default class BlockManager extends React.Component<PropsType, StateType>
this.state.dataSource.setDirty();
}

onChange( uid: string, attributes: mixed ) {
onChange( clientId: string, attributes: mixed ) {
// Update datasource UI
const index = this.getDataSourceIndexFromUid( uid );
const index = this.getDataSourceIndexFromUid( clientId );
const dataSource = this.state.dataSource;
const block = dataSource.get( this.getDataSourceIndexFromUid( uid ) );
const block = dataSource.get( this.getDataSourceIndexFromUid( clientId ) );
dataSource.set( index, { ...block, attributes: attributes } );
// Update Redux store
this.props.onChange( uid, attributes );
this.props.onChange( clientId, attributes );
}

render() {
Expand All @@ -134,7 +134,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
style={ styles.list }
data={ this.props.blocks }
extraData={ this.props.refresh }
keyExtractor={ ( item ) => item.uid }
keyExtractor={ ( item ) => item.clientId }
renderItem={ this.renderItem.bind( this ) }
/>
);
Expand All @@ -158,14 +158,15 @@ export default class BlockManager extends React.Component<PropsType, StateType>
);
}

renderItem( value: { item: BlockType, uid: string } ) {
renderItem( value: { item: BlockType, clientId: string } ) {
return (
<BlockHolder
key={ value.clientId }
onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
onChange={ this.onChange.bind( this ) }
focused={ value.item.focused }
uid={ value.uid }
clientId={ value.clientId }
{ ...value.item }
/>
);
Expand Down
14 changes: 7 additions & 7 deletions src/block-management/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@ import { ToolbarButton } from './constants';
import styles from './toolbar.scss';

type PropsType = {
uid: string,
onButtonPressed: ( button: number, uid: string ) => void,
clientId: string,
onButtonPressed: ( button: number, clientId: string ) => void,
};

export default class Toolbar extends React.Component<PropsType> {
render() {
return (
<View style={ styles.toolbar }>
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.PLUS, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.PLUS, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>+</Text>
</View>
</TouchableOpacity>
<View style={ styles.buttonSeparator } />
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.UP, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.UP, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>▲</Text>
</View>
</TouchableOpacity>
<View style={ styles.buttonSeparator } />
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DOWN, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DOWN, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>▼</Text>
Expand All @@ -44,7 +44,7 @@ export default class Toolbar extends React.Component<PropsType> {
onPress={ this.props.onButtonPressed.bind(
this,
ToolbarButton.SETTINGS,
this.props.uid
this.props.clientId
) }
>
<View style={ styles.toolbarButton }>
Expand All @@ -54,7 +54,7 @@ export default class Toolbar extends React.Component<PropsType> {
</TouchableOpacity>
<View style={ styles.buttonSeparator } />
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DELETE, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DELETE, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>🗑</Text>
Expand Down
22 changes: 11 additions & 11 deletions src/store/actions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,33 @@ import ActionTypes from './ActionTypes';

export type BlockActionType = string => {
type: $Values<typeof ActionTypes.BLOCK>,
uid: string,
clientId: string,
};

export function updateBlockAttributes( uid: string, attributes: mixed ) {
export function updateBlockAttributes( clientId: string, attributes: mixed ) {
return {
type: ActionTypes.BLOCK.UPDATE_ATTRIBUTES,
uid,
clientId,
attributes,
};
}

export const focusBlockAction: BlockActionType = uid => ( {
export const focusBlockAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.FOCUS,
uid: uid,
clientId,
} );

export const moveBlockUpAction: BlockActionType = uid => ( {
export const moveBlockUpAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.MOVE_UP,
uid: uid,
clientId,
} );

export const moveBlockDownAction: BlockActionType = uid => ( {
export const moveBlockDownAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.MOVE_DOWN,
uid: uid,
clientId,
} );

export const deleteBlockAction: BlockActionType = uid => ( {
export const deleteBlockAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.DELETE,
uid: uid,
clientId,
} );
8 changes: 4 additions & 4 deletions src/store/actions/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,28 @@ describe( 'Store', () => {
const action = actions.focusBlockAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.FOCUS );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );

it( 'should create an action to move block up', () => {
const action = actions.moveBlockUpAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.MOVE_UP );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );

it( 'should create an action to move block down', () => {
const action = actions.moveBlockDownAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.MOVE_DOWN );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );

it( 'should create an action to delete a block', () => {
const action = actions.deleteBlockAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.DELETE );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );
} );
} );
6 changes: 3 additions & 3 deletions src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { createStore } from 'redux';
import { reducer } from './reducers';

export type BlockType = {
uid: string,
clientId: string,
name: string,
isValid: boolean,
attributes: Object,
Expand Down Expand Up @@ -58,7 +58,7 @@ const initialState: StateType = {
// If not it should be created from a string parsing (commented HTML to json).
blocks: [
{
uid: '1',
clientId: '1',
name: 'title',
isValid: true,
attributes: {
Expand All @@ -73,7 +73,7 @@ const initialState: StateType = {
{ ...codeBlockInstance, focused: false },
{ ...moreBlockInstance, focused: false },
{
uid: '5',
clientId: '5',
name: 'paragraph',
isValid: true,
attributes: {
Expand Down
Loading

0 comments on commit 2531484

Please sign in to comment.