Route change example is added

rohangeorge91 · Jul 29, 2016 · 6ee13c2 · 6ee13c2
1 parent 469e04c
commit 6ee13c2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/generators/app/templates/src/components/SOQuestionsList/SOQuestionsList.js b/generators/app/templates/src/components/SOQuestionsList/SOQuestionsList.js
@@ -21,12 +21,12 @@ class SOQuestionsList extends React.Component {
         {
           questions.map((ques, i) => (
             highlightable ?
-              <div style={{ padding: 2 + 'px' }}>
-                <SOQHighlightable key={i} unique={uniquePrefix + i} question={ques}/>
+              <div key={i} style={{ padding: 2 + 'px' }}>
+                <SOQHighlightable unique={uniquePrefix.concat(i)} question={ques}/>
               </div>
             :
-              <div style={{ padding: 2 + 'px' }}>
-                <SOQuestion key={i} question={ques}/>
+              <div key={i} style={{ padding: 2 + 'px' }}>
+                <SOQuestion question={ques}/>
               </div>
           ))
         }

diff --git a/generators/app/templates/src/components/SOSearch/SOSearch.js b/generators/app/templates/src/components/SOSearch/SOSearch.js
@@ -1,29 +1,32 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router';
 import { push } from 'react-router-redux';
 
-import { isLoaded as isLoadedSearch, load as loadResults } from './Actions';
+import { load as loadResults } from './Actions';
 import SOQuestionsList from '../SOQuestionsList/SOQuestionsList';
 import SOHot from '../SOHot/SOHot';
 
 class SOSearch extends React.Component {
   static propTypes = {
     query: React.PropTypes.string.isRequired,
     questions: React.PropTypes.array.isRequired,
-    dispatch: React.PropTypes.func.isRequired
+    dispatch: React.PropTypes.func.isRequired,
+    loaded: React.PropTypes.bool.isRequired
   };
 
   componentWillMount() {
-    const { dispatch, query } = this.props;
-    if (query !== '' && !isLoadedSearch(this.props)) {
+    const { dispatch, query, loaded } = this.props;
+    if (query !== '' && !loaded) {
       // Remember to make it into an object
       dispatch(loadResults({ query: query }));
     }
   }
 
+  // IMPORTANT: Used when we show the same component with different props
   componentWillUpdate(next) {
     if (next.query !== '' && (next.query !== this.props.query)) {
-      this.props.dispatch(loadResults({ query: next.params.query }));
+      next.dispatch(loadResults({ query: next.query }));
     }
   }
 
@@ -33,11 +36,16 @@ class SOSearch extends React.Component {
       <div>
         <div className="col-md-8">
           <h3>Search StackOverflow</h3>
+          <p>
+            Example Searches:
+            <Link to="/sosearch/Hello">Hello</Link>
+            <Link to="/sosearch/World">World</Link>
+            <Link to="/sosearch/React">React</Link>
+          </p>
           <input type="text" name="search" onChange={
             (e) => {
               e.preventDefault();
               dispatch(push('/sosearch/' + e.target.value));
-              dispatch(loadResults({ query: e.target.value }));
             }
           } value={query} />
           <SOQuestionsList questions={questions} />
@@ -54,7 +62,7 @@ const mapStateToProps = (state, ownProps) => (
   {
     query: ownProps.params ? ownProps.params.query : state.sosearch.data.query,
     questions: state.sosearch.data.results,
-    loading: state.sosearch.loading
+    loaded: state.sosearch.loaded
   }
 );