Merge pull request #189 from h3poteto/iss-183

closes #183 Show loading when user actions
This commit is contained in:
AkiraFukushima 2018-04-04 22:59:32 +09:00 committed by GitHub
commit 814a784ddf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 7 deletions

View File

@ -7,9 +7,22 @@
<el-form-item class="hidden">
<el-input></el-input>
</el-form-item>
<el-button type="primary" @click="confirm" v-if="selectedInstance === null">Search</el-button>
<el-button
type="primary"
@click="confirm"
v-if="selectedInstance === null"
v-loading="searching"
element-loading-background="rgba(0, 0, 0, 0.8)">
Search
</el-button>
<el-form-item class="submit">
<el-button type="primary" class="login" @click="login" v-if="selectedInstance !== null">Login</el-button>
<el-button
type="primary"
class="login"
@click="login"
v-if="selectedInstance !== null">
Login
</el-button>
</el-form-item>
</el-form>
</template>
@ -21,7 +34,8 @@ export default {
name: 'login-form',
computed: {
...mapState({
selectedInstance: state => state.Login.selectedInstance
selectedInstance: state => state.Login.selectedInstance,
searching: state => state.Login.searching
}),
domainName: {
get () {

View File

@ -1,5 +1,9 @@
<template>
<div id="account_profile">
<div id="account_profile"
v-loading="loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
<div class="header">
<div class="follow-follower" v-if="relationship !== null && relationship !== ''">
@ -58,7 +62,8 @@ export default {
computed: {
...mapState({
account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship
relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship,
loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading
})
},
methods: {

View File

@ -7,7 +7,8 @@ const Login = {
instances: [],
domainName: '',
selectedInstance: null,
page: 2
page: 2,
searching: false
},
mutations: {
updateInstances (state, instances) {
@ -22,6 +23,9 @@ const Login = {
},
updateDomainName (state, domain) {
state.domainName = domain
},
changeSearching (state, value) {
state.searching = value
}
},
actions: {
@ -69,13 +73,16 @@ const Login = {
},
confirmInstance ({ commit }, domain) {
return new Promise((resolve, reject) => {
commit('changeSearching', true)
axios
.get(`https://${domain}/api/v1/instance`)
.then((res) => {
commit('changeSearching', false)
commit('changeInstance', domain)
resolve(res)
})
.catch((err) => {
commit('changeSearching', false)
reject(err)
})
})

View File

@ -4,7 +4,8 @@ const AccountProfile = {
namespaced: true,
state: {
account: null,
relationship: null
relationship: null,
loading: false
},
mutations: {
changeAccount (state, account) {
@ -12,6 +13,9 @@ const AccountProfile = {
},
changeRelationship (state, relationship) {
state.relationship = relationship
},
changeLoading (state, value) {
state.loading = value
}
},
actions: {
@ -36,12 +40,14 @@ const AccountProfile = {
},
follow ({ state, commit, rootState }, account) {
return new Promise((resolve, reject) => {
commit('changeLoading', true)
const client = new Mastodon(
{
access_token: rootState.TimelineSpace.account.accessToken,
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
})
client.post(`/accounts/${account.id}/follow`, {}, (err, data, res) => {
commit('changeLoading', false)
if (err) return reject(err)
commit('changeRelationship', data)
resolve(res)
@ -50,12 +56,14 @@ const AccountProfile = {
},
unfollow ({ state, commit, rootState }, account) {
return new Promise((resolve, reject) => {
commit('changeLoading', true)
const client = new Mastodon(
{
access_token: rootState.TimelineSpace.account.accessToken,
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
})
client.post(`/accounts/${account.id}/unfollow`, {}, (err, data, res) => {
commit('changeLoading', false)
if (err) return reject(err)
commit('changeRelationship', data)
resolve(res)