Starting regions list

client/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app" class="font-sans bg-gray-200">
     <div class="nav">
       <router-link to="/">Accueil</router-link> |
-      <router-link :to="`/summoner/${summoner}`">
+      <router-link :to="`/summoner/euw/${summoner}`">
           {{ linkText }}
       </router-link>
     </div>

client/src/router.js

@@ -16,7 +16,7 @@ export default new Router({
       component: Home
     },
     {
-      path: '/summoner/:name',
+      path: '/summoner/:region/:name',
       name: 'summoner',
       component: Summoner
     }

client/src/views/Home.vue

@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     redirect() {
-      this.$router.push("/summoner/" + this.search)
+      this.$router.push("/summoner/euw/" + this.search)
     }
   }
 };

client/src/views/Summoner.vue

@@ -1,12 +1,18 @@
 <template>
   <div>
-    <button class="debug" @click="this.resetLocalStorage"></button>
+    <button class="debug" @click="resetLocalStorage"></button>
 
     <div class="search mb-4">
       <div class="container mx-auto">
         <form @submit.prevent="redirect" class="flex items-center">
           <input type="text" placeholder="Entre un pseudo" class="bg-gray-300 p-2 rounded-l outline-none focus:bg-gray-400" v-model="search">
-          <button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit" :disabled="loading">Rechercher</button>
+          <button 
+            class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" 
+            type="submit" 
+            :disabled="loading"
+          >
+            Rechercher
+          </button>
           
           <button
             v-if="summonerFound"
@@ -23,7 +29,7 @@
    
     <template v-if="summonerFound && !loading">
       <div class="container mx-auto pb-16">
-        <div class="player bg-blue-100" v-if="localInfos.name">
+        <div class="player bg-blue-100">
           <div class="player__pp" :style="{background: `url(https://cdn.valentinkaelin.ch/riot/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div>
           <h1 class="player__name">{{ localInfos.name }}</h1>
           <h3 class="player__level">{{ localInfos.level }}</h3>
@@ -39,9 +45,6 @@
           </ul>
 
         </div>
-        <div v-else>
-          <p>Loading player's information...</p>
-        </div>
       </div>
     </template>
     <template v-else-if="loading">
@@ -70,20 +73,23 @@ export default {
   data() {
     return {
       localInfos: {},
-      nameChosen: this.$route.params.name,
       search: '',
       summonerFound: true,
       loading: false
     };
   },
+  computed: {
+    summoner() {
+      return this.$route.params.name
+    }
+  },
   methods: {
     apiCall() {
-      const summoner = this.$route.params.name;
+      const summoner = this.summoner;
       this.loading = true;
       this.axios({
         method: "POST",
-        // url: "https://vue.valentinkaelin.ch/api",
+        url: process.env.NODE_ENV === 'development' ? 'http://localhost:5000/api' : 'https://leaguestats.valentinkaelin.ch/api',
-        url: "http://localhost:5000/api",
         headers: {
           "Content-Type": "application/json"
         },
@@ -110,10 +116,10 @@ export default {
         });
     },
     checkLocalStorage() {
-      if (localStorage[this.$route.params.name]) {
+      if (localStorage[this.summoner]) {
         console.log('cached')
         this.summonerFound = true
-        this.localInfos = JSON.parse(localStorage[this.$route.params.name])
+        this.localInfos = JSON.parse(localStorage[this.summoner])
       } else {
         this.apiCall()
       }
@@ -194,12 +200,12 @@ export default {
         rankedLosses: soloQStats ? soloQStats.losses : undefined
       }
 
-      this.nameChosen = userStats.name;
+      //this.summoner = userStats.name;
 
       console.log('====== Saved infos ======');
       console.log(this.localInfos);
 
-      localStorage[this.nameChosen] = JSON.stringify(this.localInfos);
+      localStorage[this.summoner] = JSON.stringify(this.localInfos);
     },
     getItemLink(id) {
       if(id === 0) { 
@@ -213,7 +219,7 @@ export default {
       return `https://cdn.valentinkaelin.ch/riot/spells/${spellName}.png`;
     },
     redirect() {
-      this.$router.push("/summoner/" + this.search)
+      this.$router.push("/summoner/euw/" + this.search)
     },
     resetLocalStorage() {
       console.log('CLEAR LOCALSTORAGE')

server/package-lock.json

@@ -108,8 +108,7 @@
     "connect-history-api-fallback": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
-      "dev": true
     },
     "content-disposition": {
       "version": "0.5.2",
@@ -140,11 +139,35 @@
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dev": true,
       "requires": {
         "object-assign": "^4",
         "vary": "^1"
       }
     },
+    "cross-env": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
+      "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^6.0.5",
+        "is-windows": "^1.0.0"
+      }
+    },
+    "cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dev": true,
+      "requires": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -372,6 +395,18 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -456,6 +491,12 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -464,7 +505,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "on-finished": {
       "version": "2.3.0",
@@ -479,6 +521,12 @@
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
     },
+    "path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+      "dev": true
+    },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -585,6 +633,12 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "semver": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
+      "dev": true
+    },
     "send": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
@@ -621,6 +675,21 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
     },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+      "dev": true
+    },
     "sshpk": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz",
