Nsryjdtyk

This is only the front end side of things which I have at the moment, as the back end is still being worked on. But as this is my first attempt at a react component, I'd like to know if there is anything I can improve on it.

The component has a text area for viewing the current data stored in the cache within our application, another text area for viewing the result when we send that data off to our API and get a transformed version of the data back, as well as two buttons: one for loading the cached data into one of the text areas and one for calling the API with the cached data. This component is used in development/UAT environment for testing purposes.

class DataRevealer extends React.Component {

    constructor(props) {

        super(props);

        this.state = {input: '', result: ''};



        this.getCachedDataHandler = this.getCachedDataHandler.bind(this);

        this.transformDataHandler = this.transformDataHandler.bind(this);

        this.inputDataChanged = this.inputDataChanged.bind(this);

    }



    getCachedDataHandler() {

      let cachedData = DataRevealActions.getCachedData();

      this.setState({input: cachedData});

    }



    transformDataHandler() {

      if (this.state.input) {

        let transformedData = DataRevealActions.transformData(this.state.input);

        this.setState({result: transformedData});

      } else {

        alert('No data to transform');

      }

    }



    inputDataChanged(event) {

      this.setState({input: event.target.value});

    }



    get getCachedDataButtonText() {

      //TODO: localise string

      return 'Get Cached Data';

    }



    get transformDataButtonText() {

        //TODO: localise string

        return 'Transform Data';

    }



    render() {

        return (

            <div className='data-revealer-container'>

                <textarea value={ this.state.input }

                          className='data-revealer-textarea centred-control'

                          onChange={ this.inputDataChanged }

                />

                <div className='action-buttons centred-control'>

                  <Button onClick={ this.getCachedDataHandler }

                          className='data-revealer-button centred-control'>

                      <span>{ this.getCachedDataButtonText }</span>

                  </Button>

                  <Button onClick={ this.transformDataHandler }

                          className='data-revealer-button centred-control' >

                      <span>{ this.transformDataButtonText }</span>

                  </Button>

                </div>

              <textarea value={ this.state.result }

                        className='data-revealer-textarea centred-control'

              />

            </div>

        );

    }

}



export default DataRevealer;

Couple of things to note:

• The Button is one of our custom controls, it acts as a normal button but with pre-implemented styling tweaks.


• The TODO may not actually be needed, as the strings may not need to be localised.


• 
  DataRevealActions are where the back-end code will go, once that work is done.

• You can just remove the TODO until it's needed. The code will be easier to follow and if someone needs to localize later, they can figure it out themselves. It's clutter.




• DataRevealActions would probably be nice to pass in as properties, so the component is configurable. You could pass it in as now, or just have two different properties, getCachedData and transformData.

Otherwise, looks great!