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
2019-08-17 08:12:21 +00:00 · 2019-08-17 08:12:21 +00:00 · e5fe4f420c
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -13,8 +13,8 @@ const Interactions = {
    }
  },
  methods: {
-    onModeSwitch (index, dataset) {
-      this.filterMode = tabModeDict[dataset.filter]
+    onModeSwitch (key) {
+      this.filterMode = tabModeDict[key]
    }
  },
  components: {
--- 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>
--- 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 (_index, dataset) {
-      this.currenResultTab = dataset.filter
+    onResultTabSwitch (key) {
+      this.currenResultTab = key
    },
    getActiveTab () {
      if (this.visibleStatuses.length > 0) {
--- a/src/components/search/search.vue
+++ b/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
-            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>
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/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,13 +43,13 @@ 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')
        }
        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 +61,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)}
@ -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>
--- a/src/components/user_profile/user_profile.js
+++ b/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
-        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,40 +111,33 @@ 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)
+    },
+    onTabSwitch (tab) {
+      this.tab = tab
+      this.$router.replace({ query: { tab } })
    }
  },
  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 () {
-      this.$refs.tabSwitcher.activateTab(0)()
+    '$route.query': function (newVal) {
+      this.tab = newVal.tab || defaultTabKey
    }
  },
  components: {
--- 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"