Skip to content

Commit 90404a7

Browse files
author
Josh Pollard
committed
added game detail and plays section, and modularized css
1 parent 91f522f commit 90404a7

19 files changed

+547
-96
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"react": "^15.4.2",
88
"react-bootstrap": "^0.30.8",
99
"react-dom": "^15.4.2",
10-
"request": "^2.81.0"
10+
"request": "^2.81.0",
11+
"request-promise": "^4.2.0"
1112
},
1213
"devDependencies": {
1314
"react-scripts": "0.9.5"

‎public/styles.css

-50
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,4 @@
11
body {
22
background-color: #555;
33
color: white;
4-
}
5-
6-
.scoreboard-container {
7-
margin-bottom: 20px;
8-
width: 250px;
9-
}
10-
11-
.team-row {
12-
width: 100%;
13-
background-color: #333;
14-
color: white;
15-
margin-bottom: 10px;
16-
padding: 10px;
17-
overflow: auto;
18-
font-weight: bold;
19-
border-left: 7px solid;
20-
}
21-
22-
.team-name {
23-
float: left;
24-
width: 75%;
25-
}
26-
27-
.score {
28-
float: left;
29-
width: 25%;
30-
}
31-
32-
.time-display {
33-
widows: 100%;
34-
font-size:14px;
35-
}
36-
37-
.today-header {
38-
font-size: 30px;
39-
line-height: 33px;
40-
margin: 0 20px;
41-
}
42-
43-
.not-today-header {
44-
color: #BBB;
45-
}
46-
47-
.not-today-header a, a:visited {
48-
color: #BBB;
49-
text-decoration: underline;
50-
}
51-
52-
#day-chooser {
53-
margin-bottom: 20px;
544
}

‎src/App.css

+4
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@
2222
from { transform: rotate(0deg); }
2323
to { transform: rotate(360deg); }
2424
}*/
25+
26+
.App-header {
27+
margin-top: 20px;
28+
}

‎src/App.js

+113-40
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,46 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
32
import Scoreboard from './scoreboard';
43
import DayChooser from './daychooser';
54
import GameService from './GameService';
6-
5+
import Loader from './loader.js';
6+
import GameDetail from './gameDetail';
7+
import NoGames from './noGames';
8+
import rp from 'request-promise';
79
import './App.css';
8-
// import TeamsJson from './teams.json';
910

10-
var request = require('request');
1111
var moment = require('moment');
1212

