Skip to content

Commit ec6c125

Browse files
knowbeeknowbee
committed
get members from api
1 parent 524082d commit ec6c125

File tree

6 files changed

+112
-86
lines changed

6 files changed

+112
-86
lines changed

‎src/helpers/url.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
export const url = (() => {
33
const { host } = document.location;
44
if (/localhost/.test(host)) {
5-
return 'http://localhost:5000';
5+
return "http://localhost:5000";
66
}
77
if (/staging/.test(host)) {
8-
return 'https://api-staging.opensource.org.rw';
8+
return "https://api-staging.opensource.org.rw";
99
}
10-
return 'https://api.opensource.org.rw'
10+
return "https://api.opensource.org.rw";
1111
})();
1212

1313
export const homeStatsURL = `${url}/stats/home`;
14+
export const membersPageURL = `${url}/members`;

‎src/pages/Members.js

Lines changed: 56 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,81 @@
11
import React from "react";
22
import Header from "../components/Header";
33
import Footer from "../components/Footer";
4+
import { getMembers } from "./../redux/actions/members";
5+
import { connect } from "react-redux";
6+
import propTypes from "prop-types";
47

58
export class Members extends React.Component {
6-
constructor() {
7-
super();
8-
this.state = {
9-
members: [
10-
{
11-
id: 1,
12-
name: "ISHIMWE URBAIN",
13-
bio: "Kigali,Rwanda",
14-
profileURL:
15-
"https://versions.bulma.io/0.7.0/images/placeholders/1280x960.png",
16-
details:
17-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
18-
},
19-
{
20-
id: 2,
21-
name: "ISHIMWE URBAIN",
22-
bio: "Kigali,Rwanda",
23-
profileURL:
24-
"https://versions.bulma.io/0.7.0/images/placeholders/1280x960.png",
25-
details:
26-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
27-
},
28-
{
29-
id: 3,
30-
name: "ISHIMWE URBAIN",
31-
bio: "Kigali,Rwanda",
32-
profileURL:
33-
"https://versions.bulma.io/0.7.0/images/placeholders/1280x960.png",
34-
details:
35-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
36-
},
37-
{
38-
id: 4,
39-
name: "ISHIMWE URBAIN",
40-
bio: "Kigali,Rwanda",
41-
profileURL:
42-
"https://versions.bulma.io/0.7.0/images/placeholders/1280x960.png",
43-
details:
44-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
45-
},
46-
{
47-
id: 5,
48-
name: "ISHIMWE URBAIN",
49-
bio: "Kigali,Rwanda",
50-
profileURL:
51-
"https://versions.bulma.io/0.7.0/images/placeholders/1280x960.png",
52-
details:
53-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
54-
},
55-
{
56-
id: 6,
57-
name: "ISHIMWE URBAIN",
58-
bio: "Kigali,Rwanda",
59-
profileURL:
60-
"https://versions.bulma.io/0.7.0/images/placeholders/1280x960.png",
61-
details:
62-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
63-
}
64-
]
65-
};
9+
constructor(props) {
10+
super(props);
11+
this.state = {};
12+
this.props.getMembers();
6613
document.title = "Rwanda Open Source - Members";
6714
}
6815

6916
render() {
17+
const { members, status } = this.props;
18+
{
19+
console.log(status);
20+
}
7021
return (
7122
<div className="page-container section">
7223
<Header />
7324
<h1 className="title is-4 has-text-centered">
7425
RWANDA OPEN SOURCE MEMBERS
7526
</h1>
76-
<div className="container members">
77-
<div className="wrapper">
78-
{this.state.members.map(member => (
79-
<div className="member" key={member.id}>
80-
<div className="member-card">
81-
<img className="member-image" src={member.profileURL} alt />
82-
<div className="card-content">
83-
<div className="member-details has-text-centered">
84-
<h3 className="name">{member.name}</h3>
85-
<p className="bio">{member.bio}</p>
27+
{status == 200 ? (
28+
<div className="container members">
29+
<div className="wrapper">
30+
{members.map((member) => (
31+
<div className="member" key={member.id}>
32+
<div className="member-card">
33+
<img className="member-image" src={member.profileURL} alt />
34+
<div className="card-content">
35+
<div className="member-details has-text-centered">
36+
<h3 className="name">{member.name}</h3>
37+
<p className="bio">{member.location}</p>
38+
</div>
39+
<div className="content">{member.bio}</div>
8640
</div>
87-
<div className="content">{member.details}</div>
8841
</div>
8942
</div>
90-
</div>
91-
))}
43+
))}
44+
</div>
45+
<div className="buttons">
46+
<button className="button is-grey">
47+
<i className="fas fa-plus is-white fas-space"></i>Show more
48+
</button>
49+
</div>
9250
</div>
93-
<div className="buttons">
94-
<button className="button is-grey">
95-
<i className="fas fa-plus is-white fas-space"></i>Show more
96-
</button>
97-
</div>
98-
</div>
51+
) : (
52+
<div className="members-not-found"></div>
53+
)}
9954
<Footer />
10055
</div>
10156
);
10257
}
10358
}
10459

105-
export default Members;
60+
Members.defaultProps = {
61+
members: [],
62+
status: 0,
63+
getMembers,
64+
};
65+
66+
Members.propTypes = {
67+
members: propTypes.array,
68+
status: propTypes.number,
69+
getMembers: propTypes.func,
70+
};
71+
72+
const mapStateToProps = ({ Members }) => ({
73+
members: Members.members,
74+
status: Members.status,
75+
});
76+
77+
const mapDispatchToProps = (dispatch) => ({
78+
getMembers: async () => getMembers(dispatch),
79+
});
80+
81+
export default connect(mapStateToProps, mapDispatchToProps)(Members);

‎src/redux/actions/members.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { membersPageURL } from "../../helpers/url";
2+
3+
export const getMembers = async dispatch => {
4+
let status = 0;
5+
dispatch({ type: "MEMBERS_PENDING" });
6+
fetch(membersPageURL)
7+
.then(res => {
8+
status = res.status;
9+
return res.json();
10+
})
11+
.then(res => {
12+
dispatch({ type: "MEMBERS_FINISH", payload: { ...res, status } });
13+
})
14+
.catch(() => {
15+
dispatch({ type: "MEMBERS_FAIL", payload: { status: 500 } });
16+
});
17+
};

‎src/redux/reducers/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { combineReducers } from 'redux';
2-
import Home from './home';
1+
import { combineReducers } from "redux";
2+
import Home from "./home";
3+
import Members from "./members";
34

4-
export default combineReducers({ Home });
5+
export default combineReducers({ Home, Members });

‎src/redux/reducers/members.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const initialState = {
2+
members: [],
3+
status: 0,
4+
};
5+
6+
export default (state = initialState, action) => {
7+
const { type, payload } = action;
8+
switch (type) {
9+
case "MEMBERS_PENDING":
10+
return {
11+
...state,
12+
status: 1,
13+
};
14+
case "MEMBERS_FINISH":
15+
return {
16+
...state,
17+
...payload,
18+
};
19+
case "MEMBERS_FAIL":
20+
return {
21+
...state,
22+
...payload,
23+
};
24+
default:
25+
return state;
26+
}
27+
};

‎src/scss/members.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
margin-top: 2rem;
33
}
44

5+
.members-not-found {
6+
height: 50vh !important;
7+
}
8+
59
.members {
610

711
.member-image {

0 commit comments

Comments
 (0)