Entry/src/HigherModules/AddressesDisplay.js

import React from 'react';

import Form from '../Modules/Form';
import AddressBox from '../Modules/AddressBox';
import ArraySelector from '../Modules/ArraySelector';
import AddressInputs from '../Inputs/AddressInput';
import Toast from '../helpers/Toast';
import Merge from '../helpers/Merge';

import Dictionary from '../Services/DictionaryService';

import { Button } from 'react-materialize';

class Addresses extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			addresses: [],
			showAddressForm: false,
			selectedAddress: {},
			edit: false
		}
		this.updateService(props.service);
	}

	componentWillReceiveProps(props) {
		if(props.service) {
			let service = props.service;
			this.updateService(service);
		}
	}

	updateService(service) {
		service.getPage(1, 100).then((addresses) => {
			this.setState({
				addresses,
				showAddressForm: false
			});
		})
	}

	edit(address) {
		this.setState({
			showAddressForm: true,
			edit: true,
			editAddress: address
		})
	}
	delete(address) {
		this.props.update && this.props.update('' + Math.random() * Math.random());
		if(window.confirm(Dictionary.get("Delete address ?")))
			this.props.service.update(address.id, {deleted: true}).then(() => this.updateService(this.props.service))
	}

	getAddressForm() {
		return <div>
			<Form FormInputs={this.state.edit ? Merge(AddressInputs, this.state.editAddress) : AddressInputs} formData={(address) => this.setState({newAddress: address})}/>
			<Button onClick={() => {
				let action = this.state.edit ? 
				this.props.service.update(this.state.editAddress.id, this.state.newAddress) : 
				this.props.service.add(this.state.newAddress);
				action
				.then(() => this.updateService(this.props.service))
				.then(() => {
					this.props.update && this.props.update(Math.random());
					this.setState({
						showAddressForm: false
					})
				})
			}}>{this.state.edit ? Dictionary.get('Update') : Dictionary.get('Add')}</Button>
			{!!this.state.addresses.length && <Button onClick={() => {
				this.setState({
					showAddressForm: false
				})
			}}>{Dictionary.get('Cancel')}</Button>}
		</div>
	}
	getSelector() {
		return <React.Fragment>
      		<ArraySelector Array={this.state.addresses} displayItem={(address, indx) => {
      			return <AddressBox key={indx} 
      					 Address={address} 
      					 Selected={this.state.selectedAddress.id == address.id}
      					 onSelect={() => {
      					 	this.setState({selectedAddress: address});
      					 	this.props.onSelect && this.props.onSelect(address);
      					 }}
      					 onEdit={() => this.edit(address)}
      					 onDelete={() => this.delete(address)}
      					 />
      		}}/>
      		<Button onClick={() => this.setState({ showAddressForm: true, edit: false })}>{Dictionary.get("Add address")}</Button>
	      		</React.Fragment>;
	}

	render() {
		if (!this.state.showAddressForm && !this.state.addresses.length) {
			this.setState({
				showAddressForm: true
			});
		}
		return  this.state.showAddressForm ? this.getAddressForm() : this.getSelector();
	}
}

export default Addresses;