purezen_

Removing code smell in a Reactjs app — Part II : Functional HOC to the rescue!

2016-07-30T00:00:00+00:00

Great to have you back! (Click here if you want to check the first part)

While surfing the inter-webs I came across functional Higher-Order Components as a React way of “enriching” components eg. here.

Redux-form might be one of its most popular form.

The idea is to wrap a Component in a Higher Order function to produce an enriched component. Additional arguments can also be passed in just like regular functions to give more context.

Shameless plug: I am using react-koa-minimal-starter as the base for the project since it comes with react-hot-loader v3 which has improved support for Higher-Order components (ref).

To use it, it will be called in the container component with the list passed as a reference using the property name of the state. This is how it looks like,

import {connect} from 'react-redux'
import Filter from ‘../enhancers/filter’

const ListContainer = connect(
 (state) => state
)(Filter(List, {list: ‘listName’}))

And this is how the function looks like,

export default function Filter(EnhancedComponent, sourceRef) {
 return class extends Component {
   constructor(props) {
   super(props)
   this.state = {
   searchTerm: ‘’,
   filteredList: []
  }
 }

componentDidMount() {
 this.setState({ filteredList: this.props[sourceRef.list] })
}

getFilteredList(searchTerm, sourceList) {
 let re = new RegExp(searchTerm,’gi’)
 return sourceList.filter((item) => item.match(re))
}

handleSearchTerm(e) {
 let filteredList =  this.getFilteredList(e.target.value,this.props[sourceRef.list])

 this.setState({
  searchTerm: e.target.value,
  filteredList: filteredList
 })
}

render() {
 return (
  <div>
   <input
    value={this.state.searchTerm}
    onChange={this.handleSearchTerm.bind(this)}
   />
   <EnhancedComponent
    {…this.props}
    filteredList={this.state.filteredList}
   />
  </div>
 )
}}}

Finally, as can be seen the filtered list is available as filteredList property in the Presentational (wrapped) component.

You can check out the implementation in the abstraction-via-hoc branch of the repo at https://github.com/purezen/react-hoc-example.

Removing code smell in a Reactjs app — Part I : Identifying the smell

2016-07-29T00:00:00+00:00

Lately I have been working on a project made using a React.js stack and came across a task which involved creating a Filter Form. Since the form was going to be used across a number of places it had to be generic.

Now making a generic form basically means to write an abstraction for the form functionality so that it could be ‘plugged-in’ easily and efficiently reused, which means that the least amount of code is repeated across its usage.

I pondered over it and the first form of abstraction that I could think of in ‘React-land’ was that of a Component.

So, I designed a way to create a form ‘utility’, that could be plugged-in by nesting inside a component. Essentially the form would be React component. The form would have the api, getList and setFilteredList.

The original implementation (as would any other real-world use-case) also involved a map of the various properties that would need to be filtered, but I am just showing the minimal api surface for brevity.

I then set over it. The final implementation looked something like ..

getList() {
  ...
}

setFilteredList(filteredList) {
  ...
}

render() {
  ...
  <div>
    <FilterComponent
      getList={this.getList()}
      setFilteredList={this.setFilteredList.bind(this)}
    />
  </div>
  ...
}

This abstracted away the presentational (the filter input(s)) as well as the state (ie. the filtering query) aspects of the filter functionality.

This worked fine for us initially since we were in a time-crunch (call it real-world software development!) but whenever I looked back over it, it just didn’t feel right.

It was because, we were receiving the filteredList from a ‘child’ component.

Now React emphasises on uni-directional flow of state, which is from parent to child and thus such a scenario is an anti-pattern since the information is flowing in reverse!

Because of this I had to explicitly set the filtered list in the parent component by calling setFilteredList function whereas in a perfectly ‘React-y’ scenario the filtered list should be available automatically.

This breaks the React paradigm which emphasises on uni-directional reactive flow of data.

Later, I found a solution for the same. Can you guess it? You might-have come across it while using Redux-Form.. Woah, I might have spilled the beans already!

Anyways, I will be discussing it in my next post. Stay tuned!

Maintaining a Git Differential

2015-03-04T00:00:00+00:00

Lately, while working on some projects, I came across times when I had to inspect and debug the code my way, which means using some debugging utilities and introducing some config changes and additions. So, I have been trying to figure out a way to maintain my own setup for working on projects, so that I can pull in changes from remote, work on them and push the relevant stuff upstream, without those modifications (config changes, debugging utilities etc) coming in the way. Also I would like my changes to be version-controlled.

What this turns out in my case is the task of maintaining my own git differential. And here’s the way I deal with them.

Let’s assume a simple setup in which there is a git remote labelled as origin and a branch on the local system labelled as master.

To begin with, create a new branch from the master branch.

$ git checkout -b dev

Now, make any such changes (commits) which you would not like to introduce to remote in this branch.

To work on the project, you might want to continue with the same branch or create a separate branch altogether. I work on the former in case, I have to make a commit or two and/or need to patch the master as soon as I make a commit. In that case, while working on the dev branch, I do

$ git checkout master
$ git cherry-pick <required-commit-ref>

For the uninitiated, cherry-pick copies a commit from one branch to another, which means the new commits has the same content but a new commit ID.

In case, I am doing some work where I am only concerned with moving some commits only after doing a brief work, I first checkout a new branch based on dev

$ git checkout -b feature-x

Let feature-x be the ref of the new branch. Now when you are done, you would like to do away with those unneeded commits from the dev branch. Worry not. Simply do

$ git rebase --onto master last-non-required-commit-ref feature-x

Slick. Right?

What I have done here is provided the branch (master) which has to become the base of the resultant branch as the first argument to the rebase –onto command. The second command is the initial commit reference (non-inclusive) which I want to be included in the resultant branch. The third command is the commit reference for the last commit required in the resultant branch.

One can see it in action as..

Here’s the log of the commits from the feature-x branch. I have aliased git log (basically) as gl on my system.

Now, the rebase stuff..

And the final git log!

Note: Doing so may also result in merge conflict, which the rebase process will handle gracefully, but you won’t usually encounter them as long as most of your changes are non-intrusive to the regular setup.

Now, you simply have to checkout the master branch and rebase it against the feature branch.

$ git checkout master
$ git rebase feature-x

Also, I do all interactions with the remote only from my master branch. So, in case you want to pull in the latest commits into your dev branches, simply do

$ git checkout master
$ git pull --rebase

then,

$ git checkout <working-branch>
$ git rebase master

This would apply the latest changes on the code from master branch, and apply the exclusive commits over them. This has worked fine for me yet :)

This is my personal strategy for maintaining a git differential. If you have something to say or share, please comment below.

Relevant HN page: https://news.ycombinator.com/item?id=9140391

Ref:

Greetings interweb!

2015-02-13T00:00:00+00:00

Greetings, fellows of the interweb!

So, after much procastination and wrestling with blogging frameworks I am making my blog live.

Jekyll is what has helped me arrive here. It is a static site generator and is quite popular among developers. Lanyon is the theme used.

So, here’s me looking forward to an awesome blogship :)

Stay tuned.

Cheers!