From 6e219c2961ddd205d618f2775076c25f49c63ca2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 17 Jan 2019 22:25:50 +0300
Subject: [PATCH] add support for tab-switcher to automatically switch to first
 tab if asked index is invalid

---
 src/components/tab_switcher/tab_switcher.jsx | 45 +++++++++++++-------
 src/components/user_profile/user_profile.vue |  2 +-
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 2f362c4d..175ae777 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -1,23 +1,32 @@
 import Vue from 'vue'
 
+
 import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
   name: 'TabSwitcher',
   data () {
     return {
-      active: 0
+      active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
   methods: {
-    activateTab(index) {
-      return () => this.active = index;
+    activateTab (index) {
+      return () => {
+        this.active = index
+      }
     }
   },
-  render(h) {
+  beforeUpdate () {
+    const currentSlot = this.$slots.default[this.active]
+    if (!currentSlot.tag) {
+      this.active = this.$slots.default.findIndex(_ => _.tag)
+    }
+  },
+  render (h) {
     const tabs = this.$slots.default
-          .filter(slot => slot.data)
           .map((slot, index) => {
+            if (!slot.tag) return
             const classesTab = ['tab']
             const classesWrapper = ['tab-wrapper']
 
@@ -25,28 +34,32 @@ export default Vue.component('tab-switcher', {
               classesTab.push('active')
               classesWrapper.push('active')
             }
+
             return (
               <div class={ classesWrapper.join(' ')}>
-                <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+              <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
               </div>
             )
-          });
-    const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
+          })
+
+    const contents = this.$slots.default.map((slot, index) => {
+      if (!slot.tag) return
       const active = index === this.active
       return (
         <div class={active ? 'active' : 'hidden'}>
-          {slot}
+        {slot}
         </div>
       )
-    });
+    })
+
     return (
       <div class="tab-switcher">
-        <div class="tabs">
-          {tabs}
-        </div>
-        <div class="contents">
-          {contents}
-        </div>
+      <div class="tabs">
+      {tabs}
+      </div>
+      <div class="contents">
+      {contents}
+      </div>
       </div>
     )
   }
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index e53727ff..d64ce277 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -20,7 +20,7 @@
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
-      <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" :timeline="favorites"/>
+      <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" timeline-name="favorites" :timeline="favorites"/>
     </tab-switcher>
   </div>
   <div v-else class="panel user-profile-placeholder">