merge

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 {

vue/conf/src/components/activity/ActivityCenter.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import GameInvites from './GameInvites.vue'
 import FriendRequests from './FriendRequests.vue'
 import ChannelInvitations from './ChannelInvitations.vue'
 import BlockedUsers from './BlockedUsers.vue'
 import { ref, onMounted } from 'vue'
 
-const activePanel = ref('FriendRequests')
+const activePanel = ref('GameInvites')
 
 const setActivePanel = (value: string) => {
   activePanel.value = value
@@ -13,6 +14,13 @@ const setActivePanel = (value: string) => {
 <template>
   <nav class="activityCenter">
     <ul>
+      <li
+        @click="setActivePanel('GameInvites')"
+        class="navButton"
+        :class="{ selected: activePanel === 'GameInvites' }"
+      >
+        Game Invites
+      </li>
       <li
         @click="setActivePanel('FriendRequests')"
         class="navButton"
@@ -35,6 +43,7 @@ const setActivePanel = (value: string) => {
         Blocked Users
       </li>
     </ul>
+    <GameInvites v-show="activePanel === 'GameInvites'" />
     <FriendRequests v-show="activePanel === 'FriendRequests'" />
     <ChannelInvitations v-show="activePanel === 'ChannelInvitations'" />
     <BlockedUsers v-show="activePanel === 'BlockedUsers'" />

vue/conf/src/components/activity/BlockedUsers.vue

@@ -1,35 +1,124 @@
 <template>
   <div class="friend-requests">
     <ScrollViewer :maxHeight="'75vh'" :paddingRight="'.5rem'">
-      <div v-for="(user, index) in dummyUserData" :key="index">
-        <BlockedUsersItem :username="user.username" />
+      <div v-if="blockedUsers && blockedUsers.length">
+        <div v-for="(user, index) in blockedUsers" :key="index">
+          <RequestItem
+            :username="user.targetUser.username"
+            :requestId="user.targetUserId"
+            :targetUserId="user.targetUserId"
+            :showAcceptRequest="false"
+            :showRejectRequest="false"
+            :showBlockUser="false"
+            :showUnblockUser="true"
+            @unblock-user="handleUnblockUser"
+          />
+        </div>
+      </div>
+      <div v-else>
+        <p class="empty-list-info">You have not blocked any users</p>
       </div>
     </ScrollViewer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import BlockedUsersItem from './BlockedUsersItem.vue'
+import { onMounted, computed, ref, watch } from 'vue'
+import RequestItem from './RequestItem.vue'
 
 import ScrollViewer from '../utils/ScrollViewer.vue'
 import { useUserStore } from '../../stores/userInfo'
+import { Socket } from 'socket.io-client'
 import { useNotificationStore } from '../../stores/notification'
+import { useFriendRequestStore } from '../../stores/friendRequests'
+import { connectWebSocket } from '../../websocket'
+import type { BlockEntryI } from '../../model/users/blocked-users.interface'
+import type { BlockUserDto } from '../../model/block-user.dto'
+import type { UserI } from '../../model/user.interface'
 
 const notificationStore = useNotificationStore()
 const userStore = useUserStore()
+const socket = ref<Socket | null>(null)
+const userId = computed(() => userStore.userId)
+const blockedUsers = ref<BlockEntryI[]>([])
+const friendRequestStore = useFriendRequestStore()
+const friendRequests = computed(() => friendRequestStore.friendRequests)
 const username = computed(() => userStore.username)
-const props = defineProps({
-  channelId: Number
+
+const initSocket = () => {
+  const accessToken = localStorage.getItem('ponggame') ?? ''
+  socket.value = connectWebSocket('http://localhost:3000', accessToken)
+}
+
+onMounted(() => {
+  initSocket()
+
+  setBlockedUsersData()
 })
 
+watch(
+  friendRequests,
+  (newVal, oldVal) => {
+    setBlockedUsersData()
+  },
+  { deep: true }
+)
+
+const handleUnblockUser = async (requestId: number, targetUserId: number, username: string) => {
+  if (username.trim() === '') {
+    notificationStore.showNotification('Error: user name cannot be empty', false)
+    return
+  }
+
+  try {
+    const blockUserDto: BlockUserDto = {
+      userId: userId.value as number,
+      targetUserId: targetUserId as number
+    }
+    const response = await fetch('http://localhost:3000/api/blockedUsers', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(blockUserDto)
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! ${response.status}: ${response.statusText}`)
+    }
+    notificationStore.showNotification('User ' + username + ' was unblocked', true)
+    setBlockedUsersData()
+  } catch (error: any) {
+    notificationStore.showNotification('Error: ' + error.message, false)
+  }
+}
+
 type User = {
   username: string
+  requestId: number
 }
 
 const dummyUserData: User[] = Array.from({ length: 9 }, (_, i) => ({
-  username: `Thomas ${i + 1}`
+  username: `Thomas ${i + 1}`,
+  requestId: i
 }))
+
+const setBlockedUsersData = async () => {
+  try {
+    const response = await fetch(`http://localhost:3000/api/blockedUsers?userId=${userId.value}`)
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! ${response.status}: ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    blockedUsers.value = data
+    console.log(data)
+    console.log(blockedUsers.value)
+  } catch (error: any) {
+    notificationStore.showNotification(`Error` + error.message, false)
+  }
+}
 </script>
 
 <style></style>

vue/conf/src/components/activity/FriendRequests.vue

@@ -3,11 +3,18 @@
     <ScrollViewer :maxHeight="'75vh'" :paddingRight="'.5rem'">
       <div v-if="friendRequests && friendRequests.length">
         <div v-for="request in friendRequests" :key="request.id">
-          <FriendRequestsItem
+          <RequestItem
             v-if="isValidRequest(request)"
             :username="request.friend.username"
             :requestId="request.id"
-            @remove-friend-request="handleRemoveFriendRequest"
+            :targetUserId="request.friend.id"
+            :showAcceptRequest="true"
+            :showRejectRequest="true"
+            :showBlockUser="true"
+            :showUnblockUser="false"
+            @reject-request="handleRejectFriendRequest"
+            @accept-request="handleAcceptFriendRequest"
+            @block-user="handleBlockUser"
           />
         </div>
       </div>
@@ -19,20 +26,37 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import FriendRequestsItem from './FriendRequestsItem.vue'
-
+import { onMounted, computed, ref } from 'vue'
+import RequestItem from './RequestItem.vue'
+import { Socket } from 'socket.io-client'
+import { connectWebSocket } from '../../websocket'
 import ScrollViewer from '../utils/ScrollViewer.vue'
 import { useUserStore } from '../../stores/userInfo'
 import { useNotificationStore } from '../../stores/notification'
 import { useFriendRequestStore } from '../../stores/friendRequests'
+import type { FriendshipI } from '../../model/friendship/friendship.interface'
+import type { ErrorI } from '../../model/error.interface'
+import type { BlockUserDto } from '../../model/block-user.dto'
+import type { UserI } from '../../model/user.interface'
 
 const friendRequestStore = useFriendRequestStore()
 const friendRequests = computed(() => friendRequestStore.friendRequests)
 
 const notificationStore = useNotificationStore()
 const userStore = useUserStore()
 const username = computed(() => userStore.username)
+const userId = computed(() => userStore.userId)
+const socket = ref<Socket | null>(null)
+
+const initSocket = () => {
+  const accessToken = localStorage.getItem('ponggame') ?? ''
+  socket.value = connectWebSocket('http://localhost:3000', accessToken)
+}
+
+onMounted(() => {
+  initSocket()
+})
+
 const props = defineProps({
   channelId: Number
 })
@@ -41,9 +65,67 @@ const isValidRequest = (request: any) => {
   return request && request.friend && request.friend.username
 }
 
-const handleRemoveFriendRequest = (requestId: number) => {
+const handleAcceptFriendRequest = (requestId: number, username: string) => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+
+  socket.value.emit('acceptFriendRequest', requestId, (response: FriendshipI | ErrorI) => {
+    if ('error' in response) {
+      notificationStore.showNotification(response.error, false)
+    } else {
+      notificationStore.showNotification(`You accepted ${username}'s friend request`, true)
+    }
+  })
+
   friendRequestStore.removeFriendRequestById(requestId)
 }
+
+const handleRejectFriendRequest = (requestId: number, username: string) => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+  socket.value.emit('rejectFriendRequest', requestId, (response: FriendshipI | ErrorI) => {
+    if ('error' in response) {
+      notificationStore.showNotification(response.error, false)
+    } else {
+      notificationStore.showNotification(`You rejected ${username}'s friend request`, true)
+    }
+  })
+
+  friendRequestStore.removeFriendRequestById(requestId)
+}
+
+const handleBlockUser = async (requestId: number, targetUserId: number, username: string) => {
+  if (username !== '') {
+    try {
+      const blockUserDto: BlockUserDto = {
+        userId: userId.value,
+        targetUserId: targetUserId as number
+      }
+
+      const response = await fetch('http://localhost:3000/api/blockedUsers', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(blockUserDto)
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! ${response.status}: ${response.statusText}`)
+      }
+      handleRejectFriendRequest(requestId, username)
+      notificationStore.showNotification('User ' + username + ' was successfully blocked', true)
+    } catch (error: any) {
+      notificationStore.showNotification('Error: ' + error.message, false)
+    }
+  }
+
+  notificationStore.showNotification(`You banned ${username}`, true)
+}
 </script>
 
 <style>