@@ -722,6 +791,15 @@
         "core-util-is": "1.0.2",
         "extsprintf": "^1.2.0"
       }
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
     }
   }
 }

server/package.json

@@ -4,20 +4,21 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "./node_modules/.bin/cross-env NODE_ENV=development nodemon server.js"
   },
   "author": "kalane",
   "license": "ISC",
   "dependencies": {
     "bluebird": "^3.5.3",
     "body-parser": "^1.18.3",
-    "cors": "^2.8.5",
     "dotenv": "^7.0.0",
     "express": "^4.16.4",
     "request": "^2.88.0",
-    "request-promise": "^4.2.2"
+    "request-promise": "^4.2.2",
+    "connect-history-api-fallback": "^1.6.0"
   },
   "devDependencies": {
-    "connect-history-api-fallback": "^1.6.0"
+    "cors": "^2.8.5",
+    "cross-env": "^5.2.0"
   }
 }

server/server.js

@@ -1,40 +1,45 @@
 require('dotenv').config()
 const express = require('express')
 const request = require('request');
-const path = require('path');
 const bodyParser = require('body-parser');
 const rp = require('request-promise');
 const Promise = require("bluebird");
 const app = express()
-const history = require('connect-history-api-fallback');
 
 /* Global Variables */
-const key = process.env.API_KEY;
+const data = {
-let summonerID;
+  key: process.env.API_KEY,
-let accountID;
+  region: 'euw1',
-let username;
+  summonerID: '',
-let JSONMatches;
+  accountID: '',
-let finalJSON = [];
+  username: '',
+  JSONMatches: [],
+  finalJSON: []
+}
 
 /* Set Port */
 app.set('port', (process.env.PORT || 5000))
 
-/* DEV */
+/* Setup env */
-var cors = require('cors');
+if(process.env.NODE_ENV === 'development') {   /* DEV */
+  const cors = require('cors');
   app.use(cors({origin: '*'}));
+} 
+else {   /* PRODUCTION */
+  const path = require('path');
+  const history = require('connect-history-api-fallback');
+  const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
+  app.use(staticFileMiddleware);
+  app.use(history({
+    disableDotRule: true,
+    verbose: true
+  }));
+  app.use(staticFileMiddleware);
 
-/* PRODUCTION */
+  app.get('/', function (req, res) {
-// const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
+    res.render(path.join(__dirname + '/dist/index.html'));
-// app.use(staticFileMiddleware);
+  });
-// app.use(history({
+}
-//   disableDotRule: true,
-//   verbose: true
-// }));
-// app.use(staticFileMiddleware);
-
-// app.get('/', function (req, res) {
-//   res.render(path.join(__dirname + '/dist/index.html'));
-// });
 
 /* To retrieve data of post request */
 app.use(bodyParser.json());    // to support JSON-encoded bodies
