fix: DI nonsense (#4174)

* fix: DI nonsense

* fix: lint

* fix: client try di issue

* fix: injects outside of context

* fix: use .catch

* refactor: convert projects.vue to composition API.

* fix: moderation checklist notif pos change watcher

* fix: lint issues

apps/frontend/src/composables/auth.js

@@ -1,5 +1,3 @@
-import { injectNotificationManager } from '@modrinth/ui'
-
 export const useAuth = async (oldToken = null) => {
 	const auth = useState('auth', () => ({
 		user: null,
@@ -119,23 +117,17 @@ export const getAuthUrl = (provider, redirect = '/dashboard') => {
 
 export const removeAuthProvider = async (provider) => {
 	startLoading()
-	try {
-		const auth = await useAuth()
 
-		await useBaseFetch('auth/provider', {
-			method: 'DELETE',
-			body: {
-				provider,
-			},
-		})
-		await useAuth(auth.value.token)
-	} catch (err) {
-		const { addNotification } = injectNotificationManager()
-		addNotification({
-			title: 'An error occurred',
-			text: err.data.description,
-			type: 'error',
-		})
-	}
+	const auth = await useAuth()
+
+	await useBaseFetch('auth/provider', {
+		method: 'DELETE',
+		body: {
+			provider,
+		},
+	})
+
+	await useAuth(auth.value.token)
+
 	stopLoading()
 }

apps/frontend/src/composables/servers/modrinth-servers.ts

@@ -1,4 +1,4 @@
-import { injectNotificationManager } from '@modrinth/ui'
+import type { AbstractWebNotificationManager } from '@modrinth/ui'
 import type { JWTAuth, ModuleError, ModuleName } from '@modrinth/utils'
 import { ModrinthServerError } from '@modrinth/utils'
 
@@ -13,17 +13,16 @@ import {
 } from './modules/index.ts'
 import { useServersFetch } from './servers-fetch.ts'
 
-export function handleError(err: any) {
-	const { addNotification } = injectNotificationManager()
+export function handleServersError(err: any, notifications: AbstractWebNotificationManager) {
 	if (err instanceof ModrinthServerError && err.v1Error) {
-		addNotification({
+		notifications.addNotification({
 			title: err.v1Error?.context ?? `An error occurred`,
 			type: 'error',
 			text: err.v1Error.description,
 			errorCode: err.v1Error.error,
 		})
 	} else {
-		addNotification({
+		notifications.addNotification({
 			title: 'An error occurred',
 			type: 'error',
 			text: err.message ?? (err.data ? err.data.description : err),

apps/frontend/src/composables/use-client-try.ts

@@ -1,7 +1,11 @@
+import type { AbstractWebNotificationManager } from '@modrinth/ui'
 import { injectNotificationManager } from '@modrinth/ui'
 
 type AsyncFunction<TArgs extends any[], TResult> = (...args: TArgs) => Promise<TResult>
-type ErrorFunction = (err: any) => void | Promise<void>
+type ErrorFunction = (
+	err: any,
+	addNotification: typeof AbstractWebNotificationManager.prototype.addNotification,
+) => void | Promise<void>
 type VoidFunction = () => void | Promise<void>
 
 type useClientTry = <TArgs extends any[], TResult>(
@@ -10,8 +14,7 @@ type useClientTry = <TArgs extends any[], TResult>(
 	onFinish?: VoidFunction,
 ) => (...args: TArgs) => Promise<TResult | undefined>
 
-const defaultOnError: ErrorFunction = (error) => {
-	const { addNotification } = injectNotificationManager()
+const defaultOnError: ErrorFunction = (error, addNotification) => {
 	addNotification({
 		title: 'An error occurred',
 		text: error?.data?.description || error.message || error || 'Unknown error',
@@ -19,15 +22,15 @@ const defaultOnError: ErrorFunction = (error) => {
 	})
 }
 
-export const useClientTry: useClientTry =
-	(fn, onFail = defaultOnError, onFinish) =>
-	async (...args) => {
+export const useClientTry: useClientTry = (fn, onFail = defaultOnError, onFinish) => {
+	const { addNotification } = injectNotificationManager()
+	return async (...args) => {
 		startLoading()
 		try {
 			return await fn(...args)
 		} catch (err) {
 			if (onFail) {
-				await onFail(err)
+				await onFail(err, addNotification)
 			} else {
 				console.error('[CLIENT TRY ERROR]', err)
 			}
@@ -36,3 +39,4 @@ export const useClientTry: useClientTry =
 			stopLoading()
 		}
 	}
+}

apps/frontend/src/composables/user.js

@@ -137,28 +137,10 @@ export const userFollowProject = async (project) => {
 	}
 }
 export const resendVerifyEmail = async () => {
-	// const { injectNotificationManager } = await import("@modrinth/ui");
-	// const { addNotification } = injectNotificationManager();
-
-	startLoading()
-	try {
-		await useBaseFetch('auth/email/resend_verify', {
-			method: 'POST',
-		})
-
-		const auth = await useAuth()
-		addNotification({
-			title: 'Email sent',
-			text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
-			type: 'success',
-		})
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data.description,
-			type: 'error',
-		})
-	}
+	await useBaseFetch('auth/email/resend_verify', {
+		method: 'POST',
+	})
+	await useAuth()
 	stopLoading()
 }