Notification.vue

<template>
  <el-dropdown class="notification">
    <el-button type="primary">
      <font-awesome-icon icon="fa-solid fa-envelope" />
      Notification<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="offer in offers" :key="offer.offerId">
          <router-link
            :to="
              '/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
            "
          >
            You have a offer matched (click to check details)
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item v-for="offer in offers2" :key="offer.offerId">
          <router-link
            :to="
              '/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
            "
          >
            You have a wishlist matched (click to check details)
          </router-link>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { OfferNotification } from "@/models/OfferNotification";
import * as NotificationService from "@/services/NotificationService";
import { useRoute } from "vue-router";
import { onMounted } from "vue";

const route = useRoute();

function getCookie(userId: string) {
  const value = `; ${document.cookie}`;
  const parts: string[] = value.split(`; ${userId}=`);
  if (parts.length === 2) return parts?.pop()?.split(";").shift();
}

const offers = ref([] as OfferNotification[]);
const offers2 = ref([] as OfferNotification[]);
async function fetchNotification(userId: number) {
  const response = await NotificationService.getNotificationFromServerWithID(
    userId
  );
  // const response2 =
  //   await NotificationService.getNotificationwishFromServerWithID(userId);
  // console.log(response2);
  offers.value = response.data;
  // offers2.value = response2.data;
}

async function fetchNotificationwish(userId: number) {
  const response2 =
    await NotificationService.getNotificationwishFromServerWithID(userId);
  offers2.value = response2.data;
}

watch(
  () => route.name,
  (values) => {
    const userIdString: string = getCookie("userId");
    let userIdNumber = +userIdString;
    fetchNotification(userIdNumber);
    fetchNotificationwish(userIdNumber);
  },
  { immediate: true }
);
</script>

<style scoped>
.notification {
  margin: auto;
  justify-content: space-between;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>