old-tellall/web/src/components/IntentList.js

import React, { Component } from 'react';
import {Button} from 'react-md';
import IntentItem from './IntentItem';
import '../css/Intent.css'
import {
    LAUNCH_REQUEST_SELECTED_INDEX,
    CONTACT_SELECTED_INDEX} from '../config'

class IntentList extends Component {
    constructor (props){
        super(props);

        this.state = {intents: props.allIntents, selectedIndex:props.selectedIndex, onIntentClick:props.onIntentClick};
    }

    componentWillReceiveProps(props){
        this.setState({intents: props.allIntents, selectedIndex: props.selectedIndex, onIntentClick: props.onIntentClick});
    }

    render() {
        return (
            <div className="IntentList">
                <Button className={this.props.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX ? "LaunchRequest-selected" : "LaunchRequest"} flat primary 
                        onClick={this.props.onLaunchRequestClick}
                        disabled={this.props.waiting} >Launch request</Button>

                <Button className={this.props.selectedIndex===CONTACT_SELECTED_INDEX ? "Contact-selected" : "Contact"} flat primary 
                        onClick={this.props.onContactClick}
                        disabled={this.props.waiting} >Contact</Button>
                
                
                <div className="IntentList-title">
                    <h3>Intents</h3>
                </div>
                {
                    this.state.intents.map((intent,index)=>{
                    return <IntentItem 
                                key={intent.intentName} intent={intent} index={index} 
                                selectedIndex={this.props.selectedIndex} 
                                onClick={this.state.onIntentClick}
                                waiting={this.props.waiting}>
                            </IntentItem>
                    })
                }
                <br></br>
                <Button className={"AddIntent"} flat primary swapTheming 
                        onClick={this.props.onAddIntentClick}
                        disabled={this.props.waiting}>Add intent</Button>
            </div>  
        );
    }
}

export default IntentList;