test.js

import React, { PropTypes } from 'react'
import FormPage from '../Layout/Page/FormPage'
import { Grid, Row, Col, Panel, Button, Input } from 'react-bootstrap';
import FormHorizontal from '../Form/FormHorizontal'
import FormGroupTextInput from '../Form/FormGroupTextInput'
import FormGroupSelect from '../Form/FormGroupSelect'
import FormGroupDatePicker from '../Form/FormGroupDatePicker'
import update from 'react-addons-update'
//import update from 'react-addons-update'

class NewsStationAdd extends React.Component {
  constructor(props) {
     super(props);
     //this.updateState = this.updateState.bind(this);
     this.addNewTitleSection = this.addNewTitleSection.bind(this);
     this.addNewListSection = this.addNewListSection.bind(this);
     this.addNewContentSection = this.addNewContentSection.bind(this);
     this.addNewImageSection = this.addNewImageSection.bind(this);
     this.updateNewsListGlobalState = this.updateNewsListGlobalState.bind(this);
     this.updateNameState = this.updateNameState.bind(this);
     this.updateNewsGlobalState = this.updateNewsGlobalState.bind(this);
     this.updateNewsListListSection = this.updateNewsListListSection.bind(this);
     this.state = {
       name: null,
       newslist_config: {
         global_config: {
           scoure_url:"",
           exclude_selector:[],
           exclude_tag:[],
           limit: "0"
         },
         list_section_config: [
           {
             base_selector:"",
             article_selector:"",
             link_base_selector:"",
             header_base_selector:""
           }
         ]
       },
       news_config: {
          global:{
             exclude_selector:[
                "",
             ],
             exclude_tag:[
                "",
             ]
          },
          title:[
             {
                base_selector:"",
                exclude_tag:[
                   ""
                ]
             }
          ],
          content:[
             {
                base_selector:"",
                exclude_tag:[
                   ""
                ]
             }
          ],
          image:[
             {
                base_selector:"",
                exclude_tag:[
                   ""
                ],
                img_tag:"",
                img_attribute:""
             }
          ]
       }
     };
  }
  updateNameState(val) {
    var obj = {};
    obj['name'] = val;
    this.setState(obj);
  }
  updateNewsListGlobalState(field, val){
    console.log("F : " + field + ", V : " + val);
    var ori = this.state.newslist_config.global_config;
    if(field.localeCompare("exclude_selector") == 0 || field.localeCompare("exclude_tag") == 0) {
      if(val.indexOf(",") > -1) {
        var list = val.split(",");
        ori[field] = list;
      }
    } else {

      ori[field] = val;
    }

    this.setState(ori);
  }
  updateNewsListListSection(field, key, val) {
    console.log("F : " + field + ", K : " + key + ", V : " + val);
    var obj = {}
    obj[field] = {
      $set: val
    };
    var lsc = {};
    lsc[key] = obj;
    var newData = update(this.state,
      {
        newslist_config :
        {
          list_section_config : lsc
        }
      }
    );
    console.log(newData);
    this.setState(newData);
  }

  updateNewsGlobalState(field, val) {
    console.log("F : " + field + ", V : " + val);
    var ori = this.state.news_config.global;
    if(field.localeCompare("exclude_selector") == 0 || field.localeCompare("exclude_tag") == 0) {
      if(val.indexOf(",") > -1) {
        var list = val.split(",");
        ori[field] = list;
      }
    }
    this.setState(ori);
  }
  addNewContentSection() {
    var newData = update
    (
      this.state,
      {
        news_config:
        {
          content:
          {
            $push :
            [
              {base_selector:"",exclude_tag:[""]}
            ]
          }
        }
      }
    );
    this.setState(newData);
  }
  addNewListSection() {
    var newData = update(this.state,
      {
        newslist_config:
        {
          list_section_config:
          {
            $push :
            [
              {
                base_selector:"",
                article_selector:"",
                link_base_selector:"",
                header_base_selector:""
              }
            ]
          }
        }
      }
    );
    this.setState(newData);
  }
  addNewTitleSection() {
    //var update = require('react-addons-update');
    var newData = update
    (
      this.state,
      {
        news_config :
        {
          title :
          {
            $push :
            [
              {base_selector:"",exclude_tag:[""]}
            ]
          }
        }
      }
    );
    this.setState(newData);
  }
  addNewImageSection() {
    //var update = require('react-addons-update');
    var newData = update
    (
      this.state,
      {
        news_config:
        {
          image:
          {
            $push:
            [
              {
                 base_selector:"",
                 exclude_tag:[
                    ""
                 ],
                 img_tag:"",
                 img_attribute:""
              }
            ]
          }
        }
      }
    )
    this.setState(newData);
  }


