Moved MatchInvites to ActivityCenter

halil-kalyoncu · Sep 2, 2023 · 315eb88 · 315eb88
1 parent 19d530f
commit 315eb88
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 126 deletions.
diff --git a/vue/conf/src/components/Login.vue b/vue/conf/src/components/Login.vue
@@ -36,7 +36,6 @@ const submitForm = async () => {
     if (response.ok) {
       console.log('Login successful')
       const { access_token } = await response.json()
-      console.log('access_token: ' + access_token)
       //save jwt into local storage
       localStorage.setItem('ponggame', access_token)
       try {

diff --git a/vue/conf/src/components/activity/GameInvites.vue b/vue/conf/src/components/activity/GameInvites.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="friend-requests">
     <ScrollViewer :maxHeight="'75vh'" :paddingRight="'.5rem'">
-      <div v-if="friendRequests && friendRequests.length">
-        <div v-for="request in friendRequests" :key="request.id">
+      <div v-if="matchRequests && matchRequests.length">
+        <div v-for="request in matchRequests" :key="request.id">
           <RequestItem
             v-if="isValidRequest(request)"
-            :username="request.friend.username"
+            :username="request.leftUser?.username"
             :requestId="request.id"
             :showAcceptRequest="true"
             :showRejectRequest="true"
@@ -24,34 +24,64 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { onMounted, computed, ref } from 'vue'
 import RequestItem from './RequestItem.vue'
 
 import ScrollViewer from '../utils/ScrollViewer.vue'
 import { useUserStore } from '../../stores/userInfo'
 import { useNotificationStore } from '../../stores/notification'
-import { useFriendRequestStore } from '../../stores/friendRequests'
+import { useMatchRequestsStore } from '../../stores/matchRequests'
+import { Socket } from 'socket.io-client'
+import { connectWebSocket } from '../../websocket'
+import { useRouter } from 'vue-router'
 
-const friendRequestStore = useFriendRequestStore()
-const friendRequests = computed(() => friendRequestStore.friendRequests)
+const matchRequestStore = useMatchRequestsStore()
+const matchRequests = computed(() => matchRequestStore.matchRequests)
+const router = useRouter()
 
 const notificationStore = useNotificationStore()
 const userStore = useUserStore()
 const username = computed(() => userStore.username)
+const socket = ref<Socket | null>(null)
 const props = defineProps({
   channelId: Number
 })
 
+const initSocket = () => {
+  const accessToken = localStorage.getItem('ponggame') ?? ''
+  socket.value = connectWebSocket('http://localhost:3000', accessToken)
+}
+
+onMounted(() => {
+  initSocket()
+})
+
 const isValidRequest = (request: any) => {
-  return request && request.friend && request.friend.username
+  return request && request.leftUser && request.leftUser.username
 }
 
 const handleAcceptGameRequest = (requestId: number, username: string) => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+
+  socket.value.emit('acceptMatchInvite', requestId)
+  router.push(`/invite/${requestId}`)
+
   notificationStore.showNotification(`You accepted ${username}'s game request`, true)
+  matchRequestStore.removeMatchRequestById(requestId)
 }
 
 const handleRejectGameRequest = (requestId: number, username: string) => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+
+  socket.value.emit('rejectMatchInvite', requestId)
   notificationStore.showNotification(`You rejected ${username}'s game request`, true)
+  matchRequestStore.removeMatchRequestById(requestId)
 }
 </script>
 

diff --git a/vue/conf/src/components/friends/Friends.vue b/vue/conf/src/components/friends/Friends.vue
@@ -16,23 +16,20 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useUserStore } from '../../stores/userInfo'
 import { Socket } from 'socket.io-client'
 import type { MatchI } from '../../model/match/match.interface'
-import { useRouter } from 'vue-router'
 import type { ErrorI } from '../../model/error.interface'
 import type { UnreadMessageI } from '../../model/message/unreadMessage.interface'
 import type { DirectConverstationDto } from '../../model/message/directConversation.dto'
 import type { BlockUserDto } from '../../model/block-user.dto'
 library.add(faArrowLeft)
 
 const notificationStore = useNotificationStore()
-const router = useRouter()
 
 const userStore = useUserStore()
 const userId = computed(() => userStore.userId)
 
 const socket = ref<Socket | null>(null)
 
 const friends = ref<FriendshipEntryI[]>([])
