fix optimistic follow button (#91)

Fixes #85
This commit is contained in:
Nolan Lawson 2018-04-11 22:55:04 -07:00 committed by GitHub
parent 9700b46543
commit 1ad72f00c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 18 deletions

View file

@ -39,11 +39,14 @@ async function updateRelationship (accountId, instanceName, accessToken) {
}
}
export async function updateProfileAndRelationship (accountId) {
export async function clearProfileAndRelationship () {
store.set({
currentAccountProfile: null,
currentAccountRelationship: null
})
}
export async function updateProfileAndRelationship (accountId) {
let instanceName = store.get('currentInstance')
let accessToken = store.get('accessToken')

View file

@ -14,8 +14,6 @@ export async function setAccountFollowed (accountId, follow, toastOnSuccess) {
} else {
account = await unfollowAccount(instanceName, accessToken, accountId)
}
// TODO: hack to let the animation fully play
await new Promise(resolve => setTimeout(resolve, 400))
await updateProfileAndRelationship(accountId)
let relationship = await database.getRelationship(instanceName, accountId)
if (toastOnSuccess) {

View file

@ -1,20 +1,22 @@
<div class="account-profile-follow">
{{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
<IconButton
label="{{followLabel}}"
href="{{followIcon}}"
pressable="true"
pressed="{{following}}"
big="true"
on:click="onFollowButtonClick(event)"
animation="{{animateFollowButton && followButtonAnimation}}"
/>
{{/if}}
<div class="account-profile-follow {{shown ? 'shown' : ''}}">
<IconButton
label="{{followLabel}}"
href="{{followIcon}}"
pressable="true"
pressed="{{following}}"
big="true"
on:click="onFollowButtonClick(event)"
animation="{{animateFollowButton && followButtonAnimation}}"
/>
</div>
<style>
.account-profile-follow {
grid-area: follow;
align-self: flex-start;
display: none;
}
.account-profile-follow.shown {
display: block;
}
</style>
<script>
@ -32,12 +34,13 @@
let accountId = this.get('accountId')
let following = this.get('following')
let followRequested = this.get('followRequested')
this.set({animateFollowButton: true})
this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
let newFollowingValue = !(following || followRequested)
await setAccountFollowed(accountId, newFollowingValue)
if (!account.locked) { // be optimistic, show the user that it succeeded
this.set({overrideFollowing: newFollowingValue})
}
await setAccountFollowed(accountId, newFollowingValue)
this.set({animateFollowButton: false}) // let animation play next time
}
},
store: () => store,
@ -72,6 +75,9 @@
} else {
return '#fa-user-plus'
}
},
shown: (verifyCredentials, relationship) => {
return verifyCredentials && relationship && verifyCredentials.id !== relationship.id
}
},
components: {

View file

@ -24,13 +24,14 @@
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
import { updateProfileAndRelationship } from '../../_actions/accounts'
import { updateProfileAndRelationship, clearProfileAndRelationship } from '../../_actions/accounts'
import AccountProfile from '../../_components/profile/AccountProfile.html'
import PinnedStatuses from '../../_components/timeline/PinnedStatuses.html'
export default {
oncreate() {
let accountId = this.get('params').accountId
clearProfileAndRelationship()
updateProfileAndRelationship(accountId)
},
store: () => store,