Merge branch '492' into 'develop'

Fix Follow/Mute/Block not functional issue in the user search page

Closes #492

See merge request pleroma/pleroma-fe!754
This commit is contained in:
HJ 2019-04-25 12:32:29 +00:00
commit e351f8630c
5 changed files with 60 additions and 58 deletions

View file

@ -10,8 +10,7 @@ const FollowCard = {
data () { data () {
return { return {
inProgress: false, inProgress: false,
requestSent: false, requestSent: false
updated: false
} }
}, },
components: { components: {
@ -19,10 +18,8 @@ const FollowCard = {
RemoteFollow RemoteFollow
}, },
computed: { computed: {
isMe () { return this.$store.state.users.currentUser.id === this.user.id }, isMe () {
following () { return this.updated ? this.updated.following : this.user.following }, return this.$store.state.users.currentUser.id === this.user.id
showFollow () {
return !this.following || this.updated && !this.updated.following
}, },
loggedIn () { loggedIn () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
@ -31,17 +28,15 @@ const FollowCard = {
methods: { methods: {
followUser () { followUser () {
this.inProgress = true this.inProgress = true
requestFollow(this.user, this.$store).then(({ sent, updated }) => { requestFollow(this.user, this.$store).then(({ sent }) => {
this.inProgress = false this.inProgress = false
this.requestSent = sent this.requestSent = sent
this.updated = updated
}) })
}, },
unfollowUser () { unfollowUser () {
this.inProgress = true this.inProgress = true
requestUnfollow(this.user, this.$store).then(({ updated }) => { requestUnfollow(this.user, this.$store).then(() => {
this.inProgress = false this.inProgress = false
this.updated = updated
}) })
} }
} }

View file

@ -4,11 +4,14 @@
<span class="faint" v-if="!noFollowsYou && user.follows_you"> <span class="faint" v-if="!noFollowsYou && user.follows_you">
{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span> </span>
<div class="follow-card-follow-button" v-if="showFollow && !loggedIn"> <template v-if="!loggedIn">
<div class="follow-card-follow-button" v-if="!user.following">
<RemoteFollow :user="user" /> <RemoteFollow :user="user" />
</div> </div>
</template>
<template v-else>
<button <button
v-if="showFollow && loggedIn" v-if="!user.following"
class="btn btn-default follow-card-follow-button" class="btn btn-default follow-card-follow-button"
@click="followUser" @click="followUser"
:disabled="inProgress" :disabled="inProgress"
@ -24,7 +27,7 @@
{{ $t('user_card.follow') }} {{ $t('user_card.follow') }}
</template> </template>
</button> </button>
<button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress"> <button v-else class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
<template v-if="inProgress"> <template v-if="inProgress">
{{ $t('user_card.follow_progress') }} {{ $t('user_card.follow_progress') }}
</template> </template>
@ -32,6 +35,7 @@
{{ $t('user_card.follow_unfollow') }} {{ $t('user_card.follow_unfollow') }}
</template> </template>
</button> </button>
</template>
</div> </div>
</basic-user-card> </basic-user-card>
</template> </template>

View file

@ -1,5 +1,6 @@
import FollowCard from '../follow_card/follow_card.vue' import FollowCard from '../follow_card/follow_card.vue'
import userSearchApi from '../../services/new_api/user_search.js' import map from 'lodash/map'
const userSearch = { const userSearch = {
components: { components: {
FollowCard FollowCard
@ -10,10 +11,15 @@ const userSearch = {
data () { data () {
return { return {
username: '', username: '',
users: [], userIds: [],
loading: false loading: false
} }
}, },
computed: {
users () {
return this.userIds.map(userId => this.$store.getters.findUser(userId))
}
},
mounted () { mounted () {
this.search(this.query) this.search(this.query)
}, },
@ -33,10 +39,10 @@ const userSearch = {
return return
} }
this.loading = true this.loading = true
userSearchApi.search({query, store: this.$store}) this.$store.dispatch('searchUsers', query)
.then((res) => { .then((res) => {
this.loading = false this.loading = false
this.users = res this.userIds = map(res, 'id')
}) })
} }
} }

View file

@ -1,4 +1,5 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import userSearchApi from '../services/new_api/user_search.js'
import { compact, map, each, merge, last, concat, uniq } from 'lodash' import { compact, map, each, merge, last, concat, uniq } from 'lodash'
import { set } from 'vue' import { set } from 'vue'
import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js' import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
@ -341,6 +342,14 @@ const users = {
store.commit('setUserForNotification', notification) store.commit('setUserForNotification', notification)
}) })
}, },
searchUsers (store, query) {
// TODO: Move userSearch api into api.service
return userSearchApi.search({query, store: { state: store.rootState }})
.then((users) => {
store.commit('addNewUsers', users)
return users
})
},
async signUp (store, userInfo) { async signUp (store, userInfo) {
store.commit('signUpPending') store.commit('signUpPending')

View file

@ -23,18 +23,12 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
// For locked users we just mark it that we sent the follow request // For locked users we just mark it that we sent the follow request
if (updated.locked) { if (updated.locked) {
resolve({ resolve({ sent: true })
sent: true,
updated
})
} }
if (updated.following) { if (updated.following) {
// If we get result immediately, just stop. // If we get result immediately, just stop.
resolve({ resolve({ sent: false })
sent: false,
updated
})
} }
// But usually we don't get result immediately, so we ask server // But usually we don't get result immediately, so we ask server
@ -48,16 +42,10 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
.then((following) => { .then((following) => {
if (following) { if (following) {
// We confirmed and everything's good. // We confirmed and everything's good.
resolve({ resolve({ sent: false })
sent: false,
updated
})
} else { } else {
// If after all the tries, just treat it as if user is locked // If after all the tries, just treat it as if user is locked
resolve({ resolve({ sent: false })
sent: false,
updated
})
} }
}) })
}) })