Extending Piglatin app with our own custom converter

Introduction

Well, last time we implemented a simple app that converts English text into a Pig Latin. But there are two limitations in that app.

It does not handle punctuations. For an example "Thi => "Ithay is not working with our current app.
It does not handle capital letters properly. For an example cherries!", Sally => errieschay!", Allysay is not working either.

The problem is in the third party library which we used for the conversion. The third party library is a very naive one which does not support punctuations and capital letters. The solution is to write our own functional component which is responsible for the transformation and hook it up into our app by substituting the third party library we are currently using. Before getting into this, I recommend you to go through my previous article [1] in React and Redux which is a really good starting point.

Prerequisites


  • Must have a good understanding on React and Redux stack.
  • Solid knowledge in javascript, css and HTML.

Workshop

With that in mind let’s get started. Firstly we need to implement the conversion logic inside our component. Here’s the code listing for that.


Finally we need to hook up our custom translator with the app. For that merely locate the action creator and substitute the call to the third party module with our own custom translator. Here’s the code which is responsible for that.


You may find working code for the project here [2].


Check out the following sketch of the working app for a sample input which covers both upper case letters and punctuation scenarios.






Conclusion

Well, we covered a lot of ground in React, Redux and Javascript landscape here. We extended our Piglatin app by adding our custom translator which transforms English text to Piglatin while proper handling of capital letters and punctuations as per the Pig latin pseudocode algorithm. I hope you enjoyed this. That does it for another session and I’ll see you in my next article.

References

[1] http://ravindraranwala.blogspot.com/2017/04/an-introduction-to-react-redux-ecosystem_5.html [2] https://github.com/ravindraranwala/piglatinconverterapp

Comments

Popular posts from this blog

WSO2 ESB Worker Manager Cluster without a Load Balancer

XML to XML transformation via Smooks Mediator in WSO2 ESB

JMS 2.0 Support in WSO2 ESB