From 9c5aac99f649e2a17db28a9e46bdee7feaca08da Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Thu, 2 May 2024 11:28:00 +0200
Subject: [PATCH] style: Adding visual confirmation for sendt reqeust
---
src/views/User/UserFriendsView.vue | 19 +++++++++++++++----
1 file changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index 3bd443b..1858195 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -99,8 +99,11 @@
</h5>
</div>
<div class="col-md-3 col-sm-3">
- <button class="btn btn-primary pull-right" @click="addFriend(user.id)">Legg
- til venn</button>
+ <button class="btn btn-primary pull-right" @click="addFriend(user.id)"
+ :disabled="friendRequestsSent[user.id]"
+ v-if="!friendRequestsSent[user.id]">Legg til venn</button>
+ <button class="btn btn-secondary pull-right" disabled
+ v-if="friendRequestsSent[user.id]">Forespørsel sendt</button>
</div>
</div>
</div>
@@ -117,7 +120,7 @@
<script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { type Ref, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { FriendService, UserService } from '@/api';
import type { UserDTO } from '@/api';
@@ -131,6 +134,8 @@ const friendRequests = ref([] as any);
const addFriends = ref([] as any);
const searchedUsers = ref([] as any);
+const friendRequestsSent: Ref<Record<number, boolean>> = ref({});
+
const searchWord = ref("");
const elementsInFriendRequest = ref(false);
@@ -169,7 +174,13 @@ const addNewFriends = async () => {
};
async function addFriend(friendID: number) {
- const response = await FriendService.addFriendRequest({ userId: friendID });
+ try {
+ await FriendService.addFriendRequest({ userId: friendID });
+ // Use a spread to update the state and keep immutability
+ friendRequestsSent.value = { ...friendRequestsSent.value, [friendID]: true };
+ } catch (error) {
+ console.error('Failed to send friend request', error);
+ }
}
async function requestFriend() {
--
GitLab