diff --git a/server.js b/server.js index 89cfbce..10d7655 100644 --- a/server.js +++ b/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() diff --git a/src/components/Posts.jsx b/src/components/Posts.jsx index aa9546c..31e12d3 100644 --- a/src/components/Posts.jsx +++ b/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) { ))} + +

Trump stream

+ ) } @@ -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 } } diff --git a/src/constants/action-types.js b/src/constants/action-types.js index 52ec196..3ca5edf 100644 --- a/src/constants/action-types.js +++ b/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" diff --git a/src/reducers/index.js b/src/reducers/index.js index 47d7b28..9475ba9 100644 --- a/src/reducers/index.js +++ b/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 } diff --git a/src/sagas/api-saga.js b/src/sagas/api-saga.js index 9af7cc5..1274d23 100644 --- a/src/sagas/api-saga.js +++ b/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}) } }