681ae5d1d8
* refactor: most places with useAsyncData replaced with tanstack query * refactor report list and report view * refactor organization page to use tanstack query * fix types * refactor collection page and include proper loading state * fix followed projects proper loading state * fix 404 handling * fix organization loading and 404 states * pnpm prepr * refactor: remove useAsyncData on newsletter button * refactor: remove useAsyncData on auth globals fetch * refactor: settings/billing/index.vue to useQuery instead of useAsyncData * refactor: user page to remove useAsyncData * pnpm prepr * fix reports pages * fix notifications page * fix billing page cannot read properties of null and prop warnings * fix refresh causing 404 by removing useBaseFetch and use api-client * fix stale data after removing organization from project * pnpm prepr * fix news erroring in build * fix: project page loads header only after content * fix: user page tanstack problems (start on migrating away from useBaseFetch) * fix: start swapping useBaseFetch usages to api-client * Revert "fix: start swapping useBaseFetch usages to api-client" This reverts commit 3df3fab11d535159132b1288dd7cacc38282b553. * fix: remove debug logging * fix: lint --------- Co-authored-by: Calum H. <calum@modrinth.com> Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { CheckIcon, MailIcon } from '@modrinth/assets'
|
|
import { ButtonStyled, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
|
|
import { useQuery, useQueryClient } from '@tanstack/vue-query'
|
|
import { computed, ref } from 'vue'
|
|
|
|
const { formatMessage } = useVIntl()
|
|
|
|
const messages = defineMessages({
|
|
tooltipSubscribe: {
|
|
id: 'ui.newsletter-button.tooltip',
|
|
defaultMessage: 'Subscribe to the Modrinth newsletter',
|
|
},
|
|
subscribe: {
|
|
id: 'ui.newsletter-button.subscribe',
|
|
defaultMessage: 'Subscribe',
|
|
},
|
|
subscribed: {
|
|
id: 'ui.newsletter-button.subscribed',
|
|
defaultMessage: 'Subscribed!',
|
|
},
|
|
})
|
|
|
|
const auth = (await useAuth()) as unknown as {
|
|
value: { user: { id: string; username: string; email: string; created: string } }
|
|
}
|
|
const client = injectModrinthClient()
|
|
const queryClient = useQueryClient()
|
|
const showSubscriptionConfirmation = ref(false)
|
|
|
|
const { data: showSubscribeButton, isSuccess } = useQuery({
|
|
queryKey: computed(() => ['newsletter', 'subscribed', auth.value?.user?.id]),
|
|
queryFn: async () => {
|
|
if (auth.value?.user) {
|
|
try {
|
|
const { subscribed } = await client.labrinth.auth_internal.getNewsletterStatus()
|
|
return !subscribed
|
|
} catch {
|
|
return true
|
|
}
|
|
} else {
|
|
return false
|
|
}
|
|
},
|
|
enabled: computed(() => !!auth.value?.user),
|
|
})
|
|
|
|
async function subscribe() {
|
|
try {
|
|
await client.labrinth.auth_internal.subscribeNewsletter()
|
|
showSubscriptionConfirmation.value = true
|
|
} catch {
|
|
// Ignored
|
|
} finally {
|
|
setTimeout(() => {
|
|
showSubscriptionConfirmation.value = false
|
|
queryClient.setQueryData(['newsletter', 'subscribed', auth.value?.user?.id], false)
|
|
}, 2500)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ButtonStyled v-if="isSuccess && showSubscribeButton" color="brand" type="outlined">
|
|
<button v-tooltip="formatMessage(messages.tooltipSubscribe)" @click="subscribe">
|
|
<template v-if="!showSubscriptionConfirmation">
|
|
<MailIcon /> {{ formatMessage(messages.subscribe) }}
|
|
</template>
|
|
<template v-else> <CheckIcon /> {{ formatMessage(messages.subscribed) }} </template>
|
|
</button>
|
|
</ButtonStyled>
|
|
</template>
|