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 React from 'react'
|
||||||
import List from './List'
|
|
||||||
import Form from './Form'
|
import Form from './Form'
|
||||||
import Post from './Posts'
|
import Post from './Posts'
|
||||||
|
|
||||||
|
@ -8,12 +7,7 @@ export default function App() {
|
||||||
<div className = 'row mt-5'>
|
<div className = 'row mt-5'>
|
||||||
|
|
||||||
<div className = 'col-md-4 offset-md-1'>
|
<div className = 'col-md-4 offset-md-1'>
|
||||||
<h2>Articles</h2>
|
<h2>Choose a candidate</h2>
|
||||||
<List />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className = 'col-md-4 offset-md-1'>
|
|
||||||
<h2>Add a new article</h2>
|
|
||||||
<Form />
|
<Form />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { getHillaryData } from "../actions/index"
|
||||||
import { getTrumpData } from "../actions/index"
|
import { getTrumpData } from "../actions/index"
|
||||||
|
|
||||||
export function Post(props) {
|
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
|
// Fetch tweets when user clicks on candidate's button
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -21,41 +21,39 @@ export function Post(props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<p>@{cand}</p>
|
<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>
|
{cand === 'Hillary Clinton' && (
|
||||||
<ul className="list-group list-group-flush">
|
<div>
|
||||||
{articlesHillary.map(el => (
|
<ul className="list-group list-group-flush">
|
||||||
<li className="list-group-item" key={el.id_str}>
|
{articlesHillary.map(el => (
|
||||||
<p>{el.created_at}</p>
|
<li className="list-group-item" key={el.id_str}>
|
||||||
<p>{el.text}</p>
|
<p>{el.created_at}</p>
|
||||||
</li>
|
<p>{el.text}</p>
|
||||||
))}
|
</li>
|
||||||
</ul>
|
))}
|
||||||
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
return {
|
return {
|
||||||
articles: state.remoteArticles.slice(0, 10),
|
|
||||||
articlesHillary: state.remoteArticlesHillary.slice(0, 10),
|
articlesHillary: state.remoteArticlesHillary.slice(0, 10),
|
||||||
articlesTrump: state.remoteArticlesTrump.slice(0, 10),
|
articlesTrump: state.remoteArticlesTrump.slice(0, 10),
|
||||||
candidate: state.candidate
|
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 { eventChannel } from 'redux-saga'
|
||||||
import openSocket from 'socket.io-client'
|
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'
|
const socketServerURL = 'http://localhost:3030'
|
||||||
let socket
|
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() {
|
function* workerHillaryStream() {
|
||||||
yield takeEvery('DATA_HILLARY_REQUESTED', listenHillarySaga)
|
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
|
// saga that listens to the socket and puts the new data into the reducer
|
||||||
const listenHillarySaga = function* () {
|
const listenHillarySaga = function* () {
|
||||||
// connect to the server
|
// connect to the server
|
||||||
|
@ -98,7 +58,8 @@ const listenHillarySaga = function* () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Trump
|
// ----------- Trump ------------
|
||||||
|
|
||||||
function* workerTrumpStream() {
|
function* workerTrumpStream() {
|
||||||
yield takeEvery('DATA_TRUMP_REQUESTED', listenTrumpSaga)
|
yield takeEvery('DATA_TRUMP_REQUESTED', listenTrumpSaga)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue