From 87c8b7ab928e196d3e5ad7e88cb17f28b9098de2 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 11 Jun 2024 14:03:30 -1000
Subject: [PATCH] feat: :sparkles: Add accept/reject buttons on follow request
 notifications

---
 .../social-elements/notifications/notif.vue   | 35 ++++++++++++++++++-
 composables/Relationship.ts                   |  2 +-
 types/mastodon/relationship.ts                |  1 +
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index 6f036ff..5659424 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -7,7 +7,7 @@
                 <AvatarsCentered v-if="notification?.account?.avatar" :src="notification?.account.avatar"
                     :alt="`${notification?.account.acct}'s avatar'`"
                     class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
-                <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text
+                <span class="text-gray-200 line-clamp-1"><strong v-html="accountName"></strong> {{ text
                     }}</span>
             </Skeleton>
         </div>
@@ -17,17 +17,50 @@
             <div v-else-if="notification.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
                 <SocialElementsUsersSmallCard :account="notification.account" />
             </div>
+            <div v-if="notification?.type === 'follow_request' && relationship?.requested_by"
+                class="w-full grid grid-cols-2 gap-4 p-2 ">
+                <ButtonsPrimary :loading="isWorkingOnFollowRequest" @click="acceptFollowRequest"><span>Accept</span></ButtonsPrimary>
+                <ButtonsSecondary :loading="isWorkingOnFollowRequest" @click="rejectFollowRequest"><span>Reject</span></ButtonsSecondary>
+            </div>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import type { Notification } from "~/types/mastodon/notification";
+import type { Relationship } from "~/types/mastodon/relationship";
 
 const props = defineProps<{
     notification?: Notification;
 }>();
 
+const client = useClient();
+const isWorkingOnFollowRequest = ref(false);
+const { relationship } = useRelationship(
+    client,
+    props.notification?.account?.id ?? null,
+);
+
+const acceptFollowRequest = async () => {
+    if (!props.notification?.account) return;
+    isWorkingOnFollowRequest.value = true;
+    const { data } = await client.value.acceptFollowRequest(
+        props.notification.account.id,
+    );
+    relationship.value = data as Relationship;
+    isWorkingOnFollowRequest.value = false;
+};
+
+const rejectFollowRequest = async () => {
+    if (!props.notification?.account) return;
+    isWorkingOnFollowRequest.value = true;
+    const { data } = await client.value.rejectFollowRequest(
+        props.notification.account.id,
+    );
+    relationship.value = data as Relationship;
+    isWorkingOnFollowRequest.value = false;
+};
+
 const accountName = useParsedContent(
     props.notification?.account?.display_name ?? "",
     props.notification?.account?.emojis ?? [],
diff --git a/composables/Relationship.ts b/composables/Relationship.ts
index fac23f8..16b2b3d 100644
--- a/composables/Relationship.ts
+++ b/composables/Relationship.ts
@@ -18,7 +18,7 @@ export const useRelationship = (
             toValue(client)
                 ?.getRelationship(toValue(accountId) ?? "")
                 .then((res) => {
-                    relationship.value = res.data;
+                    relationship.value = res.data as Relationship;
                 });
     });
 
diff --git a/types/mastodon/relationship.ts b/types/mastodon/relationship.ts
index 1d5540d..c2bb9c2 100644
--- a/types/mastodon/relationship.ts
+++ b/types/mastodon/relationship.ts
@@ -7,6 +7,7 @@ export type Relationship = {
     muting: boolean;
     muting_notifications: boolean;
     requested: boolean;
+    requested_by: boolean;
     domain_blocking: boolean;
     showing_reblogs: boolean;
     endorsed: boolean;