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: clear timelines only if load user not viewed previously

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

(limited to 'src/components/user_profile/user_profile.js')

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 () {
-- 
cgit v1.2.3-70-g09d2


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: reset error state when load new profile

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

(limited to 'src/components/user_profile/user_profile.js')

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)
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components/user_profile/user_profile.js')

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"
-- 
cgit v1.2.3-70-g09d2