Skip to content

Commit 5863acf

Browse files
rvennam987rvennam987
committed
#45 Add react-router and refactor component hierarchy
1 parent 3273a2e commit 5863acf

27 files changed

+107
-75
lines changed

‎ui-react/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"dependencies": {
66
"moment": "^2.18.1",
77
"react": "^15.5.4",
8-
"react-dom": "^15.5.4"
8+
"react-dom": "^15.5.4",
9+
"react-router": "^3"
910
},
1011
"devDependencies": {
1112
"react-scripts": "1.0.7"

‎ui-react/public/index.html

+2-47
Original file line numberDiff line numberDiff line change
@@ -10,53 +10,8 @@
1010

1111
</head>
1212

13-
<body>
14-
<div class='fitchain'>
15-
<div class='banner'>
16-
<div class='inner-banner'>
17-
<div class="logoholder">
18-
<div class="title"><a href="/">FITCHAIN</a></div>
19-
<div class="chain">
20-
<div class="join"></div>
21-
<div class="link"></div>
22-
<div class="join"></div>
23-
<div class="link"></div>
24-
<div class="join"></div>
25-
<div class="link"></div>
26-
<div class="join"></div>
27-
<div class="link"></div>
28-
<div class="join"></div>
29-
<div class="link"></div>
30-
<div class="join"></div>
31-
<div class="link"></div>
32-
<div class="join"></div>
33-
</div>
34-
</div>
35-
<!-- <div class="logoholder"><img class='logo' src="images/fitchain.svg"></div>-->
36-
37-
<div class="about"><a href="./about.html">ABOUT</a></div>
38-
</div>
39-
</div>
40-
<div class='content'>
41-
<div class='inner-content'>
42-
<div id="root"></div>
43-
</div>
44-
</div>
45-
46-
47-
48-
49-
<div class='footer'>
50-
<div class='inner-banner'>
51-
<div class="logoholder">
52-
<div class="footerInfo">Built with <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM Bluemix</a> and <a href="https://www.ibm.com/blockchain/">IBM Blockchain</a></div>
53-
</div>
54-
<div class="footerGithub">
55-
<a href="https://github.com/IBM-Bluemix/health-blockchain">Github Repo</a>
56-
</div>
57-
</div>
58-
</div>
59-
</div>
13+
<body style='margin:0px'>
14+
<div id="root"></div>
6015
</body>
6116

6217
</html>

‎ui-react/src/Organization/Organization.css

Whitespace-only changes.

‎ui-react/src/Organization/Organization.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { Component } from 'react';
2+
3+
import './Organization.css';
4+
5+
class Organization extends Component {
6+
7+
render() {
8+
return (
9+
<div>
10+
My new route
11+
</div>
12+
);
13+
}
14+
}
15+
16+
export default Organization;

‎ui-react/src/BlockExplorer/Block.css ‎ui-react/src/User/BlockExplorer/Block.css

File renamed without changes.

‎ui-react/src/BlockExplorer/Block.js ‎ui-react/src/User/BlockExplorer/Block.js

File renamed without changes.

‎ui-react/src/BlockExplorer/BlockExplorer.js ‎ui-react/src/User/BlockExplorer/BlockExplorer.js

-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ class BlockExplorer extends Component {
2020
credentials: 'include'
2121
}).then(response => response.json())
2222
.then((blocks) => {
23-
console.log(blocks);
2423
this.setState({ blocks });
2524
});
2625
}

‎ui-react/src/BlockExplorer/BlockExplorerDetailView.js ‎ui-react/src/User/BlockExplorer/BlockExplorerDetailView.js

File renamed without changes.

‎ui-react/src/BlockExplorer/BlockExplorerPreview.js ‎ui-react/src/User/BlockExplorer/BlockExplorerPreview.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ class BlockExplorerPreview extends Component {
88
render() {
99
return (
1010
<div role="presentation" onClick={this.props.onExpand}>
11-
{this.props.blocks.map(() => (
12-
<div>
11+
{this.props.blocks.map(block => (
12+
<div key={block.blockNumber}>
1313
<div className="blockSmallLink" />
1414
<div className="blockSmall" />
1515
</div>
@@ -20,7 +20,7 @@ class BlockExplorerPreview extends Component {
2020
}
2121

2222
BlockExplorerPreview.propTypes = {
23-
blocks: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
23+
blocks: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
2424
onExpand: PropTypes.func.isRequired
2525
};
2626

‎ui-react/src/Login.js ‎ui-react/src/User/Login.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ class Login extends Component {
9696
}
9797

9898
Login.propTypes = {
99-
isLogin: PropTypes.string.isRequired,
99+
isLogin: PropTypes.bool.isRequired,
100100
onNavigate: PropTypes.func.isRequired,
101101
onSubmit: PropTypes.func.isRequired
102102
};

‎ui-react/src/Profile/Logo.js ‎ui-react/src/User/Logo.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react';
22
// import PropTypes from 'prop-types';
3-
import './Profile.css';
3+
import './Profile/Profile.css';
44

55

66
class Logo extends Component {

‎ui-react/src/Phone/Phone.css ‎ui-react/src/User/Phone/Phone.css

File renamed without changes.

‎ui-react/src/Phone/Phone.js ‎ui-react/src/User/Phone/Phone.js

File renamed without changes.

‎ui-react/src/Profile/Challenges.js ‎ui-react/src/User/Profile/Challenges.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ class Challenges extends Component {
1616
};
1717
this.getChallenges = this.getChallenges.bind(this);
1818
this.startChallenge = this.startChallenge.bind(this);
19+
}
20+
21+
componentDidMount() {
1922
this.getChallenges();
2023
}
2124

@@ -36,7 +39,7 @@ class Challenges extends Component {
3639
{this.state.errorMessage}
3740
</div>
3841
{this.state.challenges.map(challenge => (
39-
<div className="challengeitem" key={challenge.id}>
42+
<div className="challengeitem" key={challenge._id}>
4043
<div className="challengevisual">
4144
<img className="challengeicon" src={`images/${challenge.image}`} alt="challenge" />
4245
</div>

‎ui-react/src/Profile/History.js ‎ui-react/src/User/Profile/History.js

File renamed without changes.

‎ui-react/src/Profile/Market.js ‎ui-react/src/User/Profile/Market.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
23
import './Profile.css';
34
import API from '../callAPI';
45

5-
class Summary extends Component {
6+
class Market extends Component {
67

78
constructor(props) {
89
super(props);
@@ -12,14 +13,25 @@ class Summary extends Component {
1213
};
1314
this.getChallenges = this.getChallenges.bind(this);
1415
this.getChallenges();
16+
17+
this.acceptChallenge = this.acceptChallenge.bind(this);
1518
}
1619

1720
getChallenges() {
1821
API.getRequest('/api/market/challenges').then(body =>
1922
this.setState({ marketChallenges: body }));
2023
}
2124

25+
acceptChallenge(challengeID) {
26+
// POST /api/account/challenges/accept/:marketChallengeId
27+
// subscribe to a challenge found in the market
28+
console.log(`Accepting challenge with id ${challengeID}`);
29+
API.postRequest(`/api/account/challenges/accept/${challengeID}`).then(() =>
30+
this.props.changeStage('challages'));
31+
}
32+
2233
render() {
34+
console.log(this.state.marketChallenges);
2335
return (
2436
<div id="marketstage" className="stage">
2537
<div className="challengelist" id="marketlist">
@@ -34,7 +46,7 @@ class Summary extends Component {
3446
<div className="marketdescription">
3547
{challenge.description}
3648
</div>
37-
<button className="marketbutton">
49+
<button className="marketbutton" onClick={() => this.acceptChallenge(challenge._id)}>
3850
ACCEPT CHALLENGE
3951
</button>
4052
</div>
@@ -46,4 +58,8 @@ class Summary extends Component {
4658
}
4759
}
4860

49-
export default Summary;
61+
Market.propTypes = {
62+
changeStage: PropTypes.func.isRequired
63+
};
64+
65+
export default Market;

‎ui-react/src/Profile/Profile.css ‎ui-react/src/User/Profile/Profile.css

File renamed without changes.

‎ui-react/src/Profile/Profile.js ‎ui-react/src/User/Profile/Profile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class Profile extends Component {
3535
stage = <History />;
3636
break;
3737
case 'market':
38-
stage = <Market />;
38+
stage = <Market changeStage={this.changeStage} />;
3939
break;
4040
default:
4141
stage = <Summary />;

‎ui-react/src/Profile/Summary.js ‎ui-react/src/User/Profile/Summary.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import Logo from './Logo';
2+
import Logo from '../Logo';
33
import './Profile.css';
44
import API from '../callAPI';
55

‎ui-react/src/Profile/TabBar.js ‎ui-react/src/User/Profile/TabBar.js

File renamed without changes.

‎ui-react/src/App.css ‎ui-react/src/User/User.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
body,
2-
html {
1+
.fitchain {
32
background-color: #2d2d37;
43
width: 100%;
54
height: 100%;

‎ui-react/src/App.js ‎ui-react/src/User/User.js

+35-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { Component } from 'react';
22
import Phone from './Phone/Phone';
33
import Login from './Login';
4+
import Logo from './Logo';
45
import Profile from './Profile/Profile';
56
import BlockExplorer from './BlockExplorer/BlockExplorer';
6-
import './App.css';
7+
import './User.css';
78
import API from './callAPI';
89

910
const Route = {
@@ -12,7 +13,7 @@ const Route = {
1213
PROFILE: 'profile',
1314
};
1415

15-
class App extends Component {
16+
class User extends Component {
1617

1718
constructor(props) {
1819
super(props);
@@ -71,17 +72,42 @@ class App extends Component {
7172
break;
7273
}
7374
return (
74-
<div className="App">
75-
<div className="splitView">
76-
<Phone homeButton={this.logout}>
77-
{view}
78-
</Phone>
79-
<BlockExplorer />
75+
<div className="fitchain">
76+
<div className="banner">
77+
<div className="inner-banner">
78+
<Logo />
79+
<div className="about"><a href="./about.html">ABOUT</a></div>
80+
</div>
8081
</div>
82+
<div className="content">
83+
<div className="inner-content">
84+
<div>
85+
<div className="splitView">
86+
<Phone homeButton={this.logout}>
87+
{view}
88+
</Phone>
89+
<BlockExplorer />
90+
</div>
8191

92+
</div>
93+
</div>
94+
</div>
95+
96+
97+
<div className="footer">
98+
<div className="inner-banner">
99+
<div className="logoholder">
100+
<div className="footerInfo">Built with <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM Bluemix</a> and <a href="https://www.ibm.com/blockchain/">IBM Blockchain</a></div>
101+
</div>
102+
<div className="footerGithub">
103+
<a href="https://github.com/IBM-Bluemix/health-blockchain">Github Repo</a>
104+
</div>
105+
</div>
106+
</div>
82107
</div>
108+
83109
);
84110
}
85111
}
86112

87-
export default App;
113+
export default User;

‎ui-react/src/App.test.js ‎ui-react/src/User/User.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import App from './App';
3+
import User from './User';
44

55
it('renders without crashing', () => {
66
const div = document.createElement('div');
7-
ReactDOM.render(<App />, div);
7+
ReactDOM.render(<User />, div);
88
});

‎ui-react/src/callAPI.js ‎ui-react/src/User/callAPI.js

File renamed without changes.

‎ui-react/src/Profile/logo.svg ‎ui-react/src/User/logo.svg

File renamed without changes.

‎ui-react/src/index.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import App from './App';
3+
import { browserHistory } from 'react-router';
4+
45
import registerServiceWorker from './registerServiceWorker';
56
import './index.css';
67

7-
ReactDOM.render(<App />, document.getElementById('root'));
8+
import Routes from './routes';
9+
10+
ReactDOM.render(<Routes history={browserHistory} />, document.getElementById('root'));
811
registerServiceWorker();

‎ui-react/src/routes.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { Router, Route } from 'react-router';
3+
4+
import User from './User/User';
5+
import Organization from './Organization/Organization';
6+
7+
const Routes = props => (
8+
<Router {...props}>
9+
<Route path="/" component={User} />
10+
<Route path="/organization" component={Organization} />
11+
</Router>
12+
);
13+
14+
export default Routes;

0 commit comments

Comments
 (0)