Start RecentActivity component 🤯

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>

client/src/views/Summoner.vue

@@ -4,8 +4,10 @@
 
     <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" />
 
@@ -18,47 +20,56 @@
         >
           <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">
+      <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,13 +78,14 @@ import { timeDifference, secToTime, getRankImg } from "@/helpers/functions.js";
 export default {
   components: {
     Match,
+    RecentActivity,
     SearchForm
   },
   data () {
     return {
       championsInfos: [],
       localInfos: {},
-      summonerFound: true,
+      summonerFound: false,
       loading: false,
       regionsList: {
         'br': 'br1',
@@ -116,7 +128,6 @@ export default {
         }
       })
         .then(response => {
-          this.loading = false;
           return response.data;
         })
         .then(jsonData => {
@@ -125,6 +136,7 @@ export default {
             this.createObject(jsonData)
           } else {
             this.summonerFound = false
+            this.loading = false;
             console.log('Summoner not found')
           }
         })
@@ -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
@@ -212,6 +224,7 @@ export default {
 
       this.localInfos = {
         accountId: userStats.accountId,
+        allMatches: JSONData[4].matches,
         matches: matchesInfos,
         profileIconId: userStats.profileIconId,
         name: userStats.name,
@@ -227,6 +240,8 @@ export default {
 
       localStorage[`${this.summoner}:${this.region}`] = JSON.stringify(this.localInfos);
       console.timeEnd('frontend')
+      this.loading = false;
+
     },
     getData () {
       console.log('API CALL FOR CHAMPIONS')

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);
   });
 }