added enhancement per isssue codesandbox#470. (codesandbox#482)

* added enhancement per isssue codesandbox#470. Now latest dependencies will display version number along side label latest like package latest (semver version)

	modified:   packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry.js

* fixed linting errors in pull request for issue codesandbox#470

Author: Jakhotiya

.all-contributorsrc

@@ -303,6 +303,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Jakhotiya",
+      "name": "Abhishek Jakhotiya",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/9327315?v=4",
+      "profile": "https://github.com/Jakhotiya",
+      "contributions": [
+        "code",
+        "bug"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-30-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -41,5 +41,5 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub><b>Johann Hubert Sonntagbauer</b></sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub><b>Joachim Seminck</b></sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub><b>Subramanya Chakravarthy</b></sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub><b>Robert (Robby) O'Connor</b></sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub><b>Bogdan Luca</b></sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub><b>Divjot Singh</b></sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub><b>Jason Nall</b></sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>Lionel</b></sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub><b>Philipp Brumm</b></sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub><b>Valentin Hervieu</b></sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub><b>Anenth</b></sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/410792?v=4" width="100px;"/><br /><sub><b>Dony Sukardi</b></sub>](http://dsds.io)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Adonysukardi "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=donysukardi "Code") | [<img src="https://avatars3.githubusercontent.com/u/89046?v=4" width="100px;"/><br /><sub><b>Geoffrey Dhuyvetters</b></sub>](https://github.com/duivvv)<br />[🎨](#design-duivvv "Design") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=duivvv "Code") | [<img src="https://avatars3.githubusercontent.com/u/3381746?v=4" width="100px;"/><br /><sub><b>Eswar Yaganti</b></sub>](http://nyaganti.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nagamalli9999 "Code") [🚇](#infra-nagamalli9999 "Infrastructure (Hosting, Build-Tools, etc)") |
 | [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [<img src="https://avatars0.githubusercontent.com/u/1650995?v=4" width="100px;"/><br /><sub><b>Bilal Budhani</b></sub>](https://bilalbudhani.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") | [<img src="https://avatars3.githubusercontent.com/u/843342?v=4" width="100px;"/><br /><sub><b>El Juli</b></sub>](https://github.com/JulianMayorga)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=JulianMayorga "Code") | [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=arthurdenner "Code") | [<img src="https://avatars3.githubusercontent.com/u/12954909?v=4" width="100px;"/><br /><sub><b>Radi Cho</b></sub>](https://github.com/RSG-Group)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aradi-cho "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=radi-cho "Code") [🤔](#ideas-radi-cho "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/679275?v=4" width="100px;"/><br /><sub><b>Xiaoyi Chen</b></sub>](https://twitter.com/chxy)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=xyc "Code") | [<img src="https://avatars3.githubusercontent.com/u/1215971?v=4" width="100px;"/><br /><sub><b>Gautam Arora</b></sub>](https://twitter.com/gautam)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=gautamarora "Code") [🤔](#ideas-gautamarora "Ideas, Planning, & Feedback") |
-| [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub><b>Haroen Viaene</b></sub>](https://twitter.com/haroenv)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=haroenv "Code") [🎨](#design-haroenv "Design") | [<img src="https://avatars1.githubusercontent.com/u/293805?v=4" width="100px;"/><br /><sub><b>Nick Nisi</b></sub>](https://nicknisi.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nicknisi "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub><b>Haroen Viaene</b></sub>](https://twitter.com/haroenv)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=haroenv "Code") [🎨](#design-haroenv "Design") | [<img src="https://avatars1.githubusercontent.com/u/293805?v=4" width="100px;"/><br /><sub><b>Nick Nisi</b></sub>](https://nicknisi.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nicknisi "Code") | [<img src="https://avatars2.githubusercontent.com/u/9327315?v=4" width="100px;"/><br /><sub><b>Abhishek Jakhotiya</b></sub>](https://github.com/Jakhotiya)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Jakhotiya "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AJakhotiya "Bug reports") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry.js

@@ -30,24 +30,42 @@ export default class VersionEntry extends React.PureComponent {
 
   state = {
     hovering: false,
+    version: null,
   };
 
+  setVersionsForLatestPkg(pkg) {
+    const that = this;
+    fetch(`/api/v1/dependencies/${pkg}`)
+      .then(response => response.json())
+      .then(data => that.setState({ version: data.data.version }))
+      .catch(err => console.err(err)); // eslint-disable-line no-console
+  }
+
+  componentWillMount() {
+    if (this.props.dependencies[this.props.dependency] === 'latest') {
+      this.setVersionsForLatestPkg(`${this.props.dependency}@latest`);
+    }
+  }
+
   handleRemove = () => this.props.onRemove(this.props.dependency);
   handleRefresh = () => this.props.onRefresh(this.props.dependency);
   onMouseEnter = () => this.setState({ hovering: true });
   onMouseLeave = () => this.setState({ hovering: false });
 
   render() {
     const { dependencies, dependency } = this.props;
+    const version =
+      dependencies[dependency] === 'latest' && this.state.version
+        ? `latest (${this.state.version})`
+        : dependencies[dependency];
     const { hovering } = this.state;
-
     return (
       <EntryContainer
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
       >
         <span>{dependency}</span>
-        <Version hovering={hovering}>{dependencies[dependency]}</Version>
+        <Version hovering={hovering}>{version}</Version>
         {hovering && (
           <IconArea>
             <Icon onClick={this.handleRefresh}>