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({ store.set({
currentAccountProfile: null, currentAccountProfile: null,
currentAccountRelationship: null currentAccountRelationship: null
}) })
}
export async function updateProfileAndRelationship (accountId) {
let instanceName = store.get('currentInstance') let instanceName = store.get('currentInstance')
let accessToken = store.get('accessToken') let accessToken = store.get('accessToken')

View file

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

View file

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

View file

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