Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 71f62c0

Browse files
author
Satyam Mishra
committed
First Commit | Fetching and putting names on to the page
1 parent 4eaf16c commit 71f62c0

File tree

6 files changed

+93
-48
lines changed

6 files changed

+93
-48
lines changed

‎src/App.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,10 @@ class App extends Component {
1515
<div className="App">
1616
<header className="App-header">
1717
<img src={logo} className="App-logo" alt="logo" />
18-
<h1 className="App-title">Welcome to CRA-REDUX-SAGA-TEMPLATE</h1>
18+
<h1 className="App-title">Listing Github Issues from a Repo</h1>
1919
</header>
2020
<p className="App-intro">
21-
Try the 1 second delayed counter below. All powererd by
22-
<b> Create-React-App, Redux, Redux-Saga</b>
23-
</p>
24-
<p>
25-
Try clicking the Button below with the Redux Chrome Extension
26-
Installed
21+
<b>Assignment for OfBusiness</b>
2722
</p>
2823
<CounterComponent />
2924
</div>

‎src/actions/counterActions.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,28 @@
22
* action types
33
*/
44

5-
export const UPDATE_COUNTER = "UPDATE_COUNTER";
6-
export const UPDATE_COMPLETE = "UPDATE_COMPLETE";
5+
export const FETCH_ISSUES = "FETCH_ISSUES";
6+
export const FETCH_COMPLETE = "FETCH_COMPLETE";
7+
export const UPDATE_AVATAR = "UPDATE_AVATAR";
8+
export const AVATAR_UPDATED = "UPDATED_AVATAR";
9+
710

811
/*
912
* action creators
1013
*/
1114

12-
export function updateCounter(counterStep) {
13-
return { type: UPDATE_COUNTER, payload: counterStep };
15+
export function fetchIssues() {
16+
return { type: FETCH_ISSUES };
17+
}
18+
19+
export function fetchComplete(action) {
20+
return { type: FETCH_COMPLETE, payload: action };
21+
}
22+
23+
export function updateAvatar(params) {
24+
return { type: UPDATE_AVATAR, payload: params };
25+
}
26+
27+
export function putAvatar(params) {
28+
return { type: AVATAR_UPDATED, payload: params}
1429
}

‎src/components/counter.js‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,54 @@
11
import React from "react";
22
import { connect } from "react-redux";
3-
import { updateCounter } from "../actions/counterActions";
3+
import { fetchIssues, updateAvatar } from "../actions/counterActions";
44

5-
//The value that the counter will increase/decrease per click
6-
const counterStep = 1;
5+
class ShowNamesFromGit extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
}
79

8-
const CounterComponent = props => {
9-
return (
10+
componentDidMount() {
11+
this.props.getNames();
12+
}
13+
14+
render() {
15+
const allData = this.props.issuesList;
16+
if(allData.issuesList) return null;
17+
// const name = allData && allData.map(item => [item.name, item.full_name]);
18+
// console.log(allData);
19+
return (
1020
<div>
11-
<h2>{props.counter}</h2>
12-
<button type="button" onClick={props.decrement}>
13-
-
14-
</button>
15-
<button type="button" onClick={props.increment}>
16-
+
17-
</button>
18-
</div>
19-
);
20-
};
21+
{allData.map((item, index) => {
22+
// const [firstName, fullme] = item.split(" ");
23+
const key = item+index;
24+
return <div key={key}>
25+
<p>{item}</p>
26+
</div>
27+
})
2128

29+
}
30+
</div>
31+
)
32+
}
33+
}
2234
const mapStateToProps = state => {
2335
return {
24-
counter: state.counterReducer
36+
issuesList: state.githubIssues
2537
};
2638
};
2739

2840
const mapDispatchToProps = dispatch => {
2941
return {
30-
increment: () => {
31-
dispatch(updateCounter(counterStep));
42+
getNames: () => {
43+
dispatch(fetchIssues());
3244
},
33-
decrement: () => {
34-
dispatch(updateCounter(-counterStep));
35-
}
45+
// getAvatar: firstName => {
46+
// dispatch(updateAvatar(firstName));
47+
// }
3648
};
3749
};
3850

3951
export default connect(
4052
mapStateToProps,
4153
mapDispatchToProps
42-
)(CounterComponent);
54+
)(ShowNamesFromGit);

‎src/reducers/counter.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
import { UPDATE_COMPLETE } from "../actions/counterActions";
1+
import { FETCH_COMPLETE, AVATAR_UPDATED } from "../actions/counterActions";
22

3-
const initialState = 0;
3+
const initialState = {
4+
issuesList: [],
5+
};
46

5-
export const counterReducer = (state = initialState, action) => {
7+
export const githubIssues = (state = initialState, action) => {
68
switch (action.type) {
7-
case UPDATE_COMPLETE:
8-
return state + action.payload;
9-
9+
case FETCH_COMPLETE:
10+
return state.issuesList.issuesList = action.payload;
11+
// return state.issuesList;
12+
// case AVATAR_UPDATED :
13+
// return state.avatar + action.payload;
14+
// return
1015
default:
1116
return state;
1217
}

‎src/reducers/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { combineReducers } from "redux";
2-
import { counterReducer } from "./counter";
2+
import { githubIssues } from "./counter";
33

44
export const rootReducer = combineReducers({
5-
counterReducer
5+
githubIssues
66
});

‎src/sagas/counter.js‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,31 @@
1-
import { UPDATE_COUNTER, UPDATE_COMPLETE } from "../actions/counterActions";
2-
import { delay } from "redux-saga";
3-
import { put, takeEvery } from "redux-saga/effects";
1+
import { FETCH_ISSUES, fetchComplete, UPDATE_AVATAR, putAvatar } from "../actions/counterActions";
2+
import { put, takeEvery, call } from "redux-saga/effects";
43

5-
export function* count(action) {
6-
yield delay(1000); //Delay the Counter By 1 Second
7-
yield put({ type: UPDATE_COMPLETE, payload: action.payload }); //Send the Final Payload to the Reducer
4+
5+
6+
export function* fetchIssues() {
7+
const response = yield call(fetch, "https://api.github.com/repos/facebook/create-react-app/issues");
8+
const body = yield call([response, 'json']);
9+
const issuesTitle = body.map(item => [item.title])
10+
// console.log(nameAndFullName)
11+
yield put(fetchComplete(issuesTitle))
12+
// console.log(body);
813
}
914

15+
16+
// export function* fetchAvatar(params) {
17+
// // console.log(params);
18+
// const response = yield call(fetch, `https://api.github.com/users/${params.payload}`);
19+
// const body = yield call([response, 'json']);
20+
// const avatar = [body.avatar_url, params.payload]
21+
// yield put(putAvatar(avatar))
22+
// // console.log(body);
23+
// }
24+
1025
// Our watcher Saga: spawn a new incrementAsync task on each INCREMENT_ASYNC
1126
export function* watchCounter() {
12-
yield takeEvery(UPDATE_COUNTER, count);
27+
yield takeEvery(FETCH_ISSUES, fetchIssues);
28+
// yield takeEvery(UPDATE_AVATAR, fetchAvatar);
1329
}
30+
31+

0 commit comments

Comments
 (0)