add champions, spells, items

app/components/Game.jsx

@@ -2,22 +2,37 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Paper from '@material-ui/core/Paper';
+import { findChampion, findItems, findSpells } from '../data/parse';
 
 export const Game = (props) => {
   const match = props.props;
-  let creep = match.game.stats.totalMinionsKilled + match.game.stats.neutralMinionsKilled;
+  const game = match.game;
+  const stats = game.stats;
+  const champion = findChampion(game.championId);
+  const spells = findSpells([game.spell1Id, game.spell2Id]);
+  const gameItems = findItems([stats.item0, stats.item1, stats.item2, stats.item3, stats.item4, stats.item5, stats.item6]);
+  let creep = stats.totalMinionsKilled + stats.neutralMinionsKilled;
   let duration = match.gameDuration / 60;
   return (
     <Paper>
       <div>GameId: {match.gameId}
         <ul>
           <li>Game Length: {duration}</li>
-          <li>Spell 1: {match.game.spell1Id}</li>
-          <li>Spell 2: {match.game.spell2Id}</li>
-          <li>Champion: {match.game.championId}</li>
-          <li>Champion Level: {match.game.stats.champLevel}</li>
-          <li>KDA: {match.game.stats.kills} / {match.game.stats.deaths} / {match.game.stats.assists}</li>
-          <li>Items</li>
+          <li>Champion: {champion.name}</li>
+          <li>Champion Level: {stats.champLevel}</li>
+          <li>Spells:
+            <ul>
+              {spells.map(item =>
+              <li key={item.id}>{item.name}</li>)}
+            </ul>
+          </li>
+          <li>KDA: {stats.kills} / {stats.deaths} / {stats.assists}</li>
+          <li>Items:
+            <ul>
+              {gameItems.map(item =>
+              <li key={item.id}>{item.name}</li>)}
+            </ul>
+          </li>
           <li>Total Creep: {creep}</li>
           <li>Creep per minute: {creep / duration}</li>
         </ul>

app/components/Games.jsx

@@ -9,7 +9,7 @@ import Game from './Game';
 class Games extends React.Component {
   render() {
     const games = this.props.games;
-    let title = '';
+    let title = 'Loading...';
     if (games.length) {
       title = `Last ${games.length} game(s) for ${games[0].summonerName}`;
     }

app/data/parse.jsx

@@ -0,0 +1,32 @@
+'use strict';
+import champions from '../data/champion.json';
+import items from '../data/item.json';
+import summoner from '../data/summoner.json';
+
+const findChampion = (id) => {
+  for (let key in champions.data) {
+    if (id === champions.data[key].id) {
+      return champions.data[key];
+    }
+  }
+};
+
+const findItems = (ids) => {
+  const gameItems = [];
+  ids.forEach(id => {
+    if (items.data[id]) gameItems.push(items.data[id]);
+  });
+  return gameItems;
+};
+
+const findSpells = (ids) => {
+  const spells = [];
+  for (let key in summoner.data) {
+    if (ids[0] === summoner.data[key].id || ids[1] === summoner.data[key].id) {
+      if (summoner.data[key]) spells.push(summoner.data[key]);
+    }
+  }
+  return spells;
+};
+
+export { findChampion, findItems, findSpells };

index.js

@@ -1,4 +1,4 @@
-'use strict'
-const pkg = require('./package.json')
+'use strict';
+const pkg = require('./package.json');
 
-module.exports = pkg
+module.exports = pkg;

server/api.js

@@ -6,16 +6,16 @@ process.env.LEAGUE_API_PLATFORM_ID = 'na1';
 const LeagueJs = require('leaguejs');
 const leagueJs = new LeagueJs(process.env.LEAGUE_API_KEY);
 const parseData = require('./parse');
-const DataDragonHelper = require('leaguejs/lib/DataDragon/DataDragonHelper');
-DataDragonHelper.storageRoot = [__dirname, '..', 'public/cdn'];
+// const DataDragonHelper = require('leaguejs/lib/DataDragon/DataDragonHelper');
+// DataDragonHelper.storageRoot = [__dirname, '..', 'public/cdn'];
 
-DataDragonHelper.gettingItemList();
+// DataDragonHelper.gettingItemList();
 
 api.get('/summoner/:name', (req, res, next) => {
   const name = req.params.name;
   const options = {
       beginIndex: 0,
-      endIndex: 2
+      endIndex: 5
   };
   leagueJs.Summoner
     .gettingByName(name)