refactor: follow button (#8789)

* fix: display cancelling follow request

* remove unnecessary branch

The executed code is the same as in the else branch so this special
condition is unnecessary.

* remove code duplication

Use the same callback as later for updating these variables.

* use $ref sugar

* remove unused import

Co-authored-by: blackskye-sx <saul.newman@gmail.com>
This commit is contained in:
Johann150 2022-06-10 07:29:46 +02:00 committed by GitHub
parent 78df3dc484
commit 42f48ffea2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -28,7 +28,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'; import { onBeforeUnmount, onMounted } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream'; import { stream } from '@/stream';
@ -43,32 +43,30 @@ const props = withDefaults(defineProps<{
large: false, large: false,
}); });
const isFollowing = ref(props.user.isFollowing); let isFollowing = $ref(props.user.isFollowing);
const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou); let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
const wait = ref(false); let wait = $ref(false);
const connection = stream.useChannel('main'); const connection = stream.useChannel('main');
if (props.user.isFollowing == null) { if (props.user.isFollowing == null) {
os.api('users/show', { os.api('users/show', {
userId: props.user.id userId: props.user.id
}).then(u => { })
isFollowing.value = u.isFollowing; .then(onFollowChange);
hasPendingFollowRequestFromYou.value = u.hasPendingFollowRequestFromYou;
});
} }
function onFollowChange(user: Misskey.entities.UserDetailed) { function onFollowChange(user: Misskey.entities.UserDetailed) {
if (user.id === props.user.id) { if (user.id === props.user.id) {
isFollowing.value = user.isFollowing; isFollowing = user.isFollowing;
hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou; hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
} }
} }
async function onClick() { async function onClick() {
wait.value = true; wait = true;
try { try {
if (isFollowing.value) { if (isFollowing) {
const { canceled } = await os.confirm({ const { canceled } = await os.confirm({
type: 'warning', type: 'warning',
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }), text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
@ -80,26 +78,22 @@ async function onClick() {
userId: props.user.id userId: props.user.id
}); });
} else { } else {
if (hasPendingFollowRequestFromYou.value) { if (hasPendingFollowRequestFromYou) {
await os.api('following/requests/cancel', { await os.api('following/requests/cancel', {
userId: props.user.id userId: props.user.id
}); });
} else if (props.user.isLocked) { hasPendingFollowRequestFromYou = false;
await os.api('following/create', {
userId: props.user.id
});
hasPendingFollowRequestFromYou.value = true;
} else { } else {
await os.api('following/create', { await os.api('following/create', {
userId: props.user.id userId: props.user.id
}); });
hasPendingFollowRequestFromYou.value = true; hasPendingFollowRequestFromYou = true;
} }
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} finally { } finally {
wait.value = false; wait = false;
} }
} }