1313
class App extends Component {
1414
constructor(props) {
1515
super(props);
16-
this.state = { myGames: [], myTeams: [], currentDate: moment()};
16+
this.state = {
17+
myGames: [],
18+
myTeams: [],
19+
currentDate: moment(),
20+
currentGame: null,
21+
fullGame: null,
22+
isLoading: true
23+
};
1724

1825
// This binding is necessary to make `this` work in the callback
1926
this.changeDate = this.changeDate.bind(this);
27+
this.selectGame = this.selectGame.bind(this);
28+
this.closeGame = this.closeGame.bind(this);
2029
}
2130

2231
componentDidMount = () => {
23-
const gameDate = moment().format('YYYY-M-D');
32+
//const gameDate = moment().format('YYYY-M-D');
2433

25-
setTimeout(() => this.getData(gameDate), 1200);
34+
// setTimeout(() => this.getData(gameDate), 1200);
35+
36+
37+
var reload = () => {
38+
this.getData(moment(this.state.currentDate).format('YYYY-M-D'));
39+
};
40+
41+
reload();
42+
43+
// setInterval(reload , 30000);
2644
}
2745

2846
changeDate(increment) {
@@ -32,55 +50,110 @@ class App extends Component {
3250
this.getData(moment(gameDate).format('YYYY-M-D'));
3351
}
3452

35-
getData(gameDate) {
36-
const teamsUrl = 'https://statsapi.web.nhl.com/api/v1/teams/';
37-
38-
request(teamsUrl, (error, response, body) => {
39-
40-
if (error != undefined) {
41-
console.log(error.message);
42-
} else {
43-
const teams = JSON.parse(body).teams;
53+
selectGame(game) {
54+
this.getGame(game.link);
55+
this.setState({currentGame: game});
56+
}
57+
58+
closeGame() {
59+
60+
this.setState({currentGame: null});
61+
}
62+
63+
getGame(gameLink) {
64+
65+
const url = 'https://statsapi.web.nhl.com' + gameLink;
66+
67+
rp(url).then((gameData) => {
4468

45-
this.setState( { myTeams: teams.teams } );
69+
const data = JSON.parse(gameData);
70+
71+
this.setState({fullGame: data});
72+
73+
});
74+
}
75+
76+
getData(gameDate) {
77+
78+
// this.setState({isLoading: true});
79+
const gameService = new GameService();
80+
var teamDataPromise = gameService.getTeams();
81+
82+
teamDataPromise.then((d) => {
83+
const teams = JSON.parse(d).teams;
4684

47-
const scoresUrl = 'https://statsapi.web.nhl.com/api/v1/schedule?startDate=' + gameDate + '&endDate=' + gameDate + '&expand=schedule.linescore';
85+
this.setState( { myTeams: teams.teams } );
4886

49-
request(scoresUrl, (error, response, body) => {
50-
51-
const games = JSON.parse(body).dates[0].games;
87+
gameService.getGamesForDate(gameDate)
88+
.then((gameData) => {
89+
90+
const data = JSON.parse(gameData);
91+
92+
if (data.dates.length > 0) {
93+
const games = data.dates[0].games;
94+
95+
const supplementedGames = games.map(function (g){
96+
const away = teams.find(x => x.id === g.teams['away'].team.id);
97+
const home = teams.find(x => x.id === g.teams['home'].team.id);
98+
g.awayDetails = away;
99+
g.homeDetails = home;
100+
return g;
101+
});
102+
103+
this.setState({myGames: supplementedGames});
104+
} else {
105+
this.setState({myGames: []});
106+
}
107+
108+
this.setState({isLoading: false});
52109

53-
const supplementedGames = games.map(function (g){
54-
const away = teams.find(x => x.id === g.teams['away'].team.id);
55-
const home = teams.find(x => x.id === g.teams['home'].team.id);
56-
g.awayDetails = away;
57-
g.homeDetails = home;
58-
return g;
59-
} );
60-
console.log(supplementedGames);
61-
this.setState({myGames: supplementedGames});
62-
});
63-
}
64-
65-
66-
});
110+
});
67111

68-
112+
});
69113
}
70114

71115

72116
render() {
73117

74118
const listItems = this.state.myGames.map((thisGame) =>
75-
<Scoreboard game={thisGame} key={thisGame.gamePk} />
119+
<Scoreboard game={thisGame} key={thisGame.gamePk} selectGame={this.selectGame} />
76120
);
77121

122+
var mainItem = listItems;
123+
var gameDetail = (<div></div>);
124+
125+
if (this.state.isLoading) {
126+
mainItem = (<Loader />)
127+
}
128+
if (this.state.myGames.length === 0) {
129+
mainItem = (<NoGames />);
130+
}
131+
132+
if (this.state.currentGame != null) {
133+
gameDetail = (<GameDetail game={this.state.currentGame} fullGame={this.state.fullGame} closeGame={this.closeGame} />);
134+
}
135+
78136
return (
79137
<div className="App">
80-
<div className="App-header">
81-
<DayChooser currentDate={this.state.currentDate} changeCurrentDate={this.changeDate} />
138+
139+
<div className="row">
140+
<div className="col-md-4">
141+
<div className="row">
142+
<div className="col-md-12">
143+
144+
<div className="App-header">
145+
<DayChooser currentDate={this.state.currentDate} changeCurrentDate={this.changeDate} />
146+
</div>
147+
<div id="game-list">
148+
{mainItem}
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
<div className="col-md-8">
154+
{gameDetail}
155+
</div>
82156
</div>
83-
{listItems}
84157

85158
</div>
86159
);

‎src/GameService.js

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
1+
import rp from 'request-promise';
22

33
class GameService {
44

5-
GetGamesForDate(gameDate) {
6-
debugger;
7-
console.log('getting games for ' + gameDate);
5+
getTeams() {
6+
const teamsUrl = 'https://statsapi.web.nhl.com/api/v1/teams/';
7+
8+
return rp(teamsUrl);
9+
}
10+
11+
getGamesForDate(gameDate) {
12+
13+
const scoresUrl = 'https://statsapi.web.nhl.com/api/v1/schedule?startDate=' + gameDate + '&endDate=' + gameDate + '&expand=schedule.linescore';
14+
15+
return rp(scoresUrl);
816
}
917

18+
1019
}
1120

1221
export default GameService;

‎src/daychooser.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.today-header {
2+
font-size: 30px;
3+
line-height: 33px;
4+
margin: 0 20px;
5+
}
6+
7+
.not-today-header {
8+
color: #BBB;
9+
}
10+
11+
.not-today-header a, a:visited {
12+
color: #BBB;
13+
text-decoration: underline;
14+
}
15+
16+
#day-chooser {
17+
margin-bottom: 20px;
18+
text-align: center;
19+
}

‎src/daychooser.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { Component } from 'react';
2+
import './daychooser.css';
3+
24
var moment = require('moment');
35

46
class DayChooser extends Component {

‎src/gameDetail.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#game-detail {
2+
background-color: #333;
3+
padding: 0 10px;
4+
}
5+
6+
.close-button {
7+
margin-top: 15px;
8+
text-align: right;
9+
}

0 commit comments

Comments
 (0)