Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 051dfd6

Browse files
projects completed
1 parent 336e5ac commit 051dfd6

File tree

9 files changed

+161
-52
lines changed

9 files changed

+161
-52
lines changed

‎src/App.css

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,8 @@
22
text-align: center;
33
}
44

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
15-
}
16-
17-
.App-title {
18-
font-size: 1.5em;
19-
}
20-
21-
.App-intro {
22-
font-size: large;
5+
._margin{
6+
margin: 5px;
237
}
248

259
@keyframes App-logo-spin {

‎src/App.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

22

33
import React from 'react';
4-
import Button from '../containers/Button';
5-
import NewsItem from '../containers/NewsItem'
6-
import Loading from '../containers/Loading'
4+
import Button from './containers/Button';
5+
import NewsItem from './containers/NewsItem';
6+
import Loading from './containers/Loading';
7+
78
let App = () => (
89
<div>
910
<Button />

‎src/containers/Button.js

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
1+
12
import React from 'react';
23
import { connect } from 'react-redux';
34
import { getNews } from '../actions';
5+
import { bindActionCreators } from 'redux';
6+
import '../App.css';
7+
8+
9+
/*
10+
11+
let Button= ({getNews}) =>(
12+
<button onClick={getNews}>Press to see news</button>
13+
)
14+
15+
const mapDispatchToProps = {
16+
getNews: getNews,
17+
};
18+
19+
20+
let Button = (props) =>(
21+
<button onClick={getNews}>Press to see news</button>
22+
)
23+
424
25+
*/
526

6-
let Button= ({getNews}) =>(
7-
<button onClick={getNews}>Press to see news</button>
8-
)
9-
const mapDispatchToProps = {
10-
getNews: getNews,
11-
};
1227

28+
class Button extends React.Component{
29+
render(){
30+
return(
31+
<div>
32+
<button className = "_margin" onClick={this.props.getNews}>Press to see news</button>
33+
</div>
34+
)
35+
}
36+
}
1337

14-
// const mapDispatchToProps = (dispatch) => {
15-
// return bindActionCreators({api_data}, dispatch);
16-
// }
38+
const mapDispatchToProps = (dispatch) => {
39+
return bindActionCreators({getNews}, dispatch);
40+
}
1741

1842
Button = connect(null,mapDispatchToProps)(Button);
1943
export default Button;

‎src/containers/Loading.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
3+
import React from 'react';
4+
import { connect } from 'react-redux';
5+
import img from '../loading_spinner.gif';
6+
7+
8+
let loading = ({ loading }) => (
9+
10+
loading ?
11+
<div style={{ textAlign: 'center' }}>
12+
<img src={img} alt='loading' />
13+
<h1>LOADING</h1>
14+
</div> :
15+
null
16+
);
17+
18+
19+
const mapStateToProps = (state) => (
20+
{
21+
loading: state.loading
22+
}
23+
)
24+
25+
loading = connect(mapStateToProps,null)(loading)
26+
export default loading;

‎src/containers/NewsItem.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
3+
import React, { Component } from 'react';
4+
import ReactDOM from 'react-dom';
5+
import { connect } from 'react-redux';
6+
7+
8+
9+
const imgStyle = {
10+
hight: 'auto',
11+
width: '80%',
12+
borderRadius: '5%'
13+
};
14+
15+
const articleStyle = {
16+
width: '50%',
17+
margin: '0 auto',
18+
color: 'black'
19+
}
20+
21+
class NewsItem extends React.Component{
22+
23+
constructor(props){
24+
super(props);
25+
console.log('News',this);
26+
}
27+
28+
render(){
29+
30+
const {article} = this.props;
31+
console.log('article',article);
32+
let _news_data;
33+
34+
if(article){
35+
36+
_news_data = article.map((article,index) => {
37+
return(
38+
<div key = {index}>
39+
<article style={articleStyle} >
40+
<div>
41+
<h1>{article.author}</h1>
42+
<img style={imgStyle} src={article.urlToImage} alt="" />
43+
<h4>{article.description}</h4>
44+
<a href={article.url} target="_blank">READ MORE</a>
45+
</div>
46+
</article>
47+
</div>
48+
)
49+
})
50+
}
51+
else{
52+
_news_data = (<div><p></p></div>);
53+
}
54+
55+
return(
56+
<div>
57+
{_news_data}
58+
</div>
59+
)
60+
}
61+
62+
}
63+
64+
const mapStateToProps = (state) => ({
65+
article: state.news,
66+
})
67+
68+
NewsItem = connect(mapStateToProps,null)(NewsItem)
69+
export default NewsItem;
70+

‎src/index.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
4-
import App from './App';
5-
4+
import App from './App'
65
import createSagaMiddleware from 'redux-saga';
76
import {render} from 'react-dom';
87
import {createStore, applyMiddleware} from 'redux';
9-
import {provider} from 'react-redux';
8+
9+
import {Provider} from 'react-redux';
1010
import {logger} from 'redux-logger';
11-
// import reducer from './reducers';
11+
import reducer from './reducers';
1212
// import App from './components/App';
13-
// import rootSaga from './sagas';
13+
import rootSaga from './sagas';
1414

1515
const sagaMiddleware = createSagaMiddleware();
1616

17-
// const store = createStore(
18-
// reducer,
19-
// applyMiddleware(sagaMiddleware, logger),
20-
// );
17+
const store = createStore(
18+
reducer,
19+
applyMiddleware(sagaMiddleware, logger),
20+
);
2121

22-
// sagaMiddleware.run(rootSaga);
22+
sagaMiddleware.run(rootSaga);
2323

24-
// render(
25-
// <Provider store={store}>
26-
// <App />
27-
// </Provider>,
28-
// document.getElementById('root'),
29-
// );
24+
render(
25+
<Provider store={store}>
26+
<App />
27+
</Provider>,
28+
document.getElementById('root'),
29+
);
3030

31-
ReactDOM.render(<App />, document.getElementById('root'));
31+
// ReactDOM.render(<App />, document.getElementById('root'));
3232

‎src/loading_spinner.gif

14.4 KB
Loading[フレーム]

‎src/reducers/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const reducer = (state = {}, action) => {
44
case 'GET_NEWS':
55
return { ...state, loading: true };
66
case 'NEWS_RECEIVED':
7-
return { ...state, news: action.json[0], loading: false }
7+
return { ...state, news: action.data, loading: false }
88
default:
99
return state;
1010
}

‎src/sagas/index.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ import axios from 'axios';
33
import {put, takeLatest, all} from 'redux-saga/effects';
44

55
function *getNews(){
6-
const json = yield axios('https://newsapi.org/v1/articles?source= cnn&apiKey=c39a26d9c12f48dba2a5c00e35684ecc')
7-
.then(response => response.json())
6+
7+
let data;
8+
const json = yield axios('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=cee62291e6f04d7e89859dec2c2b4b7e')
9+
.then( (response) => {
10+
data = response.data.articles;
11+
})
812
.catch(err => err);
913

10-
yield put({ type: "NEWS_RECEIVED", json: json.articles, });
14+
yield put({ type: "NEWS_RECEIVED", data: data });
1115
}
1216

1317
function* actionWatcher() {
14-
yield takeLatest('GET_NEWS', fetchNews)
18+
yield takeLatest('GET_NEWS', getNews)
1519
}
1620

1721
export default function* rootSaga() {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /