eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

fix(frontend): hide subscription button in blog before sub status is determined (#4072)

Browse Source
This commit is contained in:
Alejandro González
2025-07-27 22:29:21 +02:00
committed by GitHub
parent b8982a6d17
commit 8804478221
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/frontend/src/components/ui/NewsletterButton.vue
View File

@@ -1,29 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import { ButtonStyled } from "@modrinth/ui"; import { ButtonStyled } from "@modrinth/ui";
import { MailIcon, CheckIcon } from "@modrinth/assets"; import { MailIcon, CheckIcon } from "@modrinth/assets";
import { ref, watchEffect } from "vue"; import { ref } from "vue";
import { useBaseFetch } from "~/composables/fetch.js"; import { useBaseFetch } from "~/composables/fetch.js";
const auth = await useAuth(); const auth = await useAuth();
const showSubscriptionConfirmation = ref(false); const showSubscriptionConfirmation = ref(false);
const subscribed = ref(false); const showSubscribeButton = useAsyncData(
async () => {
async function checkSubscribed() { if (auth.value?.user) {
if (auth.value?.user) { try {
try { const { subscribed } = await useBaseFetch("auth/email/subscribe", {
const { data } = await useBaseFetch("auth/email/subscribe", { method: "GET",
method: "GET", });
}); return !subscribed;
subscribed.value = data?.subscribed || false; } catch {
} catch { return true;
subscribed.value = false; }
} else {
return false;
} }
} },
} { watch: [auth], server: false },
);
watchEffect(() => {
checkSubscribed();
});
async function subscribe() { async function subscribe() {
try { try {
@@ -35,14 +34,19 @@ async function subscribe() {
} finally { } finally {
setTimeout(() => { setTimeout(() => {
showSubscriptionConfirmation.value = false; showSubscriptionConfirmation.value = false;
subscribed.value = true; showSubscribeButton.status.value = "success";
showSubscribeButton.data.value = false;
}, 2500); }, 2500);
} }
} }
</script> </script>
<template> <template>
<ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined"> <ButtonStyled
v-if="showSubscribeButton.status.value === 'success' && showSubscribeButton.data.value"
color="brand"
type="outlined"
>
<button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe"> <button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
<template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template> <template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
<template v-else> <CheckIcon /> Subscribed! </template> <template v-else> <CheckIcon /> Subscribed! </template>