Creating Your Own Package in Go

A package in Go is a namespace that organizes a set of related files. We can think of packages as being similar to different folders. Go standard library comes with a number of packages which can be used for building real-world applications. Moreover Go supports writing our own packages promoting code modularization and better composability of applications following certain rules, like all source files within the package must declare the same package-name. Identifiers, Function and Types will be exported to other packages if the first letter of the identifier name starts with an uppercase letter.

In post Creating HTTP Server in Go we already updated Path with GOROOT, GOPATH and GOBIN, so as part of this post we will simply start with creating a package in Go following below steps:

Step 1: Create a directory inside your workspace to keep source code of a package, for me it’s numberutil under $GOPATH/github.com/arpitaggarwal:

$ mkdir -p $GOPATH/github.com/arpitaggarwal/numberutil

Step 2: Move to directory we created in previous step and create a file named decimalTobinary.go inside it, as follows:

$ cd $GOPATH/github.com/arpitaggarwal/numberutil
$ touch decimalTobinary.go

Copy following Go code:

package numberutil

import "strconv"

//Convert Decimal to Binary
func DecimalToBinary(decimal int64) string {
	binary := strconv.FormatInt(decimal, 2)
	return binary
}

Above code contains a single go function which takes Decimal number as input and convert it to Binary using strconv.FormatInt function.

Step 3: Build numberutil package using go tool, as follows:

$ cd $GOPATH
$ go build github.com/arpitaggarwal/numberutil

Step 4: Next we will create number-util.go with a main() method to use DecimalToBinary function from numberutil package we created, as follows:

$ cd $GOPATH/github.com/arpitaggarwal/
$ touch number-util.go

Copy following Go code:

package main

import (
	"fmt"
	"github.com/arpitaggarwal/numberutil"
)

func main() {
	i23 := int64(23)
	fmt.Printf("Decimal to Binary for 23 is %s \n", numberutil.DecimalToBinary(i23))
}

Step 5: Install number-util.go using go tool:

$ go install $GOPATH/github.com/arpitaggarwal/number-util.go

Above command compile number-util.go and generate executable binary file of it in $GOROOT/bin or $GOBIN directory.

Step 6: Run number-util.go moving to golang directory:

$ cd golang
$ ./go/bin/number-util

Step 7: Now we will generate documentation of numberutil package we created which is as simple as running godoc tool with -http flag for the port number from the terminal, as follows:

godoc -http=:9999

Now, opening http://localhost:9999/pkg/github.com/arpitaggarwal/numberutil/ in browser will show us the documentation of numberutil package we have created.

Go also support using third party libraries or packages by installing them using go get command or copying it manually to $GOPATH/src or $GOPATH for example, If we want to use Reverse function from “github.com/golang/example/stringutil” package which is not available by default in go standard library then we can install it as:

$ cd golang
$ go get github.com/golang/example/stringutil

Or clone the package and copy it to $GOPATH/src or $GOPATH directory, then use it as:


package main

import (
	"fmt"
	"github.com/golang/example/stringutil"
)
func main() {
	fmt.Println(stringutil.Reverse("!olleh"))
}

Complete source code is hosted on github.

Creating HTTP Server in Go

In this post, we will create a simple HTTP server in Go following some simple steps. Before starting, let me give you a brief introduction about Go.

What is Go?

Go is an open source programming language which is case sensitive and statically-typed with syntax similar to that of C language created at Google in 2007. It compiles very quickly, supports concurrency at the language level and provides garbage collection, type safety, dynamic-typing capability, many advanced built-in types such as variable length arrays and key-value maps though there is no support for generic programming, type inheritance, method or operator overloading, pointer arithmetic and assertions.

Now, let’s start with setting up the environment to run our first HTTP Server, following below steps:

Step 1: Download and extract Go in any directory, for me it’s golang under directory /Users/ArpitAggarwal/ as follows:


$ mkdir golang
$ cd golang
$ wget https://storage.googleapis.com/golang/go1.8.3.darwin-amd64.tar.gz
$ tar -xvzf go1.8.3.darwin-amd64.tar.gz

Step 2: Update Path with GOROOT, GOPATH and GOBIN, as follows:

