Ttykuu

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!