-const matchInvites = ref<MatchI[]>([])
 const unreadMessages = ref<UnreadMessageI[]>([])
 
 const modalTitle = ref('')
@@ -87,23 +84,6 @@ const setFriendData = async () => {
   }
 }
 
-const setMatchInviteData = async () => {
-  try {
-    const response = await fetch(
-      `http://localhost:3000/api/matches/invites-by-userId?userId=${userId.value}`
-    )
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! ${response.status}: ${response.statusText}`)
-    }
-
-    const data = await response.json()
-    matchInvites.value = data
-  } catch (error: any) {
-    notificationStore.showNotification(`Error` + error.message, false)
-  }
-}
-
 const setDirectMessageData = async () => {
   try {
     const response = await fetch(
@@ -133,16 +113,6 @@ const setFriendsListener = () => {
   })
 }
 
-const setMatchInviteListener = () => {
-  if (!socket || !socket.value) {
-    notificationStore.showNotification(`Error: Connection problems`, false)
-    return
-  }
-  socket.value.on('matchInvites', () => {
-    setMatchInviteData()
-  })
-}
-
 const setDirectMessageListener = () => {
   if (!socket || !socket.value) {
     notificationStore.showNotification(`Error: Connection problems`, false)
@@ -168,11 +138,9 @@ onMounted(() => {
   initSocket()
 
   setFriendsListener()
-  setMatchInviteListener()
   setDirectMessageListener()
 
   setFriendData()
-  setMatchInviteData()
   setDirectMessageData()
 })
 
@@ -319,25 +287,6 @@ const handleFriendManagerOpened = (friend: FriendshipEntryI) => {
   showFriendManagerAndChat.value = true
 }
 
-const acceptMatchInvite = (matchId: number) => {
-  if (!socket || !socket.value) {
-    notificationStore.showNotification(`Error: Connection problems`, false)
-    return
-  }
-
-  socket.value.emit('acceptMatchInvite', matchId)
-  router.push(`/invite/${matchId}`)
-}
-
-const rejectMatchInvite = (matchId: number) => {
-  if (!socket || !socket.value) {
-    notificationStore.showNotification(`Error: Connection problems`, false)
-    return
-  }
-
-  socket.value.emit('rejectMatchInvite', matchId)
-}
-
 const handleUnfriendUser = (username: String, friendshipId: Number) => {
   if (!socket || !socket.value) {
     notificationStore.showNotification(`Error: Connection problems`, false)
@@ -457,18 +406,6 @@ const goBack = () => {
             />
           </div>
         </ScrollViewer>
-        <h2 v-if="matchInvites?.length > 0">MatchInvites</h2>
-        <ul v-if="matchInvites?.length > 0">
-          <li v-for="invite in matchInvites" :key="invite.id">
-            <div class="friendInfo">
-              <span v-if="invite.leftUser"
-                >Custom game invite from {{ invite.leftUser.username }}
-              </span>
-              <button @click="acceptMatchInvite(invite.id as number)">Accept</button>
-              <button @click="rejectMatchInvite(invite.id as number)">Reject</button>
-            </div>
-          </li>
-        </ul>
         <button class="add-friend-button" @click="openAddModal">Add Friend</button>
         <button class="add-friend-button" @click="openBlockModal">Block User</button>
         <button class="add-friend-button" @click="openUnblockModal">Unblock User</button>

diff --git a/vue/conf/src/components/invite/InviteFriend.vue b/vue/conf/src/components/invite/InviteFriend.vue
@@ -83,9 +83,6 @@ const sendInvite = async () => {
       return
     }
 
-    console.log(
-      'sending invite for match: ' + props.matchId + ' to invitedUser: ' + invitedUser.value!.id
-    )
     socket.emit('sendMatchInvite', { matchId: props.matchId, invitedUserId: invitedUser.value?.id })
 
     emit('send-match-invite', invitedUser.value)

diff --git a/vue/conf/src/components/layout/TopNavBarNotificationBell.vue b/vue/conf/src/components/layout/TopNavBarNotificationBell.vue
@@ -51,43 +51,42 @@ onMounted(() => {
   initSocket()
 
   setFriendRequestListener()
-  // Todo: implement matchInvite
-  // setMatchInviteListener()
+  setMatchInviteListener()
+
+  setFriendRequestData()
+  setMatchInviteData()
 })
 
-// const setMatchInviteData = async () => {
-//     console.log("NotificationBell userId" + userId.value)
-//   try {
-//     const response = await fetch(
-//       `http://localhost:3000/api/matches/invites-by-userId?userId=${userId.value}`
-//     )
-
-//     if (!response.ok) {
-//       throw new Error(`HTTP error! ${response.status}: ${response.statusText}`)
-//     }
-
-//     const data = await response.json()
-//     matchInvites.value = data
-//     if (data && data.length > 0) {
-//       hasNotification.value = true;
-//     }
-//     // matchRequestsStore.addMatchRequest(matchInvites.value)
-
-//   } catch (error: any) {
-//     notificationStore.showNotification(`Error` + error.message, false)
-//   }
-// }
-
-// const setMatchInviteListener = () => {
-//   if (!socket || !socket.value) {
-//     notificationStore.showNotification(`Error: Connection problems`, false)
-//     return
-//   }
-//   socket.value.on('matchInvites', () => {
-
-//     setMatchInviteData()
-//   })
-// }
+const setMatchInviteListener = () => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+  socket.value.on('matchInvites', () => {
+    setMatchInviteData()
+  })
+}
+
+const setMatchInviteData = async () => {
+  try {
+    const response = await fetch(
+      `http://localhost:3000/api/matches/invites-by-userId?userId=${userId.value}`
+    )
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! ${response.status}: ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    matchInvites.value = data
+    if (data && data.length > 0) {
+      hasNotification.value = true
+    }
+    matchRequestsStore.addMatchRequest(matchInvites.value)
+  } catch (error: any) {
+    notificationStore.showNotification(`Error` + error.message, false)
+  }
+}
 
 const setFriendRequestData = async () => {
   try {
@@ -101,11 +100,10 @@ const setFriendRequestData = async () => {
 
     const data = await response.json()
 
-    // Only set hasNotification to true if there are actual new notifications.
     if (data && data.length > 0) {
       hasNotification.value = true
     }
-    console.log(data)
+
     friendRequestsStore.addFriendRequest(data)
   } catch (error: any) {
     notificationStore.showNotification(`Error` + error.message, false)

diff --git a/vue/conf/src/stores/friendRequests.ts b/vue/conf/src/stores/friendRequests.ts
@@ -12,18 +12,11 @@ export const useFriendRequestStore = defineStore('friendRequest', {
 
   actions: {
     addFriendRequest(newFriendRequests: FriendshipEntryI[]) {
-      newFriendRequests.forEach((request) => {
-        if (!this.friendRequests.includes(newFriendRequests[0])) {
-          this.friendRequests.push(request)
-        }
-      })
-    },
-
-    setFriendOnlineStatus(id: number, status: boolean) {
-      const friend = this.friendRequests.find((friendRequest) => friendRequest.id === id)
-      if (friend) {
-        friend.isOnline = status
-      }
+      const uniqueRequests = newFriendRequests.filter(
+        (request) =>
+          !this.friendRequests.some((existingRequest) => existingRequest.id === request.id)
+      )
+      this.friendRequests.push(...uniqueRequests)
     },
 
     removeFriendRequestById(requestId: number) {

diff --git a/vue/conf/src/stores/matchRequests.ts b/vue/conf/src/stores/matchRequests.ts
@@ -11,8 +11,24 @@ export const useMatchRequestsStore = defineStore('matchRequest', {
   }),
 
   actions: {
-    addMatchRequest(newMatchRequest: MatchI) {
-      this.matchRequests.push(newMatchRequest)
+    addMatchRequest(newMatchRequest: MatchI[]) {
+      const uniqueRequests = newMatchRequest.filter(
+        (request) =>
+          !this.matchRequests.some((existingRequest) => existingRequest.id === request.id)
+      )
+      this.matchRequests.push(...uniqueRequests)
+    },
+    removeMatchRequestById(requestId: number) {
+      const index = this.matchRequests.findIndex((request) => request.id === requestId)
+      if (index !== -1) {
+        this.matchRequests.splice(index, 1)
+        console.log(
+          `Friend request with ID ${requestId} removed. Updated list:`,
+          this.matchRequests
+        )
+      } else {
+        console.log(`Friend request with ID ${requestId} not found.`)
+      }
     }
   }
 })