injext client

src/app/api/client.ts

@@ -1,20 +1,21 @@
 import { paths } from './schema.ts'
-import createClient, { Middleware } from 'openapi-fetch'
+import createClient, { Client, Middleware } from 'openapi-fetch'
 import { dispatchMessage } from '../messageBus/messageBus.ts'
 
-const client = createClient<paths>({ baseUrl: import.meta.env.VITE_API_URL })
+export type ApiClient = Client<paths>
 
-const UnauthorizedHandlerMiddleware: Middleware = {
-  async onResponse({ response }) {
-    console.debug(response.headers.getSetCookie())
-    console.debug(response.headers.get('set-cookie'))
-    if (response.status === 401) {
-      dispatchMessage('auth:unauthorized', null)
-    }
-  },
+export function initClient(): ApiClient {
+  const client = createClient<paths>({ baseUrl: import.meta.env.VITE_API_URL })
+  const UnauthorizedHandlerMiddleware: Middleware = {
+    async onResponse({ response }) {
+      console.debug(response.headers.getSetCookie())
+      console.debug(response.headers.get('set-cookie'))
+      if (response.status === 401) {
+        dispatchMessage('auth:unauthorized', null)
+      }
+    },
+  }
+
+  client.use(UnauthorizedHandlerMiddleware)
+  return client
 }
-
-client.use(UnauthorizedHandlerMiddleware)
-
-// todo inject this if necessary
-export default client

src/app/auth/authService.ts

@@ -1,14 +1,14 @@
 import { dispatchMessage } from '../messageBus/messageBus.ts'
-import client from '../api/client.ts'
 import { ProblemDetails } from '../../types'
 import { SignupCode } from './signupCode.ts'
 import { getCookie } from './cookies.ts'
+import { ApiClient } from '../api/client.ts'
 
 export class AuthService {
-  constructor() {}
+  constructor(private readonly client: ApiClient) {}
 
   async login(username: string, password: string) {
-    const res = await client.POST('/auth/login', {
+    const res = await this.client.POST('/auth/login', {
       body: { username, password },
       credentials: 'include',
     })
@@ -21,7 +21,7 @@ export class AuthService {
   }
 
   async signup(username: string, password: string, signupCode: string) {
-    const res = await client.POST('/auth/register', {
+    const res = await this.client.POST('/auth/register', {
       body: { username, password, signupCode, email: null },
       credentials: 'include',
     })
@@ -35,13 +35,13 @@ export class AuthService {
   }
 
   async logout() {
-    await client.DELETE('/auth/session', { credentials: 'include' })
+    await this.client.DELETE('/auth/session', { credentials: 'include' })
 
     dispatchMessage('auth:logged-out', null)
   }
 
   async createSignupCode(code: string, email: string, name: string) {
-    const res = await client.POST('/auth/signup-codes', {
+    const res = await this.client.POST('/auth/signup-codes', {
       body: { code, email, name },
       credentials: 'include',
     })
@@ -53,7 +53,7 @@ export class AuthService {
   }
 
   async listSignupCodes() {
-    const res = await client.GET('/auth/signup-codes', {
+    const res = await this.client.GET('/auth/signup-codes', {
       credentials: 'include',
     })
 
@@ -70,7 +70,7 @@ export class AuthService {
       return null
     }
 
-    await client.GET(`/auth/user/{userId}`, {
+    await this.client.GET(`/auth/user/{userId}`, {
       params: {
         path: { userId },
       },

src/app/feed/posts/postsService.ts

@@ -1,8 +1,8 @@
 import { Post } from './posts.ts'
-import client from '../../api/client.ts'
+import { ApiClient } from '../../api/client.ts'
 
 export class PostsService {
-  constructor() {}
+  constructor(private readonly client: ApiClient) {}
 
   async createNew(
     authorId: string,
@@ -10,7 +10,7 @@ export class PostsService {
     media: CreatePostMedia[],
     isPublic: boolean,
   ): Promise<string> {
-    const response = await client.POST('/posts', {
+    const response = await this.client.POST('/posts', {
       body: {
         authorId,
         content,
@@ -30,7 +30,7 @@ export class PostsService {
   }
 
   async loadPublicFeed(cursor: string | null, amount: number | null): Promise<Post[]> {
-    const response = await client.GET('/posts', {
+    const response = await this.client.GET('/posts', {
       query: { cursor, amount },
       credentials: 'include',
     })
@@ -47,7 +47,7 @@ export class PostsService {
     cursor: string | null,
     amount: number | null,
   ): Promise<Post[]> {
-    const response = await client.GET('/posts', {
+    const response = await this.client.GET('/posts', {
       params: {
         query: { From: cursor ?? undefined, Amount: amount ?? undefined, Author: username },
       },

src/app/media/mediaService.ts

@@ -1,12 +1,12 @@
-import client from '../api/client.ts'
+import { ApiClient } from '../api/client.ts'
 
 export class MediaService {
-  constructor() {}
+  constructor(private readonly client: ApiClient) {}
   async uploadFile(file: File): Promise<{ mediaId: string; url: URL }> {
     const body = new FormData()
     body.append('file', file)
 
-    const response = await client.POST('/media', {
+    const response = await this.client.POST('/media', {
       // @ts-expect-error this endpoint takes multipart/form-data which means passing a FormData as the body
       // maybe openapi-fetch only wants to handle JSON? who knows
       body,

src/initApp.ts

@@ -3,14 +3,17 @@ import { setGlobal } from './app/femtoApp.ts'
 import { PostsService } from './app/feed/posts/postsService.ts'
 import { MediaService } from './app/media/mediaService.ts'
 import { AuthService } from './app/auth/authService.ts'
+import { initClient } from './app/api/client.ts'
 
 export function initApp() {
   setGlobal('version', import.meta.env.VITE_FEMTO_VERSION)
   initUser()
 
-  const postService = new PostsService()
-  const mediaService = new MediaService()
-  const authService = new AuthService()
+  const client = initClient()
+
+  const postService = new PostsService(client)
+  const mediaService = new MediaService(client)
+  const authService = new AuthService(client)
 
   return { postService, mediaService, authService }
 }