$ export GOROOT=/Users/ArpitAggarwal/golang/go
$ export GOPATH=$GOROOT/src
$ export GOBIN=$GOROOT/bin
$ export PATH=$PATH:$GOPATH:$GOBIN

GOROOT refers to the go installation directory.
GOPATH refers to our go workspace directory or where go build is done.
GOBIN refers to the directory where go generate executable binaries.

Step 3: Verify if GOPATH is set properly on Bash, executing following command:

$ env | grep -E "^GO"

Step 4: Create a directory inside workspace to keep source code:

$ mkdir -p $GOPATH/github.com/arpitaggarwal

Step 5: Move to directory we created in previous step and create a file named webserver.go inside it, as follows:

$ cd $GOPATH/github.com/arpitaggarwal
$ touch webserver.go

Copy following Go code:

package main

import (
	"fmt"
	"log"
	"net/http"
)

func helloWorld(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Hello World!") // send data to client side
}

func main() {
	http.HandleFunc("/", helloWorld)         // set router
	err := http.ListenAndServe(":8080", nil) // set listen port
	if err != nil {
		log.Fatal("Error while starting GO http server on port - 8080 : ", err) //log error and exit in case of error at server boot up
	}
}

Let’s understand what does each line mean.

package main – It defines the package name of the program.

import (“fmt”, “log” “net/http”) – is a preprocessor command which tells the Go compiler to include all files from fmt, log and net/http package.

func helloWorld(w http.ResponseWriter, r *http.Request) – is a go function.

main() – is the main function where the program execution begins.

Step 6: Install webserver.go using go tool, as follows:


$ go install $GOPATH/github.com/arpitaggarwal/webserver.go

Above command compile webserver.go and generate executable binary file of it in $GOROOT/bin or GOBIN.

Step 7: Run webserver moving to golang directory, as follows:


$ cd golang
$ ./go/bin/webserver

Now, opening http://localhost:8080/ in browser or executing command:

curl http://localhost:8080

will show us “Hello World!” as response.

Step 8: Optionally we can run binary file in background using nohup command, as follows:


$ cd golang
$ nohup ./go/bin/webserver &;

Complete source code is hosted on github.

Routing in React

In post Handling Events in React we extended react-app which we built as part of Rendering RESTful service with React to support add and delete employees operation.

Now as part of this post we will add Routing capabilities to it using react-router, by defining an additional column Details as a Link, click of which take you to the details of the employee selected, following below steps:

Step 1. Install react-router-dom as a dependency:

npm install react-router-dom --save

Step 2: Update react-handling-events/app/main.js to import HashRouter, Route and Switch from react-router-dom along with EmployeeDetail component which we will define later in the post.

import { HashRouter, Route, Switch } from 'react-router-dom';
import EmployeeDetail from './components/employee-detail.jsx'

Step 3: Instead of rendering the ReactApp component directly, we will use HashRouter and Route to render it:

ReactDOM.render(
	<HashRouter>
	 <Switch>
	    <Route exact path="/" component={ReactApp}/>
        <Route exact path="/employee/:id" component={EmployeeDetail}/>
     </Switch>
    </HashRouter>,
   document.getElementById('react')
)

Eventually, react-handling-events/app/main.js should look like:

'use strict';
const React = require('react');
const ReactDOM = require('react-dom')

import { HashRouter, Route, Switch } from 'react-router-dom';
import ReactApp from './components/react-app.jsx'
import EmployeeDetail from './components/employee-detail.jsx'

ReactDOM.render(
    <HashRouter>
      <Switch>
        <Route exact path="/" component={ReactApp}/>
        <Route exact path="/employee/:id" component={EmployeeDetail}/>
      </Switch>
    </HashRouter>,
  document.getElementById('react')
)

