moved useComposables

Author: fatfingers23

app/components/Header/AccountMenu.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useAtproto } from '~/composables/atproto/useAtproto'
 import { useModal } from '~/composables/useModal'
 
 const {

app/components/Header/AuthModal.client.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { authRedirect } from '~/composables/useAtproto'
+import { authRedirect, useAtproto } from '~/composables/atproto/useAtproto'
 
 const handleInput = shallowRef('')
 

app/components/Header/MobileMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { useAtproto } from '~/composables/atproto/useAtproto'
 
 const isOpen = defineModel<boolean>('open', { default: false })
 

app/composables/atproto/useAtproto.ts

@@ -0,0 +1,30 @@
+import type { UserSession } from '#shared/schemas/userSession'
+import type { LocationQueryRaw } from 'vue-router'
+
+export async function authRedirect(identifier: string, create: boolean = false) {
+  let query: LocationQueryRaw = { handle: identifier }
+  if (create) {
+    query = { ...query, create: 'true' }
+  }
+  await navigateTo(
+    {
+      path: '/api/auth/atproto',
+      query,
+    },
+    { external: true },
+  )
+}
+
+export function useAtproto() {
+  const { data: user, pending, clear } = useFetch<UserSession | null>('/api/auth/session')
+
+  async function logout() {
+    await $fetch('/api/auth/session', {
+      method: 'delete',
+    })
+
+    clear()
+  }
+
+  return { user, pending, logout }
+}

app/composables/atproto/useLikePackage.ts

@@ -0,0 +1,34 @@
+import { FetchError } from 'ofetch'
+import { useAtproto } from '~/composables/atproto/useAtproto'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+export function useLikePackage(packageName: string) {
+  const { user } = useAtproto()
+  const data = ref<PackageLikes | null>(null)
+  const error = ref<Error | null>(null)
+  const pending = ref(false)
+
+  const mutate = async () => {
+    pending.value = true
+    error.value = null
+
+    try {
+      const result = await $fetch<PackageLikes>('/api/auth/social/like', {
+        method: 'POST',
+        body: { packageName },
+      })
+
+      data.value = result
+      return result
+    } catch (e) {
+      if (e instanceof FetchError) {
+        await handleAuthError(e, user.value?.handle)
+      }
+      error.value = e as Error
+    } finally {
+      pending.value = false
+    }
+  }
+
+  return { data, error, pending, mutate }
+}

app/composables/atproto/useUnlikePackage.ts

@@ -0,0 +1,34 @@
+import { FetchError } from 'ofetch'
+import { useAtproto } from '~/composables/atproto/useAtproto'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+export function useUnlikePackage(packageName: string) {
+  const { user } = useAtproto()
+  const data = ref<PackageLikes | null>(null)
+  const error = ref<Error | null>(null)
+  const pending = ref(false)
+
+  const mutate = async () => {
+    pending.value = true
+    error.value = null
+
+    try {
+      const result = await $fetch<PackageLikes>('/api/auth/social/like', {
+        method: 'DELETE',
+        body: { packageName },
+      })
+
+      data.value = result
+      return result
+    } catch (e) {
+      if (e instanceof FetchError) {
+        await handleAuthError(e, user.value?.handle)
+      }
+      error.value = e as Error
+    } finally {
+      pending.value = false
+    }
+  }
+
+  return { data, error, pending, mutate }
+}

app/composables/useAtproto.ts

@@ -13,6 +13,9 @@ import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
 import { NuxtLink } from '#components'
 import { useModal } from '~/composables/useModal'
+import { useAtproto } from '~/composables/atproto/useAtproto'
+import { useLikePackage } from '~/composables/atproto/useLikePackage'
+import { useUnlikePackage } from '~/composables/atproto/useUnlikePackage'
 
 definePageMeta({
   name: 'package',

app/pages/package/[...package].vue

@@ -0,0 +1,13 @@
+import type { FetchError } from 'ofetch'
+import { authRedirect } from '~/composables/atproto/useAtproto'
+
+export async function handleAuthError(
+  fetchError: FetchError,
+  userHandle?: string | null,
+): Promise<never> {
+  const errorMessage = fetchError?.data?.message
+  if (errorMessage === ERROR_NEED_REAUTH && userHandle) {
+    await authRedirect(userHandle)
+  }
+  throw fetchError
+}