Add/accounts delete

src/actions/index.js

@@ -6,6 +6,7 @@ export const ADD_NEW_ACCOUNT = 'ADD_NEW_ACCOUNT';
 export const UPDATE_ACCOUNT = 'UPDATE_ACCOUNT';
 export const UPDATE_ACCOUNT_BALANCE = 'UPDATE_ACCOUNT_BALANCE';
 export const UPDATE_ACCOUNTS_ORDER = 'UPDATE_ACCOUNTS_ORDER';
+export const DELETE_ACCOUNT = 'DELETE_ACCOUNT';
 export const SELECT_RECORD_TYPE = 'SELECT_RECORD_TYPE';
 export const SELECT_RECORD_DATE = 'SELECT_RECORD_DATE';
 export const UPDATE_DRAFT_WITH_RECORD = 'UPDATE_DRAFT_WITH_RECORD';
@@ -46,6 +47,10 @@ export function updateAccountsOrder( newOrder ) {
 	return { type: UPDATE_ACCOUNTS_ORDER, newOrder };
 }
 
+export function deleteAccount( accountId ) {
+	return { type: DELETE_ACCOUNT, accountId };
+}
+
 // Records / Drafts
 
 export function selectRecordType( id ) {

src/components/AccountInfo.js

@@ -6,7 +6,7 @@ import { StyleSheet, ScrollView, Platform } from 'react-native';
 import { ListItem, Input } from 'react-native-elements';
 import PropTypes from 'prop-types';
 
-const AccountInfo = ( { navigate, onStateChange, name, balance, colorCode, iconName, currencyCode, onPressCurrency } ) => <ScrollView style={ styles.container } keyboardShouldPersistTaps="always" >
+const AccountInfo = ( { navigate, onStateChange, name, balance, colorCode, iconName, currencyCode, onPressCurrency, onDelete } ) => <ScrollView style={ styles.container } keyboardShouldPersistTaps="always" >
 	<ListItem
 		title="Name"
 		rightTitle={ <Input
@@ -95,6 +95,26 @@ const AccountInfo = ( { navigate, onStateChange, name, balance, colorCode, iconN
 		contentContainerStyle={ { flex: 2 } }
 		rightContentContainerStyle={ { flex: 1 } }
 	/>
+
+	<ListItem
+		title="Delete account"
+		bottomDivider={ true }
+		topDivider={ true }
+		leftIcon={ {
+			name: 'trash',
+			type: 'font-awesome',
+			color: 'black',
+			size: 42,
+			containerStyle: { margin: -2 },
+		} }
+		chevron
+		rightTitle={ 'Select' }
+		onPress={ onDelete }
+
+		containerStyle={ styles.itemContainer }
+		contentContainerStyle={ { flex: 2 } }
+		rightContentContainerStyle={ { flex: 1 } }
+	/>
 </ScrollView>;
 
 export default AccountInfo;

src/reducers/accounts.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ADD_NEW_ACCOUNT, UPDATE_ACCOUNTS_ORDER, UPDATE_ACCOUNT, UPDATE_ACCOUNT_BALANCE } from '../actions';
+import { ADD_NEW_ACCOUNT, UPDATE_ACCOUNTS_ORDER, UPDATE_ACCOUNT, UPDATE_ACCOUNT_BALANCE, DELETE_ACCOUNT } from '../actions';
 import { addNewItem } from '../utils/reducerHelper';
 
 const initialState = {
@@ -33,19 +33,40 @@ export default function accounts( state = initialState, action ) {
 			return addNewItem( account, state );
 		case UPDATE_ACCOUNT:
 			return {
+				...state,
 				byId: { ...state.byId, [ account.id ]: account },
-				allIds: [ ...state.allIds ],
+				// allIds: [ ...state.allIds ],
 			};
 		case UPDATE_ACCOUNT_BALANCE:
 			account.balance = action.newBalance;
 			return {
+				...state,
 				byId: { ...state.byId, [ account.id ]: account },
-				allIds: [ ...state.allIds ],
-			};		case UPDATE_ACCOUNTS_ORDER:
+				// allIds: [ ...state.allIds ],
+			};
+		case UPDATE_ACCOUNTS_ORDER:
 			return {
 				...state,
 				allIds: action.newOrder,
 			};
+		case DELETE_ACCOUNT:
+			const byId = Object.values( state.byId ).reduce( ( acc, accnt ) => {
+				console.log( accnt.id, action.accountId, typeof accnt.id, typeof action.accountId, accnt.id !== action.accountId );
+
+				if ( accnt.id !== action.accountId ) {
+					acc[ accnt.id ] = state.byId[ accnt.id ];
+				}
+				return acc;
+			}, {} );
+			console.log( byId );
+
+			const updState = {
+				...state,
+				byId,
+			};
+			console.log( updState );
+
+			return updState;
 		default:
 			return state;
 	}

src/screens/NewAccountScreen.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import React from 'react';
-import { Button } from 'react-native';
+import { Button, Alert } from 'react-native';
 import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
-import { addNewAccount, updateAccount } from '../actions';
+import { addNewAccount, updateAccount, deleteAccount } from '../actions';
 import AccountInfo from '../components/AccountInfo';
 import { getCurrencyById, getAccountById } from '../selectors';
 
@@ -64,7 +64,7 @@ class NewAccountScreen extends React.Component {
 
 		const account = {
 			name,
-			balance,
+			balance: Number( balance ),
 			colorCode,
 			iconName,
 			currencyId,
@@ -86,6 +86,27 @@ class NewAccountScreen extends React.Component {
 		}
 	}
 
+	onDelete = () => {
+		const { isEdit, id } = this.state;
+		if ( ! isEdit ) {
+			return;
+		}
+
+		Alert.alert(
+			'Alert Title',
+			'My Alert Msg',
+			[
+				{
+					text: 'Cancel',
+					onPress: () => console.log( 'Cancel Pressed' ),
+					style: 'cancel',
+				},
+				{ text: 'OK', onPress: () => this.props._deleteAccount( id ) },
+			],
+			{ cancelable: false },
+		);
+	}
+
 	render() {
 		const { name, balance, colorCode, iconName, currencyId, isEdit } = this.state;
 		const { navigation } = this.props;
@@ -102,6 +123,7 @@ class NewAccountScreen extends React.Component {
 				navigate={ navigation.navigate }
 				onStateChange={ this.onStateChange }
 				onPressCurrency={ this.onPressCurrency }
+				onDelete={ this.onDelete }
 			/>
 		);
 	}
@@ -119,6 +141,7 @@ const mapDispatchToProps = ( dispatch ) => {
 	return {
 		_addNewAccount: ( account ) => dispatch( addNewAccount( account ) ),
 		_updateAccount: ( account ) => dispatch( updateAccount( account ) ),
+		_deleteAccount: ( accountId ) => dispatch( deleteAccount( accountId ) ),
 	};
 };