Clean up unused sagas
This commit is contained in:
parent
fb4fa3cecb
commit
2429a0d775
3 changed files with 44 additions and 91 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue