Building iWisdom: Implementing back button and UI improvements

So, my iWisdom application is almost complete. It can add, edit and search wisdom. A wisdom can be linked to other wisdom. This makes it easy to expand and improve on the Wisdom of an organization. The wisdom of an organization is constantly evolving and iWisdom lets you manage it that way.

In the last post, I wrote about adding linking functionality in the wisdom editor. It lets you add links to other wisdom and browse to it by clicking on it. But what if I am changing a wisdom and then I click on a link in it before saving it. I have no way to come back to it and all of my changes are lost.

To get around this issue, I need to add ‘back’ functionality in my application. In this post, I am writing about how I implemented ‘back’ functionality in my application.

First, to go back to a previous state of my application, I should save the history of state somewhere. For this, I added a property called history in the state.

In App.js:

this.state = {
  ...
  history: []
}

The history is the array of previous states so that I can go back to it.

Now, I need to add a ‘back’ button on the UI. It will be placed alongside the other buttons like ‘Home’ and ‘Save’. Yet, it will only show under certain conditions. One, the state.history should not be empty. Second, I should be on an edit page.
In render method of App.js:

var backbutton = (this.state.history.length > 0 && this.state.screen === 'edit') ?
                  (<button className = "actionButton" onClick={() => this.back()}>Back</button) : '';

{backbutton}

Now, I need to implement this.back in App.js:

back () {
  var history = this.state.history;;
  if (history.length > 0) {
    var lastState = history[history.length - 1]
    this.setState(Object.assign({}, lastState));
}

But, before the back functionality can work, I should also push the previous state into the state.history. This is done on two actions: hashtagClick and openEdit. Let’s first write a function to get updated history, when these actions happen;

function getNewHistory (state) {
  var previousState = Object.assign({}, state);
  var history = previousState.history.slice();
  history.push(previousState);

  return history;
}

Now, I will use this function to update history in openEdit and hashtagClick actions:

openEdit () {
 ...
 this.setState({..., history: getNewHistory(this.state)});
}

Also, I need to clear history at some point. In the action openHome, I will clear the history:

openHome () {
  this.setState({screen: 'main', history: []});
}

This implements history in my application. Now, I can click on any link in a Wisdom and come back to the first Wisdom by just clicking the back button. I can do this multiple times, that is, I can click on link after link in the Wisdom items and then keep on clicking back button, to browse through all previously opened Wisdom items. This goes on until I click on Save or Home button.

Next part remaining in my application was improving the UI. The buttons in the main screen were not looking good. To make them look good, I gave an inside box shadow to them and increased their height. I also gave them some border radius to make them look good.
In main.css:

.box {
  box-shadow: 0px 0px 5px #dedede inset;
  border-radius: 3px;
  height: 150px;
}

I also added hover styles on these buttons:

.box:hover {
  box-shadow: 0px 0px 5px gray inset;
}

Apart from this, I added some left padding to search component to position text in right position. I adjusted padding, height, the width of other components to position them properly.

This completes iWisdom application and it is ready to be released.