@@ -51,19 +56,19 @@ app.post('/api', function (req, res) {
   console.log(req.body.summoner);
   //console.log(req.body.playerName);
   console.time('all')
-  username = req.body.summoner;
+  data.username = req.body.summoner;
-  finalJSON = [];
+  data.finalJSON = [];
   getAccountInfos(res);
 });
 
 // Get account infos of an username
 const getAccountInfos = function (res) {
-  request('https://euw1.api.riotgames.com/lol/summoner/v4/summoners/by-name/' + encodeURIComponent(username) + '?api_key=' + key, function (error, response, body) {
+  request(`https://${data.region}.api.riotgames.com/lol/summoner/v4/summoners/by-name/${encodeURIComponent(data.username)}?api_key=${data.key}`, function (error, response, body) {
     if (!error && response.statusCode == 200) {
       let JSONBody = JSON.parse(body);
-      summonerID = JSONBody.id;
+      data.summonerID = JSONBody.id;
-      accountID = JSONBody.accountId;
+      data.accountID = JSONBody.accountId;
-      finalJSON.push(JSONBody)
+      data.finalJSON.push(JSONBody)
       getRanked(res);
     }
     else {
@@ -76,15 +81,15 @@ const getAccountInfos = function (res) {
 
 // Get data of rankeds stats
 const getRanked = function (res) {
-  request('https://euw1.api.riotgames.com/lol/league/v4/positions/by-summoner/' + summonerID + '?api_key=' + key, function (error, response, body) {
+  request(`https://${data.region}.api.riotgames.com/lol/league/v4/positions/by-summoner/${data.summonerID}?api_key=${data.key}`, function (error, response, body) {
     if (!error && response.statusCode == 200) {
       let JSONBody = JSON.parse(body);
       if (JSONBody.length > 0) {
-        finalJSON.push(...JSONBody);
+        data.finalJSON.push(...JSONBody);
-        if (JSONBody.length === 1) finalJSON.push(null);
+        if (JSONBody.length === 1) data.finalJSON.push(null);
       } else {
         console.log('empty rank stats')
-        finalJSON.push(null, null);
+        data.finalJSON.push(null, null);
       }
       getMatches(res);
     }
@@ -95,18 +100,18 @@ const getRanked = function (res) {
 const getMatches = function (res) {
   console.time('getMatches');
 
-  request('https://euw1.api.riotgames.com/lol/match/v4/matchlists/by-account/' + accountID + '?endIndex=10&api_key=' + key, function (error, response, body) {
+  request(`https://${data.region}.api.riotgames.com/lol/match/v4/matchlists/by-account/${data.accountID}?endIndex=10&api_key=${data.key}`, function (error, response, body) {
     if (!error && response.statusCode == 200) {
-      JSONMatches = JSON.parse(body);
+      data.JSONMatches = JSON.parse(body);
-      const matchsId = JSONMatches.matches.map(x => x.gameId)
+      const matchsId = data.JSONMatches.matches.map(x => x.gameId)
 
       Promise.map(matchsId, function (id) {
         return getMatch('match/v4/matches/' + id);
       }).then(() => {
         console.timeEnd('getMatches');
         console.log('Finished - Data sent to front');
-        finalJSON.push(JSONMatches)
+        data.finalJSON.push(data.JSONMatches)
-        res.send(finalJSON);
+        res.send(data.finalJSON);
         console.timeEnd('all')
       }).catch(err => {
         console.log('Error Promise');
@@ -119,7 +124,7 @@ const getMatches = function (res) {
 // Get data of one match
 const getMatch = async function (urlApi) {
   //console.log(urlApi);
-  return rp({ url: 'https://euw1.api.riotgames.com/lol/' + urlApi + '?api_key=' + key, json: true }).then(function (obj) {
+  return rp({ url: `https://${data.region}.api.riotgames.com/lol/${urlApi}?api_key=${data.key}`, json: true }).then(function (obj) {
-    JSONMatches.matches = JSONMatches.matches.map((match) => match.gameId === obj.gameId ? obj : match);
+    data.JSONMatches.matches = data.JSONMatches.matches.map((match) => match.gameId === obj.gameId ? obj : match);
   });
 }