#25 Upgrade to latest version of React Bootstrap

Author: xabikos

samples/AspnetReact.Webpack/package.json

@@ -20,7 +20,7 @@
     "axios": "^0.13.1",
     "lodash": "^4.13.1",
     "react": "^15.2.1",
-    "react-bootstrap": "^0.29.4",
+    "react-bootstrap": "^0.30.2",
     "react-dom": "^15.2.1",
     "react-overlays": "^0.6.5"
   },

samples/AspnetReact.Webpack/reactApp/components/app.jsx

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 
 import '../styles/site.scss';
 
-import Counter from './counter.jsx';
 import MainController from './mainController.jsx';
 import githubLogo from '../images/github-logo.png';
 import largeImage from '../images/react-large.png';

samples/AspnetReact.Webpack/reactApp/components/counter.jsx

@@ -15,7 +15,7 @@ class MainController extends Component {
 
   handleSearch(search, language) {
     ApiService.searchRepositories(search, language).then(data => {
-      this.setState({repositories: data.items});
+      this.setState({repositories: data.items, activeRepository: {}});
     });
   }
 

samples/AspnetReact.Webpack/reactApp/components/mainController.jsx

@@ -1,22 +1,35 @@
 import React, {Component, PropTypes} from 'react';
-import {Input, Button} from 'react-bootstrap';
+import {FormGroup, ControlLabel, FormControl, Button} from 'react-bootstrap';
 import {AutoAffix} from 'react-overlays';
 
 class SearchForm extends Component {
   constructor(props) {
     super(props);
 
-    this.handleClick = this.handleClick.bind(this);
+    this.state = {
+      repository: '',
+      language: '',
+    };
+    this.handleRepositoryChange = this.handleRepositoryChange.bind(this);
+    this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    this.handleSubmitClick = this.handleSubmitClick.bind(this);
   }
 
-  handleClick() {
-    const repositoryValue = this.refs.repository.getValue();
-    const languageValue = this.refs.language.getValue();
-    if (repositoryValue) {
-      if (languageValue !== 'undefined') {
-        this.props.search(repositoryValue, languageValue);
+  handleRepositoryChange(e) {
+    this.setState({repository: e.target.value});
+  }
+
+  handleLanguageChange(e) {
+    this.setState({language: e.target.value});
+  }
+
+  handleSubmitClick() {
+    const {repository, language} = this.state;
+    if (repository) {
+      if (language) {
+        this.props.search(repository, language);
       } else {
-        this.props.search(repositoryValue);
+        this.props.search(repository);
       }
     }
   }
@@ -25,21 +38,30 @@ class SearchForm extends Component {
     return (
       <AutoAffix viewportOffsetTop={55}>
         <div>
-          <Input
-            type="text"
-            ref="repository"
-            label="Enter a keyword to search Github"
-            placeholder="search term"
-          />
-          <Input type="select" ref="language" label="Optianally select a language">
-            <option value="undefined">Select a language</option>
-            <option value="javascript">JavaScript</option>
-            <option value="csharp">C#</option>
-            <option value="python">Python</option>
-            <option value="ruby">Ruby</option>
-            <option value="java">Java</option>
-          </Input>
-          <Button bsStyle="primary" onClick={this.handleClick}>Search</Button>
+          <FormGroup controlId="repositorySearch">
+            <ControlLabel>Enter a keyword to search Github</ControlLabel>
+            <FormControl
+              type="text"
+              value={this.state.repository}
+              onChange={this.handleRepositoryChange}
+              placeholder="search term"
+            />
+          </FormGroup>
+          <FormGroup controlId="formControlsSelect">
+            <ControlLabel>Optianally select a programming language</ControlLabel>
+            <FormControl
+              componentClass="select"
+              onChange={this.handleLanguageChange}
+              placeholder="Select a programming language">
+              <option value="undefined">Select a language</option>
+              <option value="javascript">JavaScript</option>
+              <option value="csharp">C#</option>
+              <option value="python">Python</option>
+              <option value="ruby">Ruby</option>
+              <option value="java">Java</option>
+            </FormControl>
+          </FormGroup>
+          <Button bsStyle="primary" onClick={this.handleSubmitClick}>Search</Button>
         </div>
       </AutoAffix>
     );

samples/AspnetReact.Webpack/reactApp/components/searchForm.jsx

@@ -3,5 +3,4 @@ import ReactDOM from 'react-dom';
 
 import App from './components/app.jsx';
 
-const reactAppNode = document.getElementById('react-app');
-ReactDOM.render(<App />, reactAppNode);
+ReactDOM.render(<App />, document.getElementById('react-app'));

samples/AspnetReact.Webpack/reactApp/index.js

@@ -2,16 +2,7 @@ $secondsColor: red;
 
 body {
     padding-top: 60px;
-    padding-bottom: 20px;
-}
-
-.body-content {
-    padding-left: 15px;
-    padding-right: 15px;
-}
-
-#seconds {
-  background-color: $secondsColor;
+    padding-bottom: 40px;
 }
 
 #github-logo{