From 103656f094e7d5d3f5472047530396268163b77a Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Tue, 20 Aug 2019 00:08:13 +0200
Subject: [PATCH] =?UTF-8?q?Start=20RecentActivity=20component=20?=
 =?UTF-8?q?=F0=9F=A4=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/RecentActivity.vue |  57 ++++++++++++
 client/src/views/Summoner.vue            | 109 +++++++++++++----------
 server/server.js                         |  12 +--
 3 files changed, 126 insertions(+), 52 deletions(-)
 create mode 100644 client/src/components/RecentActivity.vue

diff --git a/client/src/components/RecentActivity.vue b/client/src/components/RecentActivity.vue
new file mode 100644
index 0000000..0a6d29c
--- /dev/null
+++ b/client/src/components/RecentActivity.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h4 class="font-bold text-lg">Recent Activity</h4>
+    <ul>
+      <li
+        v-for="(day) in matchesPerDay"
+        :key="day.timestamp"
+      >{{ day.date + ' : ' + day.matches + ' game(s)' }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    matches: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      matchesPerDay: []
+    }
+  },
+
+  created () {
+    console.log('activity')
+
+    for (const key in this.matches) {
+      const match = this.matches[key]
+      const matchTime = new Date(match.timestamp)
+
+      const options = {
+        year: "numeric",
+        month: "2-digit",
+        day: "numeric"
+      };
+      const formattedTime = matchTime.toLocaleString('fr', options)
+      // const formattedTime = matchTime.getDate() + '/' + (matchTime.getMonth() + 1) + '/' + matchTime.getFullYear()
+
+      const day = this.matchesPerDay.filter(e => e.date === formattedTime)
+      if (day.length > 0) {
+        day[0].matches++
+      } else {
+        this.matchesPerDay.push({
+          date: formattedTime,
+          matches: 1
+        })
+      }
+    }
+    
+    this.matchesPerDay = this.matchesPerDay.reverse()
+  },
+}
+</script>
\ No newline at end of file
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 5003d34..04eb4ef 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -4,61 +4,72 @@
 
     <header class="search mb-4 bg-teal-900 text-teal-100">
       <div class="container mx-auto flex justify-between py-8">
+        <router-link
+          to="/"
+          class="flex items-center text-lg text-teal-100 mr-8 hover:text-teal-200"
+        >Accueil</router-link>
 
-        <router-link to="/" class="flex items-center text-lg text-teal-100 mr-8 hover:text-teal-200">Accueil</router-link>
-
-        <SearchForm @formSubmit="redirect"/>
+        <SearchForm @formSubmit="redirect" />
 
         <button
           v-if="summonerFound"
-          id="refresh" 
+          id="refresh"
           class="input btn w-20 rounded-lg ml-2 relative"
           :disabled="loading"
           @click="apiCall"
         >
-          <v-icon name="sync" class="absolute vertical-center horizontal-center"/>
+          <v-icon name="sync" class="absolute vertical-center horizontal-center" />
         </button>
-
- 
-
       </div>
     </header>
-   
+
     <template v-if="summonerFound && !loading">
       <div class="container mx-auto pb-16">
         <div class="player bg-blue-100">
-          <div class="player__pp" :style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${localInfos.profileIconId}.png) center/cover`}"></div>
+          <div
+            class="player__pp"
+            :style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${localInfos.profileIconId}.png) center/cover`}"
+          ></div>
           <h1 class="player__name">{{ localInfos.name }}</h1>
           <h3 class="player__level">{{ localInfos.level }}</h3>
           <h3 class="player__rank">{{ localInfos.rank }}</h3>
