now it makes more sense

Author: rwieruch

src/App.js

@@ -13,13 +13,19 @@ const SUBJECT = {
 
 const App = ({
   subject,
-  query,
-  stories,
+  query = '',
+  stories = [],
   onSelectSubject,
   onChangeQuery,
 }) => (
   <div>
-    <h1>Hacker News with React and Rx.js</h1>
+    <h1>React with RxJS</h1>
+
+    <input
+      type="text"
+      value={query}
+      onChange={event => onChangeQuery(event.target.value)}
+    />
 
     <div>
       {Object.values(SUBJECT).map(subject => (
@@ -33,11 +39,6 @@ const App = ({
       ))}
     </div>
 
-    <input
-      type="text"
-      onChange={event => onChangeQuery(event.target.value)}
-    />
-
     <p>{`http://hn.algolia.com/api/v1/${subject}?query=${query}`}</p>
 
     <ul>
@@ -53,7 +54,7 @@ const App = ({
 );
 
 const subject$ = new BehaviorSubject(SUBJECT.POPULARITY);
-const query$ = new BehaviorSubject('');
+const query$ = new BehaviorSubject('react');
 
 const queryToFetch$ = query$.pipe(
   debounce(() => timer(1000)),
@@ -83,10 +84,4 @@ export default withObservableStream(
     onSelectSubject: subject => subject$.next(subject),
     onChangeQuery: value => query$.next(value),
   },
-  // initial state
-  {
-    subject: SUBJECT.POPULARITY,
-    query: '',
-    stories: [],
-  },
 )(App);

src/withObservableStream.js

@@ -2,16 +2,11 @@ import React from 'react';
 
 export default (observables, actions, initialState) => Component => {
   return class extends React.Component {
-    constructor(props) {
-      super(props);
-
-      this.state = { ...initialState };
-    }
-
     componentDidMount() {
       this.subscriptions = observables.map(observable =>
-        observable.subscribe(newState =>
-          this.setState({ ...newState }),
+        observable.subscribe(
+          newState =>
+            console.log(newState) || this.setState({ ...newState }),
         ),
       );
     }