Trump stream

server.js

@@ -31,19 +31,35 @@ app.use(cors())
 app.use('/api', apiRoutes)
 
 // Socket
-io.on('connection', (socket) => {
-	console.log('User connected')
+var hillary = io.of('hillary').on('connection', (socket) => {
+	console.log('User connected to Hillary')
 
 	let stream1 = streamClient.stream('statuses/filter', {track: 'Hillary%20Clinton'})
 
-	// streamClient.stream('statuses/filter', {track: 'Hillary%20Clinton'},  function(stream) {
-		stream1.on('data', function(tweet) {
-			io.emit('tweet', tweet)
-		})
-		stream1.on('error', function(error) {
-			console.log(error)
-		})
-	// })
+	stream1.on('data', function(tweet) {
+		hillary.emit('tweet', tweet)
+	})
+	stream1.on('error', function(error) {
+		console.log(error)
+	})
+
+	socket.on('disconnect', () => {
+		stream1.destroy()
+		console.log('User disconnected')
+	})
+})
+
+var trump= io.of('trump').on('connection', (socket) => {
+	console.log('User connected to Trump')
+
+	let stream1 = streamClient.stream('statuses/filter', {track: 'Donald%20Trump'})
+
+	stream1.on('data', function(tweet) {
+		trump.emit('tweet', tweet)
+	})
+	stream1.on('error', function(error) {
+		console.log(error)
+	})
 
 	socket.on('disconnect', () => {
 		stream1.destroy()

src/components/Posts.jsx

@@ -4,7 +4,7 @@ import { getHillaryData } from "../actions/index"
 import { getTrumpData } from "../actions/index"
 
 export function Post(props) {
-	let { articles, articlesHillary, candidate, getHillaryData, getTrumpData } = props
+	let { articles, articlesTrump, articlesHillary, candidate, getHillaryData, getTrumpData } = props
 
 	// Fetch tweets when user clicks on candidate's button
 	useEffect(() => {
@@ -39,6 +39,16 @@ export function Post(props) {
 					</li>
 				))}
 			</ul>
+
+			<p>Trump stream</p>
+			<ul className="list-group list-group-flush">
+				{articlesTrump.map(el => (
+					<li className="list-group-item" key={el.id_str}>
+						<p>{el.created_at}</p>
+						<p>{el.text}</p>
+					</li>
+				))}
+			</ul>
 		</div>
 	)
 }
@@ -47,6 +57,7 @@ function mapStateToProps(state) {
 	return {
 		articles: state.remoteArticles.slice(0, 10),
 		articlesHillary: state.remoteArticlesHillary.slice(0, 10),
+		articlesTrump: state.remoteArticlesTrump.slice(0, 10),
 		candidate: state.candidate
 	}
 }

src/constants/action-types.js

@@ -1,4 +1,5 @@
 export const ADD_ARTICLE = "ADD_ARTICLE"
 export const SET_CANDIDATE = "SET_CANDIDATE"
 export const DATA_LOADED = "DATA_LOADED"
-export const DATA_LOADED_TO_ADD = "DATA_LOADED_TO_ADD"
+export const DATA_LOADED_TO_HILLARY = "DATA_LOADED_TO_HILLARY"
+export const DATA_LOADED_TO_TRUMP = "DATA_LOADED_TO_TRUMP"

src/reducers/index.js

@@ -1,12 +1,14 @@
 import { ADD_ARTICLE } from '../constants/action-types'
 import { SET_CANDIDATE } from '../constants/action-types'
 import { DATA_LOADED } from '../constants/action-types'
-import { DATA_LOADED_TO_ADD } from '../constants/action-types'
+import { DATA_LOADED_TO_HILLARY } from '../constants/action-types'
+import { DATA_LOADED_TO_TRUMP } from '../constants/action-types'
 
 const initialState = {
 	articles: [],
 	remoteArticles: [],
 	remoteArticlesHillary: [],
+	remoteArticlesTrump: [],
 	candidate: ''
 }
 
@@ -29,12 +31,18 @@ function rootReducer(state = initialState, action) {
     })
 	}
 
-	else if (action.type === DATA_LOADED_TO_ADD) {
+	else if (action.type === DATA_LOADED_TO_HILLARY) {
     return Object.assign({}, state, {
       remoteArticlesHillary: state.remoteArticlesHillary.concat(action.payload)
     })
   }
 
+	else if (action.type === DATA_LOADED_TO_TRUMP) {
+    return Object.assign({}, state, {
+      remoteArticlesTrump: state.remoteArticlesTrump.concat(action.payload)
+    })
+  }
+
   return state
 }
 

src/sagas/api-saga.js

@@ -5,7 +5,7 @@ import openSocket from 'socket.io-client'
 export default function* watcherSaga() {
 	yield all([
 		workerHillaryStream(),
-		workerTrump()
+		workerTrumpStream()
 	])
 }
 
@@ -51,16 +51,20 @@ function getTrumpData() {
 
 
 // ---------- Stream ----------------
-const socketServerURL = 'http://localhost:3030/'
+const socketServerURL = 'http://localhost:3030'
 let socket
 
+// Hillary
 function* workerHillaryStream() {
-	yield takeEvery('DATA_HILLARY_REQUESTED', listenServerSaga)
+	yield takeEvery('DATA_HILLARY_REQUESTED', listenHillarySaga)
 }
 
 // wrapping function for socket.on
-const connect = () => {
-	socket = openSocket(socketServerURL)
+const connectHillary = () => {
+	if (typeof socket !== 'undefined') {
+		socket.disconnect()
+	}
+	socket = openSocket(socketServerURL + '/hillary')
 	return new Promise((resolve) => {
 		socket.on('connect', () => {
 			resolve(socket)
@@ -80,16 +84,49 @@ const createSocketChannel = (socket, tweet)=> eventChannel((emit) => {
 });
 
 // saga that listens to the socket and puts the new data into the reducer
-const listenServerSaga = function* () {
+const listenHillarySaga = function* () {
 	// connect to the server
-	const socket = yield call(connect)
+	const socket = yield call(connectHillary)
 
 	// then create a socket channel
-	const socketChannel = yield call(createSocketChannel, socket, 'hillary')
+	const socketChannel = yield call(createSocketChannel, socket)
 
 	// then put the new data into the reducer
 	while (true) {
 		const payload = yield take(socketChannel)
-		yield put({type: 'DATA_LOADED_TO_ADD', payload})
+		yield put({type: 'DATA_LOADED_TO_HILLARY', payload})
+	}
+}
+
+// Trump
+function* workerTrumpStream() {
+	yield takeEvery('DATA_TRUMP_REQUESTED', listenTrumpSaga)
+}
+
+// wrapping function for socket.on
+const connectTrump = () => {
+	if (typeof socket !== 'undefined') {
+		socket.disconnect()
+	}
+	socket = openSocket(socketServerURL + '/trump')
+	return new Promise((resolve) => {
+		socket.on('connect', () => {
+			resolve(socket)
+		})
+	})
+}
+
+// saga that listens to the socket and puts the new data into the reducer
+const listenTrumpSaga = function* () {
+	// connect to the server
+	const socket = yield call(connectTrump)
+
+	// then create a socket channel
+	const socketChannel = yield call(createSocketChannel, socket)
+
+	// then put the new data into the reducer
+	while (true) {
+		const payload = yield take(socketChannel)
+		yield put({type: 'DATA_LOADED_TO_TRUMP', payload})
 	}
 }