handle no recent matches / kills

Warzone · Oct 3, 2019 · 5073e25 · 5073e25
1 parent 73645fd
commit 5073e25
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/recent/KillHistory.js b/src/components/recent/KillHistory.js
@@ -13,12 +13,17 @@ class KillHistory extends Component {
 			<div className='kill-history'>
 				<h4>{this.props.title}</h4>
 				{/* <hr /> */}
-				{this.props.kills.length === 0 && (
+				{!this.props.kills && (
+					<div className='center'>
+						<span className='red'>No kills to show :(</span>
+					</div>
+				)}
+				{this.props.kills && this.props.kills.length === 0 && (
 					<div className='center'>
 						<CircularProgress />
 					</div>
 				)}
-				{this.props.kills.length > 0 && (
+				{this.props.kills && this.props.kills.length > 0 && (
 					<Table className='kill-history-table'>
 						<TableBody>
 							{this.props.kills.map((kill) => (

diff --git a/src/components/recent/MatchHistory.js b/src/components/recent/MatchHistory.js
@@ -16,12 +16,17 @@ class MatchHistory extends Component {
 			<div className='match-history'>
 				<h4>{this.props.title}</h4>
 				{/* <hr /> */}
-				{this.props.matches.length === 0 && (
+				{!this.props.matches && (
+					<div className='center'>
+						<span className='red'>No matches to show :(</span>
+					</div>
+				)}
+				{this.props.matches && this.props.matches.length === 0 && (
 					<div className='center'>
 						<CircularProgress />
 					</div>
 				)}
-				{this.props.matches.length > 0 && (
+				{this.props.matches && this.props.matches.length > 0 && (
 					<Table className='match-history-table'>
 						<TableBody>
 							{this.props.matches.map((match) => (

diff --git a/src/pages/PlayerInfo.js b/src/pages/PlayerInfo.js
@@ -62,6 +62,7 @@ class PlayerInfo extends Component {
 		let matchRes, matchJson;
 		matchRes = await fetch(`${config.API_BASE}/mc/match/latest/${playerName}`);
 		matchJson = await matchRes.json();
+		if (matchJson.length === 0) return this.setState({ recentMatches: null });
 		this.setState({ recentMatches: matchJson });
 	}
 
@@ -88,7 +89,7 @@ class PlayerInfo extends Component {
 								<div className='col-6'>
 									<div>Recent Kills</div>
 									<KillHistory
-										kills={player.deaths
+										kills={player.deaths.length === 0 ? null : player.deaths
 											.sort((a, b) => a.date - b.date)
 											.reverse()}
 									/>