Merge branch '564' into 'develop'

Restore scroll position for user profile when navigate back and forward

Closes #636 and #564

See merge request pleroma/pleroma-fe!914

src/components/interactions/interactions.js

@@ -13,8 +13,8 @@ const Interactions = {
     }
   },
   methods: {
-    onModeSwitch (index, dataset) {
+    onModeSwitch (key) {
-      this.filterMode = tabModeDict[dataset.filter]
+      this.filterMode = tabModeDict[key]
     }
   },
   components: {

src/components/interactions/interactions.vue

@@ -10,18 +10,15 @@
       :on-switch="onModeSwitch"
     >
       <span
-        data-tab-dummy
+        key="mentions"
-        data-filter="mentions"
         :label="$t('nav.mentions')"
       />
       <span
-        data-tab-dummy
+        key="likes+repeats"
-        data-filter="likes+repeats"
         :label="$t('interactions.favs_repeats')"
       />
       <span
-        data-tab-dummy
+        key="follows"
-        data-filter="follows"
         :label="$t('interactions.follows')"
       />
     </tab-switcher>

src/components/search/search.js

@@ -75,8 +75,8 @@ const Search = {
       const length = this[tabName].length
       return length === 0 ? '' : ` (${length})`
     },
-    onResultTabSwitch (_index, dataset) {
+    onResultTabSwitch (key) {
-      this.currenResultTab = dataset.filter
+      this.currenResultTab = key
     },
     getActiveTab () {
       if (this.visibleStatuses.length > 0) {

src/components/search/search.vue

@@ -31,21 +31,18 @@
         <tab-switcher
           ref="tabSwitcher"
           :on-switch="onResultTabSwitch"
-          :custom-active="currenResultTab"
+          :active-tab="currenResultTab"
         >
           <span
-            data-tab-dummy
+            key="statuses"
-            data-filter="statuses"
             :label="$t('user_card.statuses') + resultCount('visibleStatuses')"
           />
           <span
-            data-tab-dummy
+            key="people"
-            data-filter="people"
             :label="$t('search.people') + resultCount('users')"
           />
           <span
-            data-tab-dummy
+            key="hashtags"
-            data-filter="hashtags"
             :label="$t('search.hashtags') + resultCount('hashtags')"
           />
         </tab-switcher>

src/components/tab_switcher/tab_switcher.js

@@ -4,12 +4,22 @@ 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)
     }
   },
+  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) {
@@ -17,21 +27,13 @@ export default Vue.component('tab-switcher', {
     }
   },
   methods: {
-    activateTab (index, dataset) {
+    activateTab (index) {
       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].key)
         }
         this.active = index
       }
-    },
-    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
     }
   },
   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 = index === this.active
+      const active = this.activeIndex === index
       if (this.renderOnlyFocused) {
         return active
           ? <div class="active">{slot}</div>

src/components/user_profile/user_profile.js

@@ -22,21 +22,23 @@ const FriendList = withLoadMore({
   additionalPropNames: ['userId']
 })(List)
 
+const defaultTabKey = 'statuses'
+
 const UserProfile = {
   data () {
     return {
       error: false,
-      userId: null
+      userId: null,
+      tab: defaultTabKey
     }
   },
   created () {
-    // Make sure that timelines used in this page are empty
-    this.cleanUp()
     const routeParams = this.$route.params
     this.load(routeParams.name || routeParams.id)
+    this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   destroyed () {
-    this.cleanUp()
+    this.stopFetching()
   },
   computed: {
     timeline () {
@@ -67,17 +69,36 @@ 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
+      this.error = false
+
       // Check if user data is already loaded in store
       const user = this.$store.getters.findUser(userNameOrId)
       if (user) {
-        this.userId = user.id
+        loadById(user.id)
-        this.fetchTimelines()
       } else {
         this.$store.dispatch('fetchUser', userNameOrId)
-          .then(({ id }) => {
+          .then(({ id }) => loadById(id))
-            this.userId = id
-            this.fetchTimelines()
-          })
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
             if (errorMessage === 'No user with such user_id') { // Known error
@@ -90,40 +111,33 @@ const UserProfile = {
           })
       }
     },
-    fetchTimelines () {
+    stopFetching () {
-      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 () {
       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' })
+    switchUser (userNameOrId) {
-      this.$store.commit('clearTimeline', { timeline: 'media' })
+      this.stopFetching()
+      this.load(userNameOrId)
+    },
+    onTabSwitch (tab) {
+      this.tab = tab
+      this.$router.replace({ query: { tab } })
     }
   },
   watch: {
     '$route.params.id': function (newVal) {
       if (newVal) {
-        this.cleanUp()
+        this.switchUser(newVal)
-        this.load(newVal)
       }
     },
     '$route.params.name': function (newVal) {
       if (newVal) {
-        this.cleanUp()
+        this.switchUser(newVal)
-        this.load(newVal)
       }
     },
-    $route () {
+    '$route.query': function (newVal) {
-      this.$refs.tabSwitcher.activateTab(0)()
+      this.tab = newVal.tab || defaultTabKey
     }
   },
   components: {

src/components/user_profile/user_profile.vue

@@ -12,11 +12,13 @@
         rounded="top"
       />
       <tab-switcher
-        ref="tabSwitcher"
+        :active-tab="tab"
         :render-only-focused="true"
+        :on-switch="onTabSwitch"
       >
-        <div :label="$t('user_card.statuses')">
         <Timeline
+          key="statuses"
+          :label="$t('user_card.statuses')"
           :count="user.statuses_count"
           :embedded="true"
           :title="$t('user_profile.timeline_title')"
@@ -25,9 +27,9 @@
           :user-id="userId"
           :pinned-status-ids="user.pinnedStatusIds"
         />
-        </div>
         <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"