  render () {
      //console.log(JSON.stringify(this.state, null, 4));
      var news_config_title_section = this.state.news_config.title.map((item, i) =>
        <div>
          <FormHorizontal>
            <FormGroupTextInput   label="Excluding Tag" placeholder="a,img,span,script" inputType="text"  />
            <FormGroupTextInput   label="Excluding Selector" placeholder="#app > div > section > div,#app > div > footer" inputType="text"  />
          </FormHorizontal>
          <hr></hr>
        </div>
      );
      //console.log(this.state.news_config.content);
      var news_config_content_section = this.state.news_config.content.map(
        (item, i) =>
        <div>
          <FormHorizontal>
            <FormGroupTextInput  label="Excluding Tag" placeholder="a,img,span,script" inputType="text"  />
            <FormGroupTextInput  label="Excluding Selector" placeholder="#app > div > section > div,#app > div > footer" inputType="text"  />
          </FormHorizontal>
          <hr></hr>
        </div>

      );
      var news_config_image_section = this.state.news_config.image.map(
        (item, i) =>
        <div>
          <FormHorizontal>
            <FormGroupTextInput label="Excluding Tag" placeholder="a,img,span,script" inputType="text"  />
            <FormGroupTextInput label="Excluding Selector" placeholder="#app > div > section > div,#app > div > footer" inputType="text"  />
            <FormGroupTextInput label="Image Tag" placeholder="img" inputType="text"  />
            <FormGroupTextInput label="Image Attribute" placeholder="src" inputType="text"  />
          </FormHorizontal>
          <hr></hr>
        </div>
      );
      var news_list_config_list_section = this.state.newslist_config.list_section_config.map(
        (item, i) =>
        <div>
          <FormHorizontal>
            <FormGroupTextInput onChange={(val) => this.updateNewsListListSection('base_selector', i, val)}  label="Base Selector" placeholder="" inputType="text"  />
            <FormGroupTextInput onChange={(val) => this.updateNewsListListSection('article_selector', i, val)}  label="Article Selector" placeholder="" inputType="text"  />
            <FormGroupTextInput onChange={(val) => this.updateNewsListListSection('link_base_selector', i, val)}  label="Link Selector" placeholder="" inputType="text"  />
            <FormGroupTextInput onChange={(val) => this.updateNewsListListSection('header_base_selector', i, val)}  label="Header Selector" placeholder="" inputType="text"  />
          </FormHorizontal>
          <hr></hr>
        </div>
      );

      return (
        <FormPage title="Add News Station" description="Add New News Station Configuration To System">
          <Panel>
            <FormHorizontal>
              <FormGroupTextInput onChange={(val)=>this.updateNameState(val)} label="News Station Title" placeholder="Reuters" inputType="text"  />
            </FormHorizontal>
          </Panel>
          <h2>List Configuration</h2>
          <Panel>
            <h4>Global Configuration</h4>
            <Panel>
              <FormHorizontal>
                <FormGroupTextInput onChange={(val) => this.updateNewsListGlobalState('scoure_url', val)} label="Source URL" placeholder="Reuters" inputType="text"  />
                <FormGroupTextInput onChange={(val) => this.updateNewsListGlobalState('exclude_tag', val)} label="Excluding Tag" placeholder="a,img,span,script" inputType="text"  />
                <FormGroupTextInput onChange={(val) => this.updateNewsListGlobalState('exclude_selector', val)} label="Excluding Selector" placeholder="#app > div > section > div,#app > div > footer" inputType="text"  />
                <FormGroupTextInput onChange={(val) => this.updateNewsListGlobalState('limit', val)} label="Limit" placeholder="20" inputType="text"  />
              </FormHorizontal>
            </Panel>
            <Panel>
              <h4>List Section Configuration</h4>
              {news_list_config_list_section}
              <Button bsStyle="primary" onClick={this.addNewListSection}>Add more</Button>
            </Panel>
          </Panel>
          <h2>Content Configuration</h2>
          <Panel>
            <h4>Global Configuration</h4>
            <Panel>
              <FormHorizontal>
                <FormGroupTextInput onChange={(val) => this.updateNewsGlobalState('exclude_tag', val)} label="Excluding Tag" placeholder="a,img,span,script" inputType="text"  />
                <FormGroupTextInput onChange={(val) => this.updateNewsGlobalState('exclude_selector', val)} label="Excluding Selector" placeholder="#app > div > section > div,#app > div > footer" inputType="text"  />
              </FormHorizontal>
            </Panel>
            <Panel>
              <h4>Title Section Configuration</h4>
              {news_config_title_section}
              <Button onClick={this.addNewTitleSection} bsStyle="primary">Add more</Button>
            </Panel>
            <Panel>
              <h4>Content Section Configuration</h4>
              {news_config_content_section}
              <Button bsStyle="primary" onClick={this.addNewContentSection}>Add more</Button>
            </Panel>
            <Panel>
              <h4>Image Section Configuration</h4>
              {news_config_image_section}
              <Button bsStyle="primary" onClick={this.addNewImageSection}>Add more</Button>
            </Panel>
          </Panel>
          <h2>JSON Result</h2>
          <Panel>
            <pre>{JSON.stringify(this.state, null, 2)}</pre>
          </Panel>
        </FormPage>
      );
  }
}

export default NewsStationAdd;