capped spotify raw data 500

src/containers/Spotify/Spotify.js

@@ -128,6 +128,7 @@ export default class extends Component {
 
     return (
       <LayoutWrapper>
+        <title>Interpret My Spotify Data</title>
         <PageHeader>Import</PageHeader>
         { !this.state.jsonData || true ?
           <Row style={rowStyle} gutter={gutter} justify="start">
@@ -162,19 +163,18 @@ export default class extends Component {
         <Box>
           <Tabs defaultActiveKey="1" onChange={callback}>
             <TabPane tab="Raw Data" key="1">
-              {this.hasKey("StreamingHistory") 
-              ? 
-              JSON.parse(this.state.jsonData)["StreamingHistory"].map((song, idx) => (
-                <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
-                  <Box>
-                    <h1>{song.trackName}</h1>
-                    <div>Artist: {song.artistName}</div>
-                    <div>{song.endTime}</div>
-                  </Box>
-                </Col>
-              ))
-              : 
-              <div> Please uploading your streaming history to view this data</div>}
+              {this.hasKey("StreamingHistory") ? 
+                JSON.parse(this.state.jsonData)["StreamingHistory"].slice(0, 500).map((song, idx) => (
+                  <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
+                    <Box>
+                      <h1>{song.trackName}</h1>
+                      <div>Artist: {song.artistName}</div>
+                      <div>{song.endTime}</div>
+                    </Box>
+                  </Col>
+                ))
+                : 
+                <div> Please uploading your streaming history to view this data</div>}
             </TabPane>
             <TabPane tab="Graphs" key="2">
               <Row style={rowStyle} gutter={0} justify="start">