-          <div class="player__rank-img" :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"></div>
-          <h3 class="player__ratio">{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
+          <div
+            class="player__rank-img"
+            :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"
+          ></div>
+          <h3
+            class="player__ratio"
+          >{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
+
+          <RecentActivity :matches="localInfos.allMatches"></RecentActivity>
 
           <ul class="list-matches--debug">
             <Match
-              v-for="(match, index) in localInfos.matches" :key="index"
+              v-for="(match, index) in localInfos.matches"
+              :key="index"
               :data="localInfos.matches[index]"
             />
           </ul>
-
         </div>
       </div>
     </template>
     <template v-else-if="loading">
-      <div class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl">
-        <dot-loader :loading="loading"></dot-loader>   
+      <div
+        class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl"
+      >
+        <dot-loader :loading="loading"></dot-loader>
       </div>
     </template>
     <template v-else>
       <p>Le joueur est introuvable.</p>
     </template>
-
   </div>
 </template>
 
 <script>
 // import itemsJSON from '@/data/item.json'
 import summonersJSON from '@/data/summoner.json'
+import RecentActivity from '@/components/RecentActivity.vue';
 import Match from '@/components/Match.vue';
 import SearchForm from '@/components/SearchForm.vue';
 import { maps, gameModes } from "@/data/data.js";
@@ -67,39 +78,40 @@ import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
 export default {
   components: {
     Match,
+    RecentActivity,
     SearchForm
   },
-  data() {
+  data () {
     return {
       championsInfos: [],
       localInfos: {},
-      summonerFound: true,
+      summonerFound: false,
       loading: false,
       regionsList: {
-        'br':	'br1',
-        'eune':	'eun1',	
-        'euw':	'euw1',
+        'br': 'br1',
+        'eune': 'eun1',
+        'euw': 'euw1',
         'jp': 'jp1',
         'kr': 'kr',
         'lan': 'la1',
-        'las':	'la2',
+        'las': 'la2',
         'na': 'na1',
-        'oce':	'oc1',
+        'oce': 'oc1',
         'tr': 'tr1',
         'ru': 'ru'
       }
     };
   },
   computed: {
-    summoner() {
+    summoner () {
       return this.$route.params.name
     },
-    region() {
+    region () {
       return this.$route.params.region
     }
   },
   methods: {
-    apiCall() {
+    apiCall () {
       console.log(this.$patch)
       const summoner = this.summoner;
       const region = this.regionsList[this.region];
@@ -116,15 +128,15 @@ export default {
         }
       })
         .then(response => {
-          this.loading = false;
           return response.data;
         })
         .then(jsonData => {
-          if(jsonData) {
+          if (jsonData) {
             this.summonerFound = true
             this.createObject(jsonData)
           } else {
             this.summonerFound = false
+            this.loading = false;
             console.log('Summoner not found')
           }
         })
@@ -133,7 +145,7 @@ export default {
           console.log(err);
         });
     },
-    checkLocalStorage() {
+    checkLocalStorage () {
       if (localStorage[`${this.summoner}:${this.region}`]) {
         console.log('cached')
         this.summonerFound = true
@@ -142,7 +154,7 @@ export default {
         this.apiCall()
       }
     },
-    createObject(JSONData) {
+    createObject (JSONData) {
       console.time('frontend')
       console.log('--- ALL INFOS ---')
       console.log(JSONData);
@@ -150,7 +162,7 @@ export default {
       const userStats = JSONData[0];
       const rankedStats = JSONData[1];
       const soloQStats = rankedStats !== null ? (rankedStats.queueType == 'RANKED_SOLO_5x5' ? rankedStats : JSONData[2]) : false;
-      const matches = JSONData[3].matches;
+      const matches = JSONData[3];
 
       const matchesInfos = [];
       // Loop on all matches
@@ -210,8 +222,9 @@ export default {
       } // end loop matches
       console.log(matchesInfos);
 
-      this.localInfos =  {
+      this.localInfos = {
         accountId: userStats.accountId,
+        allMatches: JSONData[4].matches,
         matches: matchesInfos,
         profileIconId: userStats.profileIconId,
         name: userStats.name,
@@ -227,44 +240,46 @@ export default {
 
       localStorage[`${this.summoner}:${this.region}`] = JSON.stringify(this.localInfos);
       console.timeEnd('frontend')
+      this.loading = false;
+
     },
-    getData() {
+    getData () {
       console.log('API CALL FOR CHAMPIONS')
       this.axios({
         method: 'GET',
         url: `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/data/en_US/champion.json`
       })
-      .then(response => {
-        return response.data
-      })
-      .then(jsonData => {
-        console.log('here')
-        this.championsInfos = jsonData.data
-      })
+        .then(response => {
+          return response.data
+        })
+        .then(jsonData => {
+          console.log('here')
+          this.championsInfos = jsonData.data
+        })
     },
-    getItemLink(id) {
+    getItemLink (id) {
       return `url('https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`;
     },
-    getSummonerLink(id) {
+    getSummonerLink (id) {
       const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
       return `https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/spell/${spellName}.png`;
     },
-    redirect(summoner, region) {
+    redirect (summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
-    resetLocalStorage() {
+    resetLocalStorage () {
       console.log('CLEAR LOCALSTORAGE')
       localStorage.clear()
     }
   },
-  created: function() {
+  created: function () {
     this.getData()
   },
   mounted: function () {
     this.checkLocalStorage()
   },
   watch: {
-    $route() {
+    $route () {
       console.log('route changed')
       this.checkLocalStorage()
     }
diff --git a/server/server.js b/server/server.js
index 691d7e4..6baa1ab 100644
--- a/server/server.js
+++ b/server/server.js
@@ -108,14 +108,15 @@ const getRanked = function (res) {
   })
 }
 
-// Get 10 matches of an accountID
+// Get 100 matches basic infos and 10 matches details of an accountID
 const getMatches = function (res) {
   console.time('getMatches');
 
-  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) {
+  request(`https://${data.region}.api.riotgames.com/lol/match/v4/matchlists/by-account/${data.accountID}?endIndex=100&api_key=${data.key}`, function (error, response, body) {
     if (!error && response.statusCode == 200) {
-      data.JSONMatches = JSON.parse(body);
-      const matchsId = data.JSONMatches.matches.map(x => x.gameId)
+      const allMatches = JSON.parse(body)
+      data.JSONMatches = allMatches.matches.slice(0, 10)
+      const matchsId = data.JSONMatches.map(x => x.gameId)
 
       Promise.map(matchsId, function (id) {
         return getMatch('match/v4/matches/' + id);
@@ -123,6 +124,7 @@ const getMatches = function (res) {
         console.timeEnd('getMatches');
         console.log('Finished - Data sent to front');
         data.finalJSON.push(data.JSONMatches)
+        data.finalJSON.push(allMatches)
         res.send(data.finalJSON);
         console.timeEnd('all')
       }).catch(err => {
@@ -137,6 +139,6 @@ const getMatches = function (res) {
 const getMatch = async function (urlApi) {
   //console.log(urlApi);
   return rp({ url: `https://${data.region}.api.riotgames.com/lol/${urlApi}?api_key=${data.key}`, json: true }).then(function (obj) {
-    data.JSONMatches.matches = data.JSONMatches.matches.map((match) => match.gameId === obj.gameId ? obj : match);
+    data.JSONMatches = data.JSONMatches.map((match) => match.gameId === obj.gameId ? obj : match);
   });
 }