From 2e0603bdcaab4543bec9cb8d37256aa754548f6e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 9 Aug 2019 16:47:11 -0400
Subject: [PATCH 1/9] clear timelines only if load user not viewed previously

---
 src/components/user_profile/user_profile.js | 59 +++++++++++----------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 39b99dac..b8a165c4 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -30,13 +30,11 @@ const UserProfile = {
     }
   },
   created () {
-    // Make sure that timelines used in this page are empty
-    this.cleanUp()
     const routeParams = this.$route.params
     this.load(routeParams.name || routeParams.id)
   },
   destroyed () {
-    this.cleanUp()
+    this.stopFetching()
   },
   computed: {
     timeline () {
@@ -67,17 +65,35 @@ const UserProfile = {
   },
   methods: {
     load (userNameOrId) {
+      const startFetchingTimeline = (timeline, userId) => {
+        // Clear timeline only if load another user's profile
+        if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
+          this.$store.commit('clearTimeline', { timeline })
+        }
+        this.$store.dispatch('startFetchingTimeline', { timeline, userId })
+      }
+
+      const loadById = (userId) => {
+        this.userId = userId
+        startFetchingTimeline('user', userId)
+        startFetchingTimeline('media', userId)
+        if (this.isUs) {
+          startFetchingTimeline('favorites', userId)
+        }
+        // Fetch all pinned statuses immediately
+        this.$store.dispatch('fetchPinnedStatuses', userId)
+      }
+
+      // Reset view
+      this.userId = null
+
       // Check if user data is already loaded in store
       const user = this.$store.getters.findUser(userNameOrId)
       if (user) {
-        this.userId = user.id
-        this.fetchTimelines()
+        loadById(user.id)
       } else {
         this.$store.dispatch('fetchUser', userNameOrId)
-          .then(({ id }) => {
-            this.userId = id
-            this.fetchTimelines()
-          })
+          .then(({ id }) => loadById(id))
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
             if (errorMessage === 'No user with such user_id') { // Known error
@@ -90,36 +106,25 @@ const UserProfile = {
           })
       }
     },
-    fetchTimelines () {
-      const userId = this.userId
-      this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId })
-      this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId })
-      if (this.isUs) {
-        this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId })
-      }
-      // Fetch all pinned statuses immediately
-      this.$store.dispatch('fetchPinnedStatuses', userId)
-    },
-    cleanUp () {
+    stopFetching () {
       this.$store.dispatch('stopFetching', 'user')
       this.$store.dispatch('stopFetching', 'favorites')
       this.$store.dispatch('stopFetching', 'media')
-      this.$store.commit('clearTimeline', { timeline: 'user' })
-      this.$store.commit('clearTimeline', { timeline: 'favorites' })
-      this.$store.commit('clearTimeline', { timeline: 'media' })
+    },
+    switchUser (userNameOrId) {
+      this.stopFetching()
+      this.load(userNameOrId)
     }
   },
   watch: {
     '$route.params.id': function (newVal) {
       if (newVal) {
-        this.cleanUp()
-        this.load(newVal)
+        this.switchUser(newVal)
       }
     },
     '$route.params.name': function (newVal) {
       if (newVal) {
-        this.cleanUp()
-        this.load(newVal)
+        this.switchUser(newVal)
       }
     },
     $route () {

From 539913673fc854facc9d1f28017434d367e1cd3d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 9 Aug 2019 16:50:49 -0400
Subject: [PATCH 2/9] reset error state when load new profile

---
 src/components/user_profile/user_profile.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index b8a165c4..1250d6f1 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -86,6 +86,7 @@ const UserProfile = {
 
       // Reset view
       this.userId = null
+      this.error = false
 
       // Check if user data is already loaded in store
       const user = this.$store.getters.findUser(userNameOrId)

From cd14566a34013e65b603a71208d058871e992956 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 9 Aug 2019 23:28:46 -0400
Subject: [PATCH 3/9] remove useless index param of onSwitch

---
 src/components/interactions/interactions.js | 2 +-
 src/components/search/search.js             | 2 +-
 src/components/tab_switcher/tab_switcher.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index d4e3cc17..90dbd76b 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -13,7 +13,7 @@ const Interactions = {
     }
   },
   methods: {
-    onModeSwitch (index, dataset) {
+    onModeSwitch (dataset) {
       this.filterMode = tabModeDict[dataset.filter]
     }
   },
diff --git a/src/components/search/search.js b/src/components/search/search.js
index b434e127..37940f34 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -75,7 +75,7 @@ const Search = {
       const length = this[tabName].length
       return length === 0 ? '' : ` (${length})`
     },
-    onResultTabSwitch (_index, dataset) {
+    onResultTabSwitch (dataset) {
       this.currenResultTab = dataset.filter
     },
     getActiveTab () {
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index a5fe019c..ff99e3e7 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -20,7 +20,7 @@ export default Vue.component('tab-switcher', {
     activateTab (index, dataset) {
       return () => {
         if (typeof this.onSwitch === 'function') {
-          this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
+          this.onSwitch.call(null, this.$slots.default[index].elm.dataset)
         }
         this.active = index
       }

From df3e80b7c3fc91cbd62764be467d1dfe28b4b299 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 9 Aug 2019 23:48:08 -0400
Subject: [PATCH 4/9] use key prop instead of dataset to identify active tab

---
 src/components/interactions/interactions.js  | 4 ++--
 src/components/interactions/interactions.vue | 9 +++------
 src/components/search/search.js              | 4 ++--
 src/components/search/search.vue             | 9 +++------
 src/components/tab_switcher/tab_switcher.js  | 2 +-
 5 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index 90dbd76b..1f8a9de9 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -13,8 +13,8 @@ const Interactions = {
     }
   },
   methods: {
-    onModeSwitch (dataset) {
-      this.filterMode = tabModeDict[dataset.filter]
+    onModeSwitch (key) {
+      this.filterMode = tabModeDict[key]
     }
   },
   components: {
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index d71c99d5..08cee343 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -10,18 +10,15 @@
       :on-switch="onModeSwitch"
     >
       <span
-        data-tab-dummy
-        data-filter="mentions"
+        key="mentions"
         :label="$t('nav.mentions')"
       />
       <span
-        data-tab-dummy
-        data-filter="likes+repeats"
+        key="likes+repeats"
         :label="$t('interactions.favs_repeats')"
       />
       <span
-        data-tab-dummy
-        data-filter="follows"
+        key="follows"
         :label="$t('interactions.follows')"
       />
     </tab-switcher>
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 37940f34..8e903052 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -75,8 +75,8 @@ const Search = {
       const length = this[tabName].length
       return length === 0 ? '' : ` (${length})`
     },
-    onResultTabSwitch (dataset) {
-      this.currenResultTab = dataset.filter
+    onResultTabSwitch (key) {
+      this.currenResultTab = key
     },
     getActiveTab () {
       if (this.visibleStatuses.length > 0) {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 4350e672..eb20973b 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -34,18 +34,15 @@
           :custom-active="currenResultTab"
         >
           <span
-            data-tab-dummy
-            data-filter="statuses"
+            key="statuses"
             :label="$t('user_card.statuses') + resultCount('visibleStatuses')"
           />
           <span
-            data-tab-dummy
-            data-filter="people"
+            key="people"
             :label="$t('search.people') + resultCount('users')"
           />
           <span
-            data-tab-dummy
-            data-filter="hashtags"
+            key="hashtags"
             :label="$t('search.hashtags') + resultCount('hashtags')"
           />
         </tab-switcher>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index ff99e3e7..b26040ff 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -20,7 +20,7 @@ export default Vue.component('tab-switcher', {
     activateTab (index, dataset) {
       return () => {
         if (typeof this.onSwitch === 'function') {
-          this.onSwitch.call(null, this.$slots.default[index].elm.dataset)
+          this.onSwitch.call(null, this.$slots.default[index].key)
         }
         this.active = index
       }

From 9dd9ba0205cde312f78c510188c98f2be5cf6b2c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 9 Aug 2019 23:48:33 -0400
Subject: [PATCH 5/9] remove unused param

---
 src/components/tab_switcher/tab_switcher.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index b26040ff..e0d4572c 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -17,7 +17,7 @@ export default Vue.component('tab-switcher', {
     }
   },
   methods: {
-    activateTab (index, dataset) {
+    activateTab (index) {
       return () => {
         if (typeof this.onSwitch === 'function') {
           this.onSwitch.call(null, this.$slots.default[index].key)

From eafd53f99429b6b0b314b9ae873f642a34167a6c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 10 Aug 2019 00:25:09 -0400
Subject: [PATCH 6/9] fix potential bug to render active tab in controlled way

---
 src/components/tab_switcher/tab_switcher.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index e0d4572c..816d61eb 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -71,7 +71,7 @@ export default Vue.component('tab-switcher', {
 
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
-      const active = index === this.active
+      const active = this.isActiveTab(index)
       if (this.renderOnlyFocused) {
         return active
           ? <div class="active">{slot}</div>

From 6e51774ccbc2628177b43126f089cfdc24acf713 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 10 Aug 2019 00:26:29 -0400
Subject: [PATCH 7/9] use better name of controlled prop

---
 src/components/search/search.vue            |  2 +-
 src/components/tab_switcher/tab_switcher.js | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index eb20973b..746bbaa2 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -31,7 +31,7 @@
         <tab-switcher
           ref="tabSwitcher"
           :on-switch="onResultTabSwitch"
-          :custom-active="currenResultTab"
+          :active-tab="currenResultTab"
         >
           <span
             key="statuses"
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 816d61eb..f11d96e6 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -4,7 +4,7 @@ import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
   name: 'TabSwitcher',
-  props: ['renderOnlyFocused', 'onSwitch', 'customActive'],
+  props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
   data () {
     return {
       active: this.$slots.default.findIndex(_ => _.tag)
@@ -26,12 +26,12 @@ export default Vue.component('tab-switcher', {
       }
     },
     isActiveTab (index) {
-      const customActiveIndex = this.$slots.default.findIndex(slot => {
-        const dataFilter = slot.data && slot.data.attrs && slot.data.attrs['data-filter']
-        return this.customActive && this.customActive === dataFilter
-      })
-
-      return customActiveIndex > -1 ? customActiveIndex === index : index === this.active
+      // In case of controlled component
+      if (this.activeTab) {
+        return this.$slots.default.findIndex(slot => this.activeTab === slot.key) === index
+      } else {
+        return this.active === index
+      }
     }
   },
   render (h) {
@@ -47,7 +47,7 @@ export default Vue.component('tab-switcher', {
         }
         if (slot.data.attrs.image) {
           return (
-            <div class={ classesWrapper.join(' ')}>
+            <div class={classesWrapper.join(' ')}>
               <button
                 disabled={slot.data.attrs.disabled}
                 onClick={this.activateTab(index)}
@@ -59,7 +59,7 @@ export default Vue.component('tab-switcher', {
           )
         }
         return (
-          <div class={ classesWrapper.join(' ')}>
+          <div class={classesWrapper.join(' ')}>
             <button
               disabled={slot.data.attrs.disabled}
               onClick={this.activateTab(index)}

From e8c22fbfa37afc0cc7466309f8a2d059d7ddd6c3 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 10 Aug 2019 14:48:05 -0400
Subject: [PATCH 8/9] refactor TabSwitcher

---
 src/components/tab_switcher/tab_switcher.js | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index f11d96e6..08d5d08f 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -10,6 +10,16 @@ export default Vue.component('tab-switcher', {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
+  computed: {
+    activeIndex () {
+      // In case of controlled component
+      if (this.activeTab) {
+        return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+      } else {
+        return this.active
+      }
+    }
+  },
   beforeUpdate () {
     const currentSlot = this.$slots.default[this.active]
     if (!currentSlot.tag) {
@@ -24,14 +34,6 @@ export default Vue.component('tab-switcher', {
         }
         this.active = index
       }
-    },
-    isActiveTab (index) {
-      // In case of controlled component
-      if (this.activeTab) {
-        return this.$slots.default.findIndex(slot => this.activeTab === slot.key) === index
-      } else {
-        return this.active === index
-      }
     }
   },
   render (h) {
@@ -41,7 +43,7 @@ export default Vue.component('tab-switcher', {
         const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
 
-        if (this.isActiveTab(index)) {
+        if (this.activeIndex === index) {
           classesTab.push('active')
           classesWrapper.push('active')
         }
@@ -71,7 +73,7 @@ export default Vue.component('tab-switcher', {
 
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
-      const active = this.isActiveTab(index)
+      const active = this.activeIndex === index
       if (this.renderOnlyFocused) {
         return active
           ? <div class="active">{slot}</div>

From 7dfcabb5433a5eb805bbda6ef87390c6ed2d5372 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 10 Aug 2019 14:49:37 -0400
Subject: [PATCH 9/9] sync profile tab state with location query

---
 src/components/user_profile/user_profile.js  | 14 ++++++++--
 src/components/user_profile/user_profile.vue | 29 ++++++++++++--------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 1250d6f1..00055707 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -22,16 +22,20 @@ const FriendList = withLoadMore({
   additionalPropNames: ['userId']
 })(List)
 
+const defaultTabKey = 'statuses'
+
 const UserProfile = {
   data () {
     return {
       error: false,
-      userId: null
+      userId: null,
+      tab: defaultTabKey
     }
   },
   created () {
     const routeParams = this.$route.params
     this.load(routeParams.name || routeParams.id)
+    this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   destroyed () {
     this.stopFetching()
@@ -115,6 +119,10 @@ const UserProfile = {
     switchUser (userNameOrId) {
       this.stopFetching()
       this.load(userNameOrId)
+    },
+    onTabSwitch (tab) {
+      this.tab = tab
+      this.$router.replace({ query: { tab } })
     }
   },
   watch: {
@@ -128,8 +136,8 @@ const UserProfile = {
         this.switchUser(newVal)
       }
     },
-    $route () {
-      this.$refs.tabSwitcher.activateTab(0)()
+    '$route.query': function (newVal) {
+      this.tab = newVal.tab || defaultTabKey
     }
   },
   components: {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index cffa28f1..42516916 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -12,22 +12,24 @@
         rounded="top"
       />
       <tab-switcher
-        ref="tabSwitcher"
+        :active-tab="tab"
         :render-only-focused="true"
+        :on-switch="onTabSwitch"
       >
-        <div :label="$t('user_card.statuses')">
-          <Timeline
-            :count="user.statuses_count"
-            :embedded="true"
-            :title="$t('user_profile.timeline_title')"
-            :timeline="timeline"
-            timeline-name="user"
-            :user-id="userId"
-            :pinned-status-ids="user.pinnedStatusIds"
-          />
-        </div>
+        <Timeline
+          key="statuses"
+          :label="$t('user_card.statuses')"
+          :count="user.statuses_count"
+          :embedded="true"
+          :title="$t('user_profile.timeline_title')"
+          :timeline="timeline"
+          timeline-name="user"
+          :user-id="userId"
+          :pinned-status-ids="user.pinnedStatusIds"
+        />
         <div
           v-if="followsTabVisible"
+          key="followees"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
@@ -42,6 +44,7 @@
         </div>
         <div
           v-if="followersTabVisible"
+          key="followers"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
@@ -58,6 +61,7 @@
           </FollowerList>
         </div>
         <Timeline
+          key="media"
           :label="$t('user_card.media')"
           :disabled="!media.visibleStatuses.length"
           :embedded="true"
@@ -68,6 +72,7 @@
         />
         <Timeline
           v-if="isUs"
+          key="favorites"
           :label="$t('user_card.favorites')"
           :disabled="!favorites.visibleStatuses.length"
           :embedded="true"