react-native category subcategory select listview and expand options if exists

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight,
  LayoutAnimation
} from 'react-native';

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
export default class subOption extends Component {

  constructor() {
    super();
    this.state = {
      suggestions : [
            {
              "suggestionid": "9fc4370c1cff41e2bb1ddd805b97a21d",
              "suggestion": "category-1",
              "agreementtemplates": [
                {
                  "agreementtemplateid": "632d3f7e09a945f2a2bfa343544ecb87",
                  "agreementtext": "subcategory-1"
                },
                {
                  "agreementtemplateid": "632d3f7e09a945f2a2bfa343544ecb86",
                  "agreementtext": "subcategory-2"
                }
              ]
            },
            {
              "suggestionid": "2a169a1f8b7346dd927b9fafc34e6b21",
              "suggestion": "Category-2",
              "agreementtemplates": [
                {
                  "agreementtemplateid": "350950fbaa334a5d80fd9c2fcbebda60",
                  "agreementtext": "subcategory-1"
                }
              ]
            },
            {
              "suggestionid": "62d912ab727e48ba91ab80c6c5b57940",
              "suggestion": "Category-3",
            },
          ],
      dataSource: ds.cloneWithRows([]),
      subCategoryArray:[],
      subCategoryDataSouce:ds.cloneWithRows([]),
      selectedSuggestion:[],
    };
  }
  componentWillMount(){
    this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.state.suggestions) });
  }

  render() {
    return (
<View style={{marginTop:50}}>
  <ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => this._renderMyDisputeRow(rowData)}
  />
    </View>
    );
  }

  _renderMyDisputeRow(rowData) {
      return (
        <TouchableHighlight underlayColor={'transparent'} onPress={this._categoryAction.bind(this,rowData)}>
        <View style={{}}>
            <Text style={{padding:10,backgroundColor:this._checkCategorySelection(rowData)}}>{rowData.suggestion}</Text>
              {
                rowData.elapse && rowData.agreementtemplates
                ?
                <ListView
                  dataSource={this.state.subCategoryDataSouce}
                  renderRow={(templateData) =>
                    <TouchableHighlight underlayColor={'transparent'} onPress={this._subOptionAction.bind(this,rowData,templateData)}>
                      <Text style={{marginLeft:15,marginRight:15,marginTop:5,marginBottom:5,backgroundColor:this._checkSubCategorySelection(templateData)}}>{templateData.agreementtext}</Text>
                    </TouchableHighlight>
                }
                />
                :
                null
              }
        </View>
        </TouchableHighlight>
      )
  }

  _checkSubCategorySelection(templateData){
    var selectedSuggestion = JSON.parse(JSON.stringify(this.state.selectedSuggestion));
      for(var i=0; i<selectedSuggestion.length; i++){
        if(selectedSuggestion[i].agreementtemplateId == templateData.agreementtemplateid){
            return 'yellow';
        }
      }
      return 'white';
  }

  _checkCategorySelection(rowData){
    var selectedSuggestion = JSON.parse(JSON.stringify(this.state.selectedSuggestion));
      for(var i=0; i<selectedSuggestion.length; i++){
        if(selectedSuggestion[i].suggestionId == rowData.suggestionid){
          console.log('matched');
            return 'yellow';
        } else {
          console.log('not matched');
        }
      }
      return 'white';
  }

  _categoryAction(rowData){
    if (rowData.agreementtemplates) {

      // console.log('expand',rowData.agreementtemplates);
      let rowDataIndex = this.state.suggestions.findIndex(x => x.suggestionid==rowData.suggestionid);
      let newArray = this.state.suggestions.slice();
      newArray.forEach(function(item, i) {newArray[i].elapse = false});
      newArray[rowDataIndex] = {
        ...newArray[rowDataIndex],
        elapse: rowData.elapse ? false :true,//to hide list if already elapse == true
      };
      LayoutAnimation.easeInEaseOut();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newArray),
        subCategoryArray:rowData.agreementtemplates,
        subCategoryDataSouce: this.state.subCategoryDataSouce.cloneWithRows(rowData.agreementtemplates)
      });
    } else {
      this._addCategorySelectedList(rowData);
    }

  }

  _subOptionAction(rowData,templateData){
    this._addSubCategorySelectedList(rowData,templateData);
  }

  _addCategorySelectedList(rowData){
    let rowDataIndex = this.state.suggestions.findIndex(x => x.suggestionid==rowData.suggestionid);
    let newArray = this.state.suggestions.slice();
    newArray[rowDataIndex] = {
      ...newArray[rowDataIndex],
      isSelected:rowData.isSelected ? false : true,
    };

    var selectedSuggestion = JSON.parse(JSON.stringify(this.state.selectedSuggestion));
    let alreadyExists = false; // bool variable to check if value already pushed to array if exists then update bool variable and splice object else push objec to array
      for(var i=0; i<selectedSuggestion.length; i++){
        if(selectedSuggestion[i].suggestionId == rowData.suggestionid){
            alreadyExists = true;
            selectedSuggestion.splice(i, 1);  //removes 1 element at position i
            break;
        }
      }
      if (!alreadyExists) {
        console.log('not selected push ');
        let selectedArrayData={};
        selectedArrayData['suggestionId'] = rowData.suggestionid;
        // selectedArrayData['agreementtemplateId'] = templateData.agreementtemplateid;
        selectedArrayData['suggestion'] = rowData.suggestion;
        selectedSuggestion.push(selectedArrayData)
      }
      console.log('selectedSuggestion',selectedSuggestion);
    this.setState({
      selectedSuggestion:selectedSuggestion,
      dataSource: this.state.dataSource.cloneWithRows(newArray) });
  }

  _addSubCategorySelectedList(rowData,templateData){
    let rowDataIndex = this.state.subCategoryArray.findIndex(x => x.agreementtemplateid==templateData.agreementtemplateid);
      let newArray = this.state.subCategoryArray.slice();
      newArray[rowDataIndex] = {
        ...newArray[rowDataIndex],
        isSelected:templateData.isSelected ? false : true,
      };

      var selectedSuggestion = JSON.parse(JSON.stringify(this.state.selectedSuggestion));
      let alreadyExists = false; // bool variable to check if value already pushed to array if exists then update bool variable and splice object else push objec to array
        for(var i=0; i<selectedSuggestion.length; i++){
          if(selectedSuggestion[i].agreementtemplateId == templateData.agreementtemplateid){
              alreadyExists = true;
              selectedSuggestion.splice(i, 1);  //removes 1 element at position i
              break;
          }
        }
        if (!alreadyExists) {
          console.log('not selected push ');
          let selectedArrayData={};
          selectedArrayData['suggestionId'] = rowData.suggestionid;
          selectedArrayData['agreementtemplateId'] = templateData.agreementtemplateid;
          selectedArrayData['agreementtext'] = templateData.agreementtext;
          selectedSuggestion.push(selectedArrayData)
        }

    this.setState({
      selectedSuggestion:selectedSuggestion,
      subCategoryArray:newArray,
      subCategoryDataSouce: this.state.subCategoryDataSouce.cloneWithRows(newArray),

     });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('subOption', () => subOption);