finish

Author: rwieruch

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+
+node_js:
+  - stable
+
+install:
+  - npm install
+
+script:
+  - npm test

README.md

@@ -2,6 +2,8 @@
 
 [![Build Status](https://travis-ci.org/the-road-to-learn-react/react-rxjs-state-example.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/react-rxjs-state-example) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/)
 
+Showcasing how RxJS can work in React. [Read more about it.](https://www.robinwieruch.de/react-rxjs-state-management-tutorial/)
+
 ## Installation
 
 * `git clone git@github.com:the-road-to-learn-react/react-rxjs-state-example.git`

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-scripts": "1.1.4",

package.json

@@ -1,34 +1,92 @@
 import React from 'react';
+import axios from 'axios';
+import { BehaviorSubject } from 'rxjs/index';
+import { combineLatest, timer } from 'rxjs';
+import { flatMap, map, debounce, filter } from 'rxjs/operators';
 
-import { selectedCurrency$, CURRENCIES } from './state';
-import connect from './connect';
+import withObservableStream from './withObservableStream';
 
-const TradingPairs = ({ currency, actions }) => (
+const SUBJECT = {
+  POPULARITY: 'search',
+  DATE: 'search_by_date',
+};
+
+const App = ({
+  subject,
+  query,
+  stories,
+  onSelectSubject,
+  onChangeInput,
+}) => (
   <div>
-    <h1>Trading Pair</h1>
-    <p>{currency}</p>
+    <h1>Hacker News with React and Rx.js</h1>
 
     <div>
-      {Object.values(CURRENCIES).map(currency => (
+      {Object.values(SUBJECT).map(subject => (
         <button
-          key={currency}
-          onClick={() => actions.onSelectCurrency({ currency })}
+          key={subject}
+          onClick={() => onSelectSubject(subject)}
           type="button"
         >
-          {currency}
+          {subject}
         </button>
       ))}
     </div>
+
+    <input
+      type="text"
+      onChange={event => onChangeInput(event.target.value)}
+    />
+
+    <p>{`http://hn.algolia.com/api/v1/${subject}?query=${query}`}</p>
+
+    <ul>
+      {stories.map(story => (
+        <li key={story.objectID}>
+          <a href={story.url || story.story_url}>
+            {story.title || story.story_title}
+          </a>
+        </li>
+      ))}
+    </ul>
   </div>
 );
 
-const TradingPairsConnected = connect(
-  selectedCurrency$,
-  {
-    onSelectCurrency: selectedCurrency$.next.bind(selectedCurrency$),
-  },
-)(TradingPairs);
+const subject$ = new BehaviorSubject(SUBJECT.POPULARITY);
+const query$ = new BehaviorSubject('');
 
-const App = () => <TradingPairsConnected />;
+const queryToFetch$ = query$.pipe(
+  debounce(() => timer(1000)),
+  filter(query => query !== ''),
+);
+
+const fetch$ = combineLatest(subject$, queryToFetch$).pipe(
+  flatMap(([subject, query]) =>
+    axios(`http://hn.algolia.com/api/v1/${subject}?query=${query}`),
+  ),
+  map(result => result.data.hits),
+);
 
-export default App;
+export default withObservableStream(
+  // observables
+  [
+    combineLatest(subject$, query$, (subject, query) => ({
+      subject,
+      query,
+    })),
+    combineLatest(fetch$, stories => ({
+      stories,
+    })),
+  ],
+  // handler
+  {
+    onSelectSubject: subject => subject$.next(subject),
+    onChangeInput: value => query$.next(value),
+  },
+  // initial state
+  {
+    subject: SUBJECT.POPULARITY,
+    query: '',
+    stories: [],
+  },
+)(App);

src/App.js

@@ -0,0 +1,31 @@
+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 }),
+        ),
+      );
+    }
+
+    componentWillUnmount() {
+      this.subscriptions.forEach(subscription =>
+        subscription.unsubscribe(),
+      );
+    }
+
+    render() {
+      return (
+        <Component {...this.props} {...this.state} {...actions} />
+      );
+    }
+  };
+};