HashRouter tag specified above puts route information into the hash of the URL (after the #). I preferred HashRouter over BrowserRouter because to use BrowserRouter web server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /employee/1 web server will get a request to /employee/1 then I have to handle that URL and include JavaScript application in the response.

Switch tag specified above renders the first child Route that matches the location.

As we defined two Route tag above, let’s understand what each one of them signify.

<Route exact path=/ component={ReactApp}/renders ReactApp component when the app loads at / .

<Route exact path=/employee/:id component={EmployeeDetail}/renders EmployeeDetail component when the app loads at /employee/{id} where id is a dynamic path variable.

Step 4: Create employee-detail.jsx component inside component directory, as follows:


cd react-handling-events/app/components/
touch employee-detail.jsx

And copy the below content:

import React, { Component } from 'react'

export default class EmployeeDetail extends Component {
  render(){
    if(this.props.match !== undefined && this.props.match.params !== undefined ){
      return(
        <div>
          <table style={{border: '1px solid black'}}>
            <tbody><tr>
              <td>Id</td>
              <td>Name</td>
              <td>Department</td>
            </tr>
            <tr>
              <td>{this.props.match.params.id}</td>
              <td>{this.props.location.query.employee.name}</td>
              <td>{this.props.location.query.employee.department}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
  return (null);
}
}

{this.props.match.params.id} specified above is to access route params in the component.

{this.props.location.query.employee.name} specified above is to access query params in the component which React-router injects as a location property.

Step 5: Update EmployeeList component render method to have an additional Details column:

const React = require('react');
import Employee from './employee.jsx'

export default class EmployeeList extends React.Component{
    
    render() {
		var employees = this.props.employees.map((employee, i) =>
			<Employee key={i} employee={employee} deleteEmployee={() => this.props.deleteEmployee(employee.name)}/>
		);
		
		return (
			<table>
				<tbody>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Department</th>
						<th>Delete</th>
						<th>Details</th>
					</tr>
					{employees}
				</tbody>
			</table>
		)
	}
}

Step 6: Update Employee component to import Link from react-router-dom along with render method to have an additional column Details as a Link, click on which take you to the details of the employee:

const React = require('react');
import DeleteEmployee from './delete-employee.jsx'
import { Link } from 'react-router-dom';

export default class Employee extends React.Component{
	render() {
		return (
			<tr>
				<td>{this.props.employee.id}</td>
				<td>{this.props.employee.name}</td>
				<td>{this.props.employee.department}</td>
				<td><DeleteEmployee deleteEmployee={this.props.deleteEmployee}/></td>
				<td><Link to={{ pathname:'/employee/'+this.props.employee.id, query: {employee: this.props.employee } }}>Details</Link></td>
			</tr>
		)
	}
}

With all in place directory structure should look like:

Screen Shot 2017-05-28 at 12.27.17 am

Now re-run the application and visit http://localhost:8080it should look like as shown in below screenshot, once you add few employee.

Screen Shot 2017-05-28 at 12.30.17 am
Complete source code is hosted on github.

Disabling Caching at Runtime if Couchbase Connection Failed

In our application we have number of REST API calls out of which some of them are flagged with @Cacheable to cache the response. Cache is backed by Couchbase and whenever application fails to connect Couchbase node then application goes down.

Which is what we are not expecting, we expect data should be served from the source system whenever connection failed, basically bypassing the cache and as soon as the Couchbase node is up or connection established response should be served from cache.

To achieve the same mechanism, I returned “null” whenever connection fails or there is a Cache miss overriding CouchbaseCacheManager, as follows:


import java.util.Map;
import org.springframework.cache.Cache;
import com.couchbase.client.spring.cache.CacheBuilder;
import com.couchbase.client.spring.cache.CouchbaseCacheManager;

public class CouchbaseCustomCacheManager extends CouchbaseCacheManager {

	public CouchbaseCustomCacheManager(final Map<String, CacheBuilder> initialCaches) {
		super(initialCaches);
	}

	@Override
	public Cache getCache(String name) {
		return new CouchbaseCacheWrapper(super.getCache(name));
	}

	protected static class CouchbaseCacheWrapper implements Cache {

		private final Cache delegate;

		public CouchbaseCacheWrapper(Cache couchbaseCache) {
			this.delegate = couchbaseCache;
		}

		@Override
		public String getName() {
			try {
				return delegate.getName();
			} catch (Exception e) {
				return null;
			}
		}

		@Override
		public Object getNativeCache() {
			try {
				return delegate.getNativeCache();
			} catch (Exception e) {
				return null;
			}
		}

		@Override
		public ValueWrapper get(Object key) {
			try {
				return delegate.get(key);
			} catch (Exception e) {
				return null;
			}
		}

		@Override
		public <T> T get(Object key, Class<T> type) {
			try {
				return delegate.get(key, type);
			} catch (Exception e) {
				return null;
			}
		}

		@Override
		public void put(Object key, Object value) {
			try {
				delegate.put(key, value);
			} catch (Exception e) {
				try {
					handleErrors(e);
				} catch (Exception e1) {
				}
			}
		}

		@Override
		public ValueWrapper putIfAbsent(Object key, Object value) {
			try {
				return delegate.putIfAbsent(key, value);
			} catch (Exception e) {
				return null;
			}
		}

		@Override
		public void evict(Object key) {
			try {
				delegate.evict(key);
			} catch (Exception e) {
				try {
					handleErrors(e);
				} catch (Exception e1) {
				}
			}
		}

		@Override
		public void clear() {
			try {
				delegate.clear();
			} catch (Exception e) {
				try {
					handleErrors(e);
				} catch (Exception e1) {
				}
			}
		}

		protected <T> T handleErrors(Exception e) throws Exception {
			if (e instanceof Exception) {
				return null;
			} else {
				throw e;
			}
		}
	}
}

And used it as CacheManager, as follows:

@Bean
public CacheManager cacheManager() {
	final Map<String, CacheBuilder> cache = new HashMap<>();
	for (final String appCache : "127.0.0.1,127.0.0.2,127.0.0.3".split(",")) {
			cache.put(appCache, CacheBuilder.newInstance(CouchbaseCluster
					.create().openBucket("default", "")));
	}
	return new CouchbaseCustomCacheManager(cache);
}

Complete source is available on github.

Hosting WordPress Application on an EC2 Instance – AWS

In this post, we will deploy WordPress Application on an EC2 Amazon Linux AMI t2.micro instance following below steps:

Step 1: Set up Amazon EC2 instance following set-up-amazon-ec2-instance.

Step 2: Launch an EC2 instance following ec2-launch-linux-instance.

Step 3: As creating a wordpress application is not a part of this post, I already created one and zipped it as wordpress-app.zip which we will securely copy from local machine to an EC2 instance home directory (/home/ec2-user) using ec2-user as follows:

scp -i /Users/ArpitAggarwal/arpitaggarwal-key-pair.pem /Users/ArpitAggarwal/wordpress-app.zip ec2-user@ec2-54-218-30-7.us-west-2.compute.amazonaws.com:/home/ec2-user

arpitaggarwal-key-pair.pem refers to private key file.
ec2-54-218-30-7.us-west-2.compute.amazonaws.com refers to Public DNS name of EC2 instance.

Step 4: Export wordpress-app database, as follows:

cd /applications/MAMP/library/bin
./mysqldump -u root -p**** wordpress > /Users/ArpitAggarwal/export-wordpress-data.sql

/applications/MAMP/library/bin refers to MAMP local database store.
./mysqldump referes to command to get mysqldump.

Step 5: Copy export-wordpress-data.sql we created from local machine directory to EC2 instance home (/home/ec2-user) directory:

scp -i /Users/ArpitAggarwal/arpitaggarwal-key-pair.pem /Users/ArpitAggarwal/export-wordpress-data.sql ec2-user@ec2-54-218-30-7.us-west-2.compute.amazonaws.com:/home/ec2-user

Step 6: Login to your EC2 instance with private key file and Public DNS name using ssh:

ssh -i /Users/ArpitAggarwal/arpitaggarwal-key-pair.pem ec2-user@ec2-54-218-30-7.us-west-2.compute.amazonaws.com

Step 7: Change collation of your database by executing following commands in /home/ec2-user after login to an EC2 instance:

sed -i 's/utf8mb4/utf8/g' export-wordpress-data.sql
sed -i 's/utf8_unicode_ci/utf8_general_ci/g' export-wordpress-data.sql
sed -i 's/utf8_unicode_520_ci/utf8_general_ci/g' export-wordpress-data.sql

Step 8: Set up Linux, Apache, MySQL, PHP (LAMP) stack on an EC2 CentOS 6 instance and set the processes to run automatically when the server boots, executing below commands:

sudo yum install httpd
sudo yum install mysql-server
sudo yum install php php-mysql
sudo service mysqld start
sudo chkconfig httpd on
sudo chkconfig mysqld on

Step 9: Set a root MySQL password same as you have provided in your wordpess-app, executing below command and choosing specific option for all the prompt:

sudo /usr/bin/mysql_secure_installation

Step 10: Login to MySQL database on an EC2 instance and create DATABASE same as you have provided in your wordpess-app, for me it’s wordpress:

mysql -u root -p****
mysql> CREATE DATABASE IF NOT EXISTS wordpress;

Step 11: Import export-wordpress-data.sql to newly created database, as follows:

mysql -uroot -p**** wordpress < export-wordpress-data.sql

Step 12: Inflate wordpress-app.zip, Copy all the files to /var/www/html directory and create .htaccess file inside the same directory:

unzip wordpress-app.zip
sudo cp -R wordpress-app/* /var/www/html
cd /var/www/html
sudo touch .htaccess

Replace the content of .htaccess file with below:

# BEGIN WordPress
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Step 13: Edit httpd.conf placed in /etc/httpd/conf to set value of AllowOverride directive to All for the /var/www/html directory, as below:

<Directory "/var/www/html">
  Options Indexes FollowSymLinks
  AllowOverride All
  Order allow,deny
  Allow from all
</Directory>

Step 13: Restart apache to reflect all of the changes we did:

sudo service httpd restart

Now, access the wordpress-app from your browser using Public DNS name or Public IP of your EC2 instance as: http://ec2-54-218-30-7.us-west-2.compute.amazonaws.com/

Need to move WordPress site to a new Host?

It can be easily done by updating the option_value, post_content and guid of the application directly in the MySQL database executing below scripts:

UPDATE wp_options SET option_value = 'http://new-host/' WHERE option_name = 'home';
UPDATE wp_options SET option_value = 'http://new-host/' WHERE option_name = 'siteurl';
UPDATE wp_posts SET post_content = REPLACE(post_content,'http://old-host/','http://new-host/');
UPDATE wp_posts SET guid = REPLACE(guid,'http://old-host/','http://new-host/');

Mocking Spring Security Context for Unit Testing

Today, while writing unit test case for one of the Java method which looks like below:

public ApplicationUser getApplicationUser() {
	ApplicationUser applicationUser = (ApplicationUser) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
	return applicationUser;
}

I want to mock Spring Security Context to get the Principal, to achieve the same I mocked each level of method calls as follows:

import org.junit.Before;
import org.junit.Rule;
import org.junit.Test;
import static org.mockito.Mockito.when;
import static org.mockito.Mockito.mock;
import org.mockito.MockitoAnnotations;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContext;
import org.springframework.security.core.context.SecurityContextHolder;
import com.arpit.security.user.ApplicationUser;

public class BaseTest {

	@Before
	public void setupMock() {
		MockitoAnnotations.initMocks(this);
	}

	@Test
	public void mockApplicationUser() {
		ApplicationUser applicationUser = mock(ApplicationUser.class);
		Authentication authentication = mock(Authentication.class);
		SecurityContext securityContext = mock(SecurityContext.class);
		when(securityContext.getAuthentication()).thenReturn(authentication);
		SecurityContextHolder.setContext(securityContext);
		when(SecurityContextHolder.getContext().getAuthentication().getPrincipal()).thenReturn(applicationUser);
	}

}

Handling Events in React

In post Rendering RESTful service with React we created simple UI which render employee list fetched from RESTful service. As part of this post we will extend the same app to support add and delete employees operation.

We will start with updating react-app backend api with add/delete employee operation along with modifying the existing get employee method to return the list of employees following below steps:

Step 1. Define addEmployee method flagged by @PostMapping(“/employee/add”) which will add employee in a class level employee list:

@PostMapping("/employee/add")
public List<Employee> addEmployee(final @RequestBody Employee employee) {
	System.out.println("Adding employee with name : " + employee.getName());
	if(employee.getName() != null && employee.getName().length() > 0)
              employeeList.add(new Employee(employeeList.size(), employee.getName(), "IT"));
	return employeeList;
}

Step 2. Define deleteEmployee method flagged by @PostMapping(“/employee/delete”) which will delete employee from a class level employee list matching the name of an employee, as follows:

@PostMapping("/employee/delete")
public List<Employee> deleteEmployee(final @RequestBody Employee employee) {
	System.out.println("Deleting employee with name : " + employee.getName());
	final Optional<Employee> optional = employeeList.stream().filter(e -> e.getName().equalsIgnoreCase(employee.getName())).findAny();
	 if(optional.isPresent()){
		employeeList.remove(optional.get());
	 }
	return employeeList;
}

Eventually, ReactAppApplication.java should look like:

@SpringBootApplication
@RestController
public class ReactAppApplication {

	final List<Employee> employeeList = new ArrayList<>();
	
	public static void main(String[] args) {
		SpringApplication.run(ReactAppApplication.class, args);
	}

	@GetMapping("/employee/get")
	public List<Employee> get() {
		return employeeList;
	}
	
	@PostMapping("/employee/add")
	public List<Employee> add(final @RequestBody Employee employee) {
		System.out.println("Adding employee with name : " + employee.getName());
		if(employee.getName() != null && employee.getName().length() > 0)
		 employeeList.add(new Employee(employeeList.size(), employee.getName(), "IT"));
		return employeeList;
	}
	
	@PostMapping("/employee/delete")
	public List<Employee> delete(final @RequestBody Employee employee) {
		System.out.println("Deleting employee with name : " + employee.getName());
		final Optional<Employee> optional = employeeList.stream().filter(e -> e.getName().equalsIgnoreCase(employee.getName())).findAny();
		if(optional.isPresent()){
			employeeList.remove(optional.get());
		}
		return employeeList;
	}
}

Step 3: Define addEmployee method/handler in ReactApp component which make a POST call with an employee name as a payload to the addEmployee method we just defined in our controller, as follows:

/Users/ArpitAggarwal/react-app/app/components/react-app.jsx

addEmployee(employeeName){

		let _this = this;
		this.Axios.post('/add', {
        	name: employeeName
         })
		  .then(function (response) {
		    console.log(response);
		    _this.setState({employees: response.data});
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
}

Step 4: Bind addEmployee handler in the constructor of ReactApp component:

constructor(props) {
		super(props);
		this.state = {employees: []};
		this.addEmployee = this.addEmployee.bind(this);
		this.Axios = axios.create({
		    baseURL: "/employee",
		    headers: {'content-type': 'application/json', 'creds':'user'}
		});
}

Step 5: Render the child component – AddEmployee as part of ReactApp component render method, passing addEmployee handler as react props to establish the parent child communication:

render() {
		return (
				<div>
				  <AddEmployee addEmployee={this.addEmployee}/>
				  <EmployeeList employees={this.state.employees}/>
		        </div>
		)
}

Step 6: Create add-employee component inside component directory, as follows:

cd react-app/app/components/
touch add-employee.jsx

And copy the following content:

react-app/app/components/add-employee.jsx

import React, { Component, PropTypes } from 'react'

export default class AddEmployee extends React.Component {

  render(){
    return (
       <div>
          <input type = 'text' ref = 'input' />
          <button onClick = {(e) => this.handleClick(e)}>
             Add Employee
          </button>
       </div>
    )
  }
  handleClick(e) {
     const node = this.refs.input
     const text = node.value.trim()
     console.log(text);
     this.props.addEmployee(text)
     node.value = ''
  }
}

handleClick(e) function defined above is called on Add Employee button click which will further call addEmployee handler defined in ReactApp using props.

With all this in place, our react-app can perform add employee operation. Next we will extend the same to support delete employee operation, following further steps.

Step 7: Define deleteEmployee handler and bind it in ReactApp in the same way we did for addEmployee handler:

/Users/ArpitAggarwal/react-app/app/components/react-app.jsx

constructor(props) {
		super(props);
		this.state = {employees: []};
		this.addEmployee = this.addEmployee.bind(this);
		this.deleteEmployee = this.deleteEmployee.bind(this);
		this.Axios = axios.create({
		    baseURL: "/employee",
		    headers: {'content-type': 'application/json', 'creds':'user'}
		});
}

deleteEmployee(employeeName){
        let _this = this;
        this.Axios.post('/delete', {
        	name: employeeName
          })
          .then(function (response) {
        	_this.setState({employees: response.data});
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
}

Step 8: Pass deleteEmployee handler to the EmployeeList component which will further pass it to it’s child container:

render() {
		return (
				<div>
				  <AddEmployee addEmployee={this.addEmployee}/>
				  <EmployeeList employees={this.state.employees} deleteEmployee={this.deleteEmployee}/>
		        </div>
			)
	}

Eventually, ReactApp component should look like:

'use strict';
const React = require('react');
var axios = require('axios');

import EmployeeList from './employee-list.jsx'
import AddEmployee from './add-employee.jsx'

export default class ReactApp extends React.Component {

	constructor(props) {
		super(props);
		this.state = {employees: []};
		this.addEmployee = this.addEmployee.bind(this);
		this.deleteEmployee = this.deleteEmployee.bind(this);
		this.Axios = axios.create({
		    baseURL: "/employee",
		    headers: {'content-type': 'application/json', 'creds':'user'}
		});
	}

	componentDidMount() {
		let _this = this;
		this.Axios.get('/get')
		  .then(function (response) {
		     console.log(response);
		    _this.setState({employees: response.data});
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
	}
	
	addEmployee(employeeName){

		let _this = this;
		this.Axios.post('/add', {
        	name: employeeName
         })
		  .then(function (response) {
		    console.log(response);
		    _this.setState({employees: response.data});
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
    }
    
    deleteEmployee(employeeName){
        let _this = this;
        this.Axios.post('/delete', {
        	name: employeeName
          })
          .then(function (response) {
        	_this.setState({employees: response.data});
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    }
	render() {
		return (
				<div>
				  <AddEmployee addEmployee={this.addEmployee}/>
				  <EmployeeList employees={this.state.employees} deleteEmployee={this.deleteEmployee}/>
		        </div>
			)
	}
}

Step 9: Update EmployeeList component to pass the deleteEmployee handler to it’s child component – Employee by importing it along with the change in render method to have a Delete column:

const React = require('react');
import Employee from './employee.jsx'

export default class EmployeeList extends React.Component{
    
    render() {
		var employees = this.props.employees.map((employee, i) =>
			<Employee key={i} employee={employee} deleteEmployee={() => this.props.deleteEmployee(employee.name)}/>
		);
		
		return (
			<table>
				<tbody>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Department</th>
						<th>Delete</th>
					</tr>
					{employees}
				</tbody>
			</table>
		)
	}
}

Step 10: Update Employee component to render – DeleteEmployee component passing the deleteEmployee handler:

const React = require('react');
import DeleteEmployee from './delete-employee.jsx'

export default class Employee extends React.Component{
	render() {
		return (
			<tr>
				<td>{this.props.employee.id}</td>
				<td>{this.props.employee.name}</td>
				<td>{this.props.employee.department}</td>
				<td><DeleteEmployee deleteEmployee={this.props.deleteEmployee}/></td>
			</tr>
		)
	}
}

Step 11: Create delete-employee component inside component directory:

cd react-app/app/components/
touch delete-employee.jsx

And copy the following content:

react-app/app/components/delete-employee.jsx

import React, { Component, PropTypes } from 'react'

export default class DeleteEmployee extends React.Component {
  render(){
    return (
          <button onClick = {(employeeName) => this.handleDelete(employeeName)}>
             Delete
          </button>
    )

}
  handleDelete(employeeName) {
   this.props.deleteEmployee(employeeName);
  }
}

handleDelete(employeeName) function defined above is called on Delete button click which will further call deleteEmployee handler defined in ReactApp using props.

With all in place directory structure should look like:

Screen Shot 2017-05-15 at 8.38.57 pm

Now re-run the application and visit http://localhost:8080, it should look like as shown in below screenshot, once you add few employee.

Screen Shot 2017-05-15 at 8.41.06 pm

Complete source code is hosted on github.