Add actual user search.

This commit is contained in:
Roger Braun 2018-11-14 20:29:45 +01:00
parent 609ad40736
commit c34eebff6c
8 changed files with 103 additions and 22 deletions

View file

@ -15,6 +15,7 @@ import Registration from '../components/registration/registration.vue'
import UserSettings from '../components/user_settings/user_settings.vue' import UserSettings from '../components/user_settings/user_settings.vue'
import FollowRequests from '../components/follow_requests/follow_requests.vue' import FollowRequests from '../components/follow_requests/follow_requests.vue'
import OAuthCallback from '../components/oauth_callback/oauth_callback.vue' import OAuthCallback from '../components/oauth_callback/oauth_callback.vue'
import UserSearch from '../components/user_search/user_search.vue'
const afterStoreSetup = ({store, i18n}) => { const afterStoreSetup = ({store, i18n}) => {
window.fetch('/api/statusnet/config.json') window.fetch('/api/statusnet/config.json')
@ -95,7 +96,8 @@ const afterStoreSetup = ({store, i18n}) => {
{ name: 'registration', path: '/registration/:token', component: Registration }, { name: 'registration', path: '/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests }, { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
{ name: 'user-settings', path: '/user-settings', component: UserSettings }, { name: 'user-settings', path: '/user-settings', component: UserSettings },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) } { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
{ name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
] ]
const router = new VueRouter({ const router = new VueRouter({

View file

@ -7,25 +7,10 @@ const UserFinder = {
}), }),
methods: { methods: {
findUser (username) { findUser (username) {
username = username[0] === '@' ? username.slice(1) : username this.$router.push({ name: 'user-search', query: { query: username } })
this.loading = true
this.$store.state.api.backendInteractor.externalProfile(username)
.then((user) => {
this.loading = false
this.hidden = true
if (!user.error) {
this.$store.commit('addNewUsers', [user])
this.$router.push({name: 'user-profile', params: {id: user.id}})
} else {
this.error = true
}
})
}, },
toggleHidden () { toggleHidden () {
this.hidden = !this.hidden this.hidden = !this.hidden
},
dismissError () {
this.error = false
} }
} }
} }

View file

@ -1,9 +1,5 @@
<template> <template>
<span class="user-finder-container"> <span class="user-finder-container">
<span class="alert error" v-if="error">
<i class="icon-cancel user-finder-icon" @click="dismissError"/>
{{$t('finder.error_fetching_user')}}
</span>
<i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
<a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a> <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a>
<span v-else> <span v-else>

View file

@ -0,0 +1,33 @@
import UserCard from '../user_card/user_card.vue'
import userSearchApi from '../../services/new_api/user_search.js'
const userSearch = {
components: {
UserCard
},
props: [
'query'
],
data () {
return {
users: []
}
},
mounted () {
this.search(this.query)
},
watch: {
query (newV) {
this.search(newV)
}
},
methods: {
search (query) {
userSearchApi.search({query, store: this.$store})
.then((res) => {
this.users = res
})
}
}
}
export default userSearch

View file

@ -0,0 +1,12 @@
<template>
<div class="user-seach panel panel-default">
<div class="panel-heading">
{{$t('nav.user_search')}}
</div>
<div class="panel-body">
<user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
</div>
</div>
</template>
<script src="./user_search.js"></script>

View file

@ -35,7 +35,8 @@
"dms": "Direct Messages", "dms": "Direct Messages",
"public_tl": "Public Timeline", "public_tl": "Public Timeline",
"timeline": "Timeline", "timeline": "Timeline",
"twkn": "The Whole Known Network" "twkn": "The Whole Known Network",
"user_search": "User Search"
}, },
"notifications": { "notifications": {
"broken_favorite": "Unknown status, searching for it...", "broken_favorite": "Unknown status, searching for it...",

View file

@ -0,0 +1,16 @@
import utils from './utils.js'
const search = ({query, store}) => {
return utils.request({
store,
url: '/api/pleroma/search_user',
params: {
query
}
}).then((data) => data.json())
}
const UserSearch = {
search
}
export default UserSearch

View file

@ -0,0 +1,36 @@
const queryParams = (params) => {
return Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&')
}
const headers = (store) => {
const accessToken = store.state.oauth.token
if (accessToken) {
return {'Authorization': `Bearer ${accessToken}`}
} else {
return {}
}
}
const request = ({method = 'GET', url, params, store}) => {
const instance = store.state.instance.server
let fullUrl = `${instance}${url}`
if (method === 'GET' && params) {
fullUrl = fullUrl + `?${queryParams(params)}`
}
return window.fetch(fullUrl, {
method,
headers: headers(store),
credentials: 'same-origin'
})
}
const utils = {
queryParams,
request
}
export default utils