Sharkey/packages/frontend/src/components/MkFollowButton.vue

220 lines
5.2 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
2022-12-20 03:00:05 +01:00
<button
2023-05-30 03:20:06 +02:00
class="_button"
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
:disabled="wait"
2021-11-19 11:36:12 +01:00
@click="onClick"
>
<template v-if="!wait">
2020-01-31 03:58:59 +01:00
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
2023-09-30 21:53:52 +02:00
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass ph-bold ph-lg"></i>
2020-01-31 03:58:59 +01:00
</template>
2022-12-20 03:00:05 +01:00
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
<!-- つまりリモートフォローの場合 -->
2023-05-30 03:20:06 +02:00
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
2020-01-31 03:58:59 +01:00
</template>
<template v-else-if="isFollowing">
2023-09-30 21:53:52 +02:00
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
2020-01-31 03:58:59 +01:00
</template>
<template v-else-if="!isFollowing && user.isLocked">
2023-09-30 21:53:52 +02:00
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ph-plus ph-bold ph-lg"></i>
2020-01-31 03:58:59 +01:00
</template>
<template v-else-if="!isFollowing && !user.isLocked">
2023-09-30 21:53:52 +02:00
<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
2020-01-31 03:58:59 +01:00
</template>
</template>
<template v-else>
2023-05-30 03:20:06 +02:00
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
</template>
</button>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
2023-09-19 09:37:43 +02:00
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
2023-09-19 09:37:43 +02:00
import { useStream } from '@/stream.js';
import { i18n } from '@/i18n.js';
import { claimAchievement } from '@/scripts/achievements.js';
import { $i } from '@/account.js';
import { defaultStore } from '@/store.js';
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed,
full?: boolean,
large?: boolean,
}>(), {
full: false,
large: false,
});
新規にフォローした人のwithRepliesをtrueにする機能を追加 (#12048) * feat: add defaultWithReplies to MiUser * feat: use defaultWithReplies when creating MiFollowing * feat: update defaultWithReplies from API * feat: return defaultWithReplies as a part of $i * feat(frontend): configure defaultWithReplies * docs(changelog): 新規にフォローした人のをデフォルトでTL二追加できるように * fix: typo * style: fix lint failure * chore: improve UI text * chore: make optional params of UserFollowingService.follow() object * chore: UserFollowingService.follow() accept withReplies * chore: add withReplies to MiFollowRequest * chore: process withReplies for follow request * feat: accept withReplies on 'following/create' endpoint * feat: store defaultWithReplies in client store * Revert "feat: return defaultWithReplies as a part of $i" This reverts commit f2cc4fe6 * Revert "feat: update defaultWithReplies from API" This reverts commit 95e3cee6 * Revert "feat: add defaultWithReplies to MiUser" This reverts commit 9f5ab14d7063532de2b049bc2ed40a15658168f5. * feat: configuring withReplies in import-following * feat(frontend): configure withReplies * fix(frontend): incorrectly showRepliesToOthersInTimeline can be shown * fix(backend): withReplies of following/create not working * fix(frontend): importFollowing error * fix: withReplies is not working with follow import * fix(frontend): use v-model * style: fix lint --------- Co-authored-by: Sayamame-beans <61457993+sayamame-beans@users.noreply.github.com> Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
2023-10-17 13:56:17 +02:00
const emit = defineEmits<{
(_: 'update:user', value: Misskey.entities.UserDetailed): void
}>();
const isFollowing = ref(props.user.isFollowing);
const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou);
const wait = ref(false);
const connection = useStream().useChannel('main');
if (props.user.isFollowing == null) {
misskeyApi('users/show', {
2022-12-20 03:00:05 +01:00
userId: props.user.id,
})
2022-12-20 03:00:05 +01:00
.then(onFollowChange);
}
function onFollowChange(user: Misskey.entities.UserDetailed) {
if (user.id === props.user.id) {
isFollowing.value = user.isFollowing;
hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
}
}
async function onClick() {
wait.value = true;
try {
if (isFollowing.value) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.tsx.unfollowConfirm({ name: props.user.name || props.user.username }),
});
if (canceled) return;
await misskeyApi('following/delete', {
2022-12-20 03:00:05 +01:00
userId: props.user.id,
});
} else {
if (hasPendingFollowRequestFromYou.value) {
await misskeyApi('following/requests/cancel', {
2022-12-20 03:00:05 +01:00
userId: props.user.id,
});
hasPendingFollowRequestFromYou.value = false;
} else {
await misskeyApi('following/create', {
2022-12-20 03:00:05 +01:00
userId: props.user.id,
新規にフォローした人のwithRepliesをtrueにする機能を追加 (#12048) * feat: add defaultWithReplies to MiUser * feat: use defaultWithReplies when creating MiFollowing * feat: update defaultWithReplies from API * feat: return defaultWithReplies as a part of $i * feat(frontend): configure defaultWithReplies * docs(changelog): 新規にフォローした人のをデフォルトでTL二追加できるように * fix: typo * style: fix lint failure * chore: improve UI text * chore: make optional params of UserFollowingService.follow() object * chore: UserFollowingService.follow() accept withReplies * chore: add withReplies to MiFollowRequest * chore: process withReplies for follow request * feat: accept withReplies on 'following/create' endpoint * feat: store defaultWithReplies in client store * Revert "feat: return defaultWithReplies as a part of $i" This reverts commit f2cc4fe6 * Revert "feat: update defaultWithReplies from API" This reverts commit 95e3cee6 * Revert "feat: add defaultWithReplies to MiUser" This reverts commit 9f5ab14d7063532de2b049bc2ed40a15658168f5. * feat: configuring withReplies in import-following * feat(frontend): configure withReplies * fix(frontend): incorrectly showRepliesToOthersInTimeline can be shown * fix(backend): withReplies of following/create not working * fix(frontend): importFollowing error * fix: withReplies is not working with follow import * fix(frontend): use v-model * style: fix lint --------- Co-authored-by: Sayamame-beans <61457993+sayamame-beans@users.noreply.github.com> Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
2023-10-17 13:56:17 +02:00
withReplies: defaultStore.state.defaultWithReplies,
});
emit('update:user', {
...props.user,
2023-12-11 12:31:23 +01:00
withReplies: defaultStore.state.defaultWithReplies,
});
hasPendingFollowRequestFromYou.value = true;
claimAchievement('following1');
if ($i.followingCount >= 10) {
claimAchievement('following10');
}
if ($i.followingCount >= 50) {
claimAchievement('following50');
}
if ($i.followingCount >= 100) {
claimAchievement('following100');
}
if ($i.followingCount >= 300) {
claimAchievement('following300');
}
}
}
} catch (err) {
console.error(err);
} finally {
wait.value = false;
}
}
onMounted(() => {
connection.on('follow', onFollowChange);
connection.on('unfollow', onFollowChange);
});
onBeforeUnmount(() => {
connection.dispose();
});
</script>
2023-05-30 03:20:06 +02:00
<style lang="scss" module>
.root {
position: relative;
display: inline-block;
font-weight: bold;
color: var(--fgOnWhite);
border: solid 1px var(--accent);
padding: 0;
height: 31px;
font-size: 16px;
border-radius: var(--radius-xl);
background: #fff;
2020-01-31 03:58:59 +01:00
&.full {
padding: 0 8px 0 12px;
2020-01-31 04:01:13 +01:00
font-size: 14px;
2020-01-31 03:58:59 +01:00
}
2020-11-28 16:18:54 +01:00
&.large {
font-size: 16px;
height: 38px;
padding: 0 12px 0 16px;
}
2020-01-31 03:58:59 +01:00
&:not(.full) {
width: 31px;
}
2021-10-02 19:46:58 +02:00
&:focus-visible {
&:after {
content: "";
pointer-events: none;
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 2px solid var(--focus);
border-radius: var(--radius-xl);
}
}
&:hover {
//background: mix($primary, #fff, 20);
}
&:active {
//background: mix($primary, #fff, 40);
}
&.active {
color: var(--fgOnAccent);
background: var(--accent);
&:hover {
background: var(--accentLighten);
border-color: var(--accentLighten);
}
&:active {
background: var(--accentDarken);
border-color: var(--accentDarken);
}
}
&.wait {
cursor: wait !important;
opacity: 0.7;
}
2023-05-30 03:20:06 +02:00
}
2020-01-31 03:58:59 +01:00
2023-05-30 03:20:06 +02:00
.text {
margin-right: 6px;
}
</style>