feat: add search dropdown with favorites and recent searches

client/src/App.vue

@@ -32,6 +32,8 @@ export default {
   created() {
     this.updatePercent()
     this.updateSettings({name: 'region'})
+    this.updateSettings({name: 'recent_searches', isJson: true})
+    this.updateSettings({name: 'favorites', isJson: true})
   },
 
   methods: {

client/src/components/SVGContainer.vue

@@ -3,6 +3,7 @@
     <symbol id="caret-down" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" /></symbol>
     <symbol id="caret-up" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></symbol>
     <symbol id="chevron-down" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></symbol>
+    <symbol id="close" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></symbol>
     <symbol id="layers" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></symbol>
     <symbol id="people" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /> <circle cx="9" cy="7" r="4" /> <path d="M23 21v-2a4 4 0 0 0-3-3.87" /> <path d="M16 3.13a4 4 0 0 1 0 7.75" /> </symbol>
     <symbol id="graph" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="20" x2="18" y2="10" /> <line x1="12" y1="20" x2="12" y2="4" /> <line x1="6" y1="20" x2="6" y2="14" /> </symbol>
@@ -19,6 +20,8 @@
     <symbol id="rank-grandmaster" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M57.1993 25.3498C49.9397 16.5776 44.0033 10 44.0033 10s-5.9364 6.5776-13.196 15.3498c3.676-2.7507 8.2463-4.3828 13.196-4.3828 4.9498 0 9.52 1.6321 13.196 4.3828zm.0033.0033L88 10c0 15.3564-2.201 30.7096-2.201 30.7096L66 48.6066l17.598 3.07s-5.5008 12.066-23.0988 20.8383l-7.6985-8.7756c0 .0888-.0363.3159-.0891.6581-.3663 2.3098-1.5477 9.7758 2.2901 13.6026h-22c3.8443-3.8334 2.6497-11.3388 2.2867-13.6224-.0528-.329-.0891-.5528-.0891-.635-1.0229 1.2438-7.6985 8.7755-7.6985 8.7755C9.9028 63.7426 4.40198 51.6799 4.40198 51.6799L22 48.6099l-19.79901-7.897S0 25.3564 0 10.0033l30.7974 15.3531C25.4549 29.3576 22 35.7311 22 42.9076c0 8.792 5.1873 16.3764 12.678 19.8742 2.8312 1.3227 5.9892 2.0598 9.322 2.0598 12.15 0 22-9.822 22-21.9373 0-7.1764-3.4549-13.5467-8.7974-17.5512z" fill="#756572" /><path d="M43.5 56C50.4031 56 56 50.4031 56 43.5S50.4031 31 43.5 31 31 36.5969 31 43.5 36.5969 56 43.5 56z" fill="#CD4545" /></symbol>
     <symbol id="rank-challenger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M56 24C49.1233 15.4277 43.5 9 43.5 9S37.8767 15.4277 31 24c3.4821-2.6881 7.8113-4.283 12.5-4.283S52.5179 21.3119 56 24z" fill="#F4C874" /><path d="M56.6025 23.8464L86 9c0 14.8495-2.1009 29.6959-2.1009 29.6959L65 46.3323l16.7981 2.9686s-7.3486 11.6677-22.0489 22.2727l-7.3486-10.605C52.4006 68.0036 46.1009 79 44 79c-2.1009 0-8.4006-11.0186-8.4006-18.0314-.9765 1.2028-7.3486 10.605-7.3486 10.605C13.5505 60.9686 6.20189 49.3009 6.20189 49.3009L23 46.3323 4.10095 38.6959S2 23.8464 2 9l29.3975 14.8464C26.2979 27.7155 23 33.8786 23 40.8182c0 8.5018 4.9516 15.8359 12.1017 19.2182 2.7026 1.2791 5.717 1.9918 8.8983 1.9918 11.5977 0 21-9.4977 21-21.2132 0-6.9395-3.2979-13.0995-8.3975-16.9718v.0032z" fill="#F4C874" /><path d="M44.5 54C51.4031 54 57 48.4031 57 41.5S51.4031 29 44.5 29 32 34.5969 32 41.5 37.5969 54 44.5 54z" fill="#3FBFDD" /></symbol>
     <symbol id="search" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" /></symbol>
+    <symbol id="star" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></symbol>
     <symbol id="time" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></symbol>
+    <symbol id="times" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></symbol>
   </svg>
 </template>

client/src/components/SearchForm.vue

@@ -3,11 +3,24 @@
     <div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
     <div class="relative w-full">
       <input
+        ref="input"
         v-model="summoner"
+        @focus="selected = true"
         type="text"
         :class="[inputClasses]"
         class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
       />
+      <transition
+        enter-active-class="transition-all transition-fastest ease-out-quad"
+        leave-active-class="transition-all transition-faster ease-in-quad"
+        enter-class="opacity-0 scale-90"
+        enter-to-class="opacity-100 scale-100"
+        leave-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-90"
+      >
+        <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
+      </transition>
+
       <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12">
         <div
           @click="dropdown = !dropdown"
@@ -55,6 +68,7 @@
         </div>
       </transition>
       <button
+        ref="submit"
         :class="[btnClasses]"
         class="absolute right-0 z-30 h-full hover:text-teal-200"
         type="submit"
@@ -69,14 +83,20 @@
 
 <script>
 import { mapActions, mapState } from 'vuex'
+import SearchFormDropdown from '@/components/SearchFormDropdown.vue'
 
 export default {
+  components: {
+    SearchFormDropdown,
+  },
+
   props: {
     size: {
       type: String,
       default: 'xl'
     }
   },
+
   data() {
     return {
       summoner: '',
@@ -94,8 +114,11 @@ export default {
         'TR',
         'RU'
       ],
+      clickDropdown: false,
+      selected: false,
     }
   },
+
   computed: {
     btnClasses() {
       return {
@@ -105,7 +128,7 @@ export default {
     },
     formClasses() {
       return {
-        'max-w-md': this.size === 'small',
+        'max-w-lg': this.size === 'small',
       }
     },
     inputClasses() {
@@ -126,6 +149,17 @@ export default {
       selectedRegion: state => state.settings.region
     }),
   },
+
+  mounted() {
+    window.addEventListener('mousedown', this.globalClick)
+    window.addEventListener('blur', this.windowBlur)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('mousedown', this.globalClick)
+    window.removeEventListener('blur', this.windowBlur)
+  },
+
   methods: {
     classRegions(index) {
       return {
@@ -138,6 +172,16 @@ export default {
         this.$emit('formSubmit', search, this.selectedRegion)
       }
     },
+    globalClick(e) {
+      if (e.target === this.$refs.input || e.target === this.$refs.submit) return
+      if (!this.clickDropdown) {
+        this.selected = false
+      }
+      this.clickDropdown = false
+    },
+    windowBlur() {
+      this.selected = false
+    },
     ...mapActions('settings', ['updateSettings']),
   }
 }

client/src/components/SearchFormDropdown.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    @mousedown="clickDropdown"
+    class="mt-1 absolute z-30 w-full px-3 py-2 bg-blue-900 rounded-lg shadow"
+  >
+    <div v-if="favorites.length">
+      <div class="text-base text-blue-100">favorites:</div>
+      <div class="-mx-1 flex items-center flex-wrap text-xs leading-none">
+        <SearchFormDropdownPlayer
+          v-for="player in favorites"
+          :key="player.name"
+          :player="player"
+          :favorite="true"
+          :favorites-list="true"
+        />
+      </div>
+    </div>
+    <div :class="{'mt-2': favorites.length}">
+      <div class="text-base text-blue-100">recent searches:</div>
+      <div class="-mx-1 flex items-center flex-wrap text-xs leading-none">
+        <template v-if="recentSearches.length">
+          <SearchFormDropdownPlayer
+            v-for="player in recentSearches"
+            :key="player.name"
+            :player="player"
+            :favorite="isFavorite(player.name)"
+          />
+        </template>
+        <template v-else>
+          <svg class="ml-4 mt-1 w-4 h-4 text-blue-200">
+            <use xlink:href="#info" />
+          </svg>
+          <div class="ml-1 mt-1 text-sm text-blue-200">Example :</div>
+          <SearchFormDropdownPlayer
+            :player="{name: 'Alderiate', icon: 1150, region: 'euw'}"
+            :favorite="false"
+            class="ml-2"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SearchFormDropdownPlayer from '@/components/SearchFormDropdownPlayer.vue'
+
+export default {
+  components: {
+    SearchFormDropdownPlayer,
+  },
+
+  computed: {
+    ...mapState('settings', ['favorites', 'recentSearches'])
+  },
+
+  methods: {
+    clickDropdown() {
+      this.$emit('click-dropdown')
+    },
+    isFavorite(name) {
+      return this.favorites.some(s => s.name === name)
+    }
+  }
+}
+</script>

client/src/components/SearchFormDropdownPlayer.vue

@@ -0,0 +1,62 @@
+<template>
+  <router-link
+    :to="{ name: 'summoner', params: { region: player.region, name: player.name }}"
+    :title="player.name"
+    class="mt-1 ml-1 flex items-center bg-blue-1000 p-1 text-blue-200 hover:bg-blue-800 cursor-pointer select-none"
+  >
+    <div class="bg-blue-800 p-1 text-xxs text-white font-bold uppercase rounded">{{ player.region }}</div>
+    <div
+      :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/${player.icon}.jpg')`}"
+      class="ml-1 w-5 h-5 bg-center bg-cover rounded"
+    ></div>
+    <div class="ml-1 max-w-12 truncate">{{ player.name }}</div>
+    <svg
+      @click.prevent="favoriteClick"
+      :class="favorite ? 'text-yellow-400' : 'hover:text-yellow-400 cursor-pointer'"
+      class="ml-2 w-3p5 h-3p5"
+    >
+      <use xlink:href="#star" />
+    </svg>
+    <svg @click.prevent="closeClick" class="ml-2 w-3p5 h-3p5 hover:text-white cursor-pointer">
+      <use xlink:href="#times" />
+    </svg>
+  </router-link>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  props: {
+    favorite: {
+      type: Boolean,
+      default: false,
+    },
+    favoritesList: {
+      type: Boolean,
+      default: false,
+    },
+    player: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    closeClick() {
+      if (this.favoritesList) {
+        this.updateFavorite(this.player)
+        return
+      }
+      this.removeRecentSearch(this.player)
+    },
+    favoriteClick() {
+      if (this.favorite) {
+        return
+      }
+      this.updateFavorite(this.player)
+    },
+    ...mapActions('settings', ['removeRecentSearch', 'updateFavorite'])
+  },
+}
+</script>

client/src/layouts/Default.vue

@@ -37,6 +37,12 @@
                   <div class="playing-dot bg-teal-flashy w-2 h-2 rounded-full"></div>
                   <span class="ml-2 text-teal-flashy font-semibold text-sm">In Game</span>
                 </div>
+                <div v-if="false" class="ml-4 mt-2 inline-flex items-center px-2 py-1 border border-teal-500 rounded leading-tight" style="background: rgba(40, 94, 97, 0.35);">
+                  <svg class="w-4 h-4 text-teal-600">
+                    <use xlink:href="#star" />
+                  </svg>
+                  <div class="ml-1 text-xs text-teal-200 font-bold">Favorite</div>
+                </div>
               </div>
               <div class="flex">
                 <div :class="{'playing': playing}" class="relative w-24 h-24">

client/src/store/modules/settings.js

@@ -1,21 +1,80 @@
 export const namespaced = true
 
 export const state = {
+  favorites: [],
   percent: false,
+  recentSearches: [],
   region: 'euw',
 }
 
 export const mutations = {
+  ADD_FAVORITE(state, summoner) {
+    state.favorites.push(summoner)
+  },
+  ADD_SEARCH(state, summoner) {
+    let searches = state.recentSearches
+
+    const alreadySearch = searches.find(s => s.name === summoner.name)
+    if (alreadySearch) {
+      alreadySearch.date = Date.now()
+      searches.sort((a, b) => b.date - a.date)
+      return
+    }
+
+    if (searches.length >= 6) {
+      searches.pop()
+    }
+
+    summoner.date = Date.now()
+    searches.unshift(summoner)
+  },
+  REMOVE_FAVORITE(state, summonerName) {
+    state.favorites = state.favorites.filter(s => s.name !== summonerName)
+  },
+  REMOVE_SEARCH(state, summonerName) {
+    state.recentSearches = state.recentSearches.filter(s => s.name !== summonerName)
+  },
+  UPDATE_FAVORITES(state, favorites) {
+    state.favorites = favorites
+  },
   UPDATE_PERCENT(state, percent) {
     state.percent = percent
   },
+  UPDATE_RECENT_SEARCHES(state, recentSearches) {
+    state.recentSearches = recentSearches
+  },
   UPDATE_REGION(state, region) {
     state.region = region
-  }
+  },
 }
 
 export const actions = {
-  async updatePercent({ commit }, percent) {
+  addRecentSearch({ commit, dispatch, state }, summoner) {
+    commit('ADD_SEARCH', summoner)
+    dispatch('updateSettings', { name: 'recent_searches', value: state.recentSearches, isJson: true })
+  },
+  removeRecentSearch({ commit, dispatch }, summoner) {
+    commit('REMOVE_SEARCH', summoner.name)
+    dispatch('updateSettings', { name: 'recent_searches', value: state.recentSearches, isJson: true })
+  },
+  updateFavorite({ commit, dispatch, state }, summoner) {
+    const alreadyFav = state.favorites.find(s => s.name === summoner.name)
+    if (alreadyFav) {
+      commit('REMOVE_FAVORITE', summoner.name)
+    } else {
+      if (state.favorites.length >= 6) {
+        // Display error message
+        return dispatch('notification/add', {
+          type: 'error',
+          message: 'Too many favorite summoners.'
+        }, { root: true })
+      }
+      commit('ADD_FAVORITE', summoner)
+    }
+
+    dispatch('updateSettings', { name: 'favorites', value: state.favorites, isJson: true })
+  },
+  updatePercent({ commit }, percent) {
     if (typeof (percent) !== 'boolean') {
       percent = localStorage.getItem('settings-percent') === 'true'
     } else {
@@ -23,12 +82,13 @@ export const actions = {
     }
     commit('UPDATE_PERCENT', percent)
   },
-  async updateSettings({ commit }, { name, value }) {
+  updateSettings({ commit }, { name, value, isJson = false }) {
     if (!value) {
       value = localStorage.getItem(name)
+      value = isJson ? JSON.parse(value) : value
       if (!value) return
     } else {
-      localStorage.setItem(name, value)
+      localStorage.setItem(name, isJson ? JSON.stringify(value) : value)
     }
     commit(`UPDATE_${name.toUpperCase()}`, value)
   }

client/src/store/modules/summoner.js

@@ -107,15 +107,22 @@ export const mutations = {
 
 export const actions = {
   async basicRequest({ commit, dispatch, rootState }, { summoner, region }) {
-    region = rootState.regionsList[region]
+    const regionId = rootState.regionsList[region]
     commit('BASIC_REQUEST')
     try {
-      const resp = await axios(({ url: 'summoner-basic', data: { summoner, region }, method: 'POST' }))
+      const resp = await axios(({ url: 'summoner-basic', data: { summoner, region: regionId }, method: 'POST' }))
       if (resp.data) {
         console.log(`---SUMMONER INFOS ${resp.data.account.name}---`)
         console.log(resp.data)
         const infos = createBasicSummonerData(resp.data)
         commit('SUMMONER_FOUND', infos)
+
+        // Add summoner to recent searches
+        dispatch('settings/addRecentSearch', {
+          name: infos.account.name,
+          icon: infos.account.profileIconId,
+          region,
+        }, { root: true })
       } else {
         commit('SUMMONER_NOT_FOUND')
 

client/tailwind.config.js

@@ -137,6 +137,7 @@ module.exports = {
       '1': '0.25rem',
       '2': '0.5rem',
       '3': '0.75rem',
+      '3p5': '0.875rem',
       '4': '1rem',
       '4b': '1.15rem',
       '5': '1.25rem',
@@ -326,6 +327,7 @@ module.exports = {
       screen: '100vh',
     },
     maxWidth: {
+      '12': '3rem',
       xs: '20rem',
       sm: '24rem',
       md: '28rem',