chore: refactor notifications component to use ts and setup

src/components/notifications/notifications.vue

@@ -46,60 +46,59 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import {computed, onMounted, onUnmounted, ref} from 'vue'
 
 import NotificationService from '@/services/notification'
 import User from '@/components/misc/user.vue'
 import names from '@/models/constants/notificationNames.json'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {mapState} from 'vuex'
+import {useStore} from 'vuex'
+import {useRouter} from 'vue-router'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
-export default defineComponent({
-	name: 'notifications',
-	components: {User},
-	data() {
-		return {
-			notificationService: new NotificationService(),
-			allNotifications: [],
-			showNotifications: false,
-			interval: null,
-		}
-	},
-	mounted() {
-		this.loadNotifications()
-		document.addEventListener('click', this.hidePopup)
-		this.interval = setInterval(this.loadNotifications, LOAD_NOTIFICATIONS_INTERVAL)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hidePopup)
-		clearInterval(this.interval)
-	},
-	computed: {
-		unreadNotifications() {
-			return this.notifications.filter(n => n.readAt === null).length
-		},
-		notifications() {
-			return this.allNotifications ? this.allNotifications.filter(n => n.name !== '') : []
-		},
-		...mapState({
-			userInfo: state => state.auth.info,
-		}),
-	},
-	methods: {
-		hidePopup(e) {
-			if (this.showNotifications) {
-				closeWhenClickedOutside(e, this.$refs.popup, () => this.showNotifications = false)
-			}
-		},
-		async loadNotifications() {
+const store = useStore()
+const router = useRouter()
+
+const allNotifications = ref([])
+const showNotifications = ref(false)
+const popup = ref(null)
+
+const unreadNotifications = computed(() => {
+	return notifications.value.filter(n => n.readAt === null).length
+})
+const notifications = computed(() => {
+	return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
+})
+const userInfo = computed(() => store.state.auth.info)
+
+let interval: number
+
+onMounted(() => {
+	loadNotifications()
+	document.addEventListener('click', hidePopup)
+	interval = setInterval(loadNotifications, LOAD_NOTIFICATIONS_INTERVAL)
+})
+
+onUnmounted(() => {
+	document.removeEventListener('click', hidePopup)
+	clearInterval(interval)
+})
+
+async function loadNotifications() {
 	// We're recreating the notification service here to make sure it uses the latest api user token
 	const notificationService = new NotificationService()
-			this.allNotifications = await notificationService.getAll()
-		},
-		to(n, index) {
+	allNotifications.value = await notificationService.getAll()
+}
+
+function hidePopup(e) {
+	if (showNotifications.value) {
+		closeWhenClickedOutside(e, popup.value, () => showNotifications.value = false)
+	}
+}
+
+function to(n, index) {
 	const to = {
 		name: '',
 		params: {},
@@ -126,15 +125,14 @@ export default defineComponent({
 
 	return async () => {
 		if (to.name !== '') {
-					this.$router.push(to)
+			router.push(to)
 		}
 
 		n.read = true
-				this.allNotifications[index] = await this.notificationService.update(n)
+		const notificationService = new NotificationService()
+		allNotifications.value[index] = await notificationService.update(n)
 	}
-		},
-	},
-})
+}
 </script>
 
 <style lang="scss" scoped>