refactor: removing useAsyncData for tanstack query (#5262)

* refactor: most places with useAsyncData replaced with tanstack query

* refactor report list and report view

* refactor organization page to use tanstack query

* fix types

* refactor collection page and include proper loading state

* fix followed projects proper loading state

* fix 404 handling

* fix organization loading and 404 states

* pnpm prepr

* refactor: remove useAsyncData on newsletter button

* refactor: remove useAsyncData on auth globals fetch

* refactor: settings/billing/index.vue to useQuery instead of useAsyncData

* refactor: user page to remove useAsyncData

* pnpm prepr

* fix reports pages

* fix notifications page

* fix billing page cannot read properties of null and prop warnings

* fix refresh causing 404 by removing useBaseFetch and use api-client

* fix stale data after removing organization from project

* pnpm prepr

* fix news erroring in build

* fix: project page loads header only after content

* fix: user page tanstack problems (start on migrating away from useBaseFetch)

* fix: start swapping useBaseFetch usages to api-client

* Revert "fix: start swapping useBaseFetch usages to api-client"

This reverts commit 3df3fab11d535159132b1288dd7cacc38282b553.

* fix: remove debug logging

* fix: lint

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

apps/frontend/src/helpers/platform-notifications.ts

@@ -133,13 +133,13 @@ export function groupNotifications(notifications: PlatformNotification[]): Platf
 		const current = notifications[i]
 		const next = notifications[i + 1]
 		if (current.body && i < notifications.length - 1 && isSimilar(current, next)) {
-			current.grouped_notifs = [next]
+			const groupedNotif = { ...current, grouped_notifs: [next] }
 			let j = i + 2
 			while (j < notifications.length && isSimilar(current, notifications[j])) {
-				current.grouped_notifs.push(notifications[j])
+				groupedNotif.grouped_notifs.push(notifications[j])
 				j++
 			}
-			grouped.push(current)
+			grouped.push(groupedNotif)
 			i = j - 1
 		} else {
 			grouped.push(current)

apps/frontend/src/helpers/threads.js

@@ -2,17 +2,31 @@ export function addReportMessage(thread, report) {
 	if (!thread || !report) {
 		return thread
 	}
-	if (
-		!thread.members.some((user) => {
-			return user.id === report.reporterUser.id
-		})
-	) {
-		thread.members.push(report.reporterUser)
+
+	const reporterId = report.reporterUser?.id ?? report.reporter
+	if (!reporterId) {
+		return thread
 	}
-	if (!thread.messages.some((message) => message.id === 'original')) {
-		thread.messages.push({
+
+	const members = Array.isArray(thread.members) ? [...thread.members] : []
+	const messages = Array.isArray(thread.messages) ? [...thread.messages] : []
+
+	let changed = false
+
+	if (
+		!members.some((user) => {
+			return user?.id === reporterId
+		}) &&
+		report.reporterUser
+	) {
+		members.push(report.reporterUser)
+		changed = true
+	}
+
+	if (!messages.some((message) => message?.id === 'original')) {
+		messages.push({
 			id: 'original',
-			author_id: report.reporterUser.id,
+			author_id: reporterId,
 			body: {
 				type: 'text',
 				body: report.body,
@@ -21,6 +35,16 @@ export function addReportMessage(thread, report) {
 			},
 			created: report.created,
 		})
+		changed = true
+	}
+
+	if (!changed) {
+		return thread
+	}
+
+	return {
+		...thread,
+		members,
+		messages,
 	}
-	return thread
 }