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.

	const piglatin = (str) => {
	// Immediately return if there are no letters to convert.
	if (!hasAnyLetter(str))
	return str;
	var words = str.match(/\S+/g) || [];
	var result = words.map(word => `${translate(word)}\u0020`);
	return capitalizeFirstLetter(result.join(""));
	}
	// check if the char is consonant using RegEx
	function isConsonant(char) {
	return !/[aeiou]/.test(char);
	}
	function isVowelExist(str) {
	return str.match(/[aeiou]/gi);
	}
	function capitalizeFirstLetter(string) {
	var index = /[a-z]/i.exec(string).index;
	return `${string.substr(0, index)}${string.charAt(index).toUpperCase()}${string.slice(index + 1)}`;
	}
	function translate(str) {
	// Create variables to be used
	var pigLatin = '';
	var regex = /[aeiou]/gi;
	// Check if the first character is a vowel
	if (str[0].match(regex) || !isVowelExist(str)) {
	pigLatin = handlePunctuation(`${str},way`, str);
	} else {
	// Find how many consonants before the firs vowel.
	var vowelIndice = str.indexOf(str.match(regex)[0]);
	// Take the string from the first vowel to the last char
	// then add the consonants that were previously omitted and add the ending.
	pigLatin = handlePunctuation(`${str.substr(vowelIndice)}${loweringCapitalizedFirstLetter(str.substr(0, vowelIndice))},ay` , str);
	}
	return isFirstLetterCapitalized(str) ? `${pigLatin.charAt(0).toUpperCase()}${pigLatin.slice(1)}` : pigLatin;
	}
	function hasAnyLetter(str) {
	return /[a-zA-Z]/.test(str);
	}
	function isFirstLetterCapitalized(str) {
	return /^[A-Z]/.test(str);
	}
	function loweringCapitalizedFirstLetter(str) {
	var firstLetterIndex = findIndexOfFirstLetter(str);
	return `${str.substr(0, firstLetterIndex)}${str.charAt(firstLetterIndex).toLowerCase()}${str.substr(firstLetterIndex + 1)}`;
	}
	function handlePunctuation(converted, original) {
	// First remove all the punctuations from the converted string.
	converted = converted.replace(/[.,:!?""]+/g, '');
	// Then if it starts with a punctuation, then keep it as is.
	var pigLatin = !!original.match(/^[.,:!?""]+/) ? `${original.charAt(0)}${converted}` : converted;
	// If it ends with punctuation, then keep is as is.
	pigLatin = !!original.match(/[.,:!?""]+$/) ? `${pigLatin}${original.match(/[.,:!?""]+$/)[0]}` : pigLatin;
	return pigLatin;
	}
	function findIndexOfFirstLetter(str) {
	return /[a-z]/i.exec(str).index;
	}
	export default piglatin;

view raw piglatin.js hosted with ❤ by GitHub

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.

	import translatePigLatin from '../components/piglatin';
	export const PIG_LATIN = 'PIG_LATIN';
	export function pigLatinConvert(input){
	const output = translatePigLatin(`${input.inputtext}`);
	return {
	type: PIG_LATIN,
	payload: output
	};
	}

view raw actions_index.js hosted with ❤ by GitHub

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