Clean up unused sagas

This commit is contained in:
Rodrigo Pedroso 2019-06-25 11:23:33 -04:00
commit 2429a0d775
3 changed files with 44 additions and 91 deletions

View file

@ -1,5 +1,4 @@
import React from 'react'
import List from './List'
import Form from './Form'
import Post from './Posts'
@ -8,12 +7,7 @@ export default function App() {
<div className = 'row mt-5'>
<div className = 'col-md-4 offset-md-1'>
<h2>Articles</h2>
<List />
</div>
<div className = 'col-md-4 offset-md-1'>
<h2>Add a new article</h2>
<h2>Choose a candidate</h2>
<Form />
</div>

View file

@ -4,7 +4,7 @@ import { getHillaryData } from "../actions/index"
import { getTrumpData } from "../actions/index"
export function Post(props) {
let { articles, articlesTrump, articlesHillary, candidate, getHillaryData, getTrumpData } = props
let { articlesTrump, articlesHillary, candidate, getHillaryData, getTrumpData } = props
// Fetch tweets when user clicks on candidate's button
useEffect(() => {
@ -21,41 +21,39 @@ export function Post(props) {
return (
<div>
<p>@{cand}</p>
<ul className="list-group list-group-flush">
{articles.map(el => (
<li className="list-group-item" key={el.id_str}>
<p>{el.created_at}</p>
<p>{el.text}</p>
</li>
))}
</ul>
<p>Hillary stream</p>
<ul className="list-group list-group-flush">
{articlesHillary.map(el => (
<li className="list-group-item" key={el.id_str}>
<p>{el.created_at}</p>
<p>{el.text}</p>
</li>
))}
</ul>
{cand === 'Hillary Clinton' && (
<div>
<ul className="list-group list-group-flush">
{articlesHillary.map(el => (
<li className="list-group-item" key={el.id_str}>
<p>{el.created_at}</p>
<p>{el.text}</p>
</li>
))}
</ul>
</div>
)}
{cand === 'Donald Trump' && (
<div>
<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>
)}
<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>
)
}
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

View file

@ -1,4 +1,4 @@
import { takeEvery, call, put, all, take, actionChannel } from 'redux-saga/effects'
import { takeEvery, call, put, all, take } from 'redux-saga/effects'
import { eventChannel } from 'redux-saga'
import openSocket from 'socket.io-client'
@ -9,52 +9,23 @@ export default function* watcherSaga() {
])
}
// Hillary worker
function* workerHillary() {
yield takeEvery('DATA_HILLARY_REQUESTED', workerHillarySaga)
}
function* workerHillarySaga() {
try {
const payload = yield call(getHillaryData)
yield put({ type: 'DATA_LOADED', payload })
} catch (e) {
yield put({ type: 'API_ERRORED', payload: e })
}
}
function getHillaryData() {
return fetch('http://localhost:3030/api/twitter?hashtag=Hillary%20Clinton')
.then(response => response.json())
}
// Trump worker
function* workerTrump() {
yield takeEvery('DATA_TRUMP_REQUESTED', workerTrumpSaga) // listenServerSaga
}
function* workerTrumpSaga() {
try {
const payload = yield call(getTrumpData)
yield put({ type: 'DATA_LOADED', payload })
} catch (e) {
yield put({ type: 'API_ERRORED', payload: e })
}
}
function getTrumpData() {
socket.disconnect()
return fetch('http://localhost:3030/api/twitter?hashtag=Donald%20Trump')
.then(response => response.json())
}
// ---------- Stream ----------------
const socketServerURL = 'http://localhost:3030'
let socket
// Hillary
// Create channel
const createSocketChannel = (socket, tweet)=> eventChannel((emit) => {
const handler = (data) => {
emit(data)
}
socket.on('tweet', handler);
return () => {
socket.off('tweet', handler)
}
})
// ----------- Hillary ------------
function* workerHillaryStream() {
yield takeEvery('DATA_HILLARY_REQUESTED', listenHillarySaga)
}
@ -72,17 +43,6 @@ const connectHillary = () => {
})
}
// This is how a channel is created
const createSocketChannel = (socket, tweet)=> eventChannel((emit) => {
const handler = (data) => {
emit(data)
};
socket.on('tweet', handler);
return () => {
socket.off('tweet', handler)
};
});
// saga that listens to the socket and puts the new data into the reducer
const listenHillarySaga = function* () {
// connect to the server
@ -98,7 +58,8 @@ const listenHillarySaga = function* () {
}
}
// Trump
// ----------- Trump ------------
function* workerTrumpStream() {
yield takeEvery('DATA_TRUMP_REQUESTED', listenTrumpSaga)
}