I think this every thing expect to todos and more testing

Author: fatfingers23

app/components/Header/AuthModal.client.vue

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

app/composables/atproto/useAtproto.ts

@@ -1,19 +1,4 @@
 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')

app/composables/atproto/useLikePackage.ts

@@ -14,8 +14,7 @@ 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'
+import { togglePackageLike } from '~/utils/atproto/likes'
 
 definePageMeta({
   name: 'package',
@@ -361,6 +360,7 @@ const canonicalUrl = computed(() => {
 })
 
 //atproto
+// TODO: Maybe set this where it's not loaded here every load?
 const { user } = useAtproto()
 
 const authModal = useModal('auth-modal')
@@ -370,16 +370,39 @@ const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.valu
   server: false,
 })
 
-const { mutate: likePackage } = useLikePackage(packageName.value)
-const { mutate: unlikePackage } = useUnlikePackage(packageName.value)
+const isLikeActionPending = ref(false)
 
 const likeAction = async () => {
   if (user.value?.handle == null) {
     authModal.open()
+    return
+  }
+
+  if (isLikeActionPending.value) return
+
+  const currentlyLiked = likesData.value?.userHasLiked ?? false
+  const currentLikes = likesData.value?.totalLikes ?? 0
+
+  // Optimistic update
+  likesData.value = {
+    totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
+    userHasLiked: !currentlyLiked,
+  }
+
+  isLikeActionPending.value = true
+
+  const result = await togglePackageLike(packageName.value, currentlyLiked, user.value?.handle)
+
+  isLikeActionPending.value = false
+
+  if (result.success) {
+    // Update with server response
+    likesData.value = result.data
   } else {
-    const result = likesData.value?.userHasLiked ? await unlikePackage() : await likePackage()
-    if (result?.totalLikes != null) {
-      likesData.value = result
+    // Revert on error
+    likesData.value = {
+      totalLikes: currentLikes,
+      userHasLiked: currentlyLiked,
     }
   }
 }

app/composables/atproto/useUnlikePackage.ts

@@ -1,5 +1,22 @@
 import type { FetchError } from 'ofetch'
-import { authRedirect } from '~/composables/atproto/useAtproto'
+import type { LocationQueryRaw } from 'vue-router'
+
+/**
+ * Redirect user to ATProto authentication
+ */
+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 async function handleAuthError(
   fetchError: FetchError,

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

@@ -0,0 +1,65 @@
+import { FetchError } from 'ofetch'
+import { handleAuthError } from '~/utils/atproto/helpers'
+
+// TODO: I need to share a type with the backend likes service
+export type PackageLikes = {
+  totalLikes: number
+  userHasLiked: boolean
+}
+
+export type LikeResult = { success: true; data: PackageLikes } | { success: false; error: Error }
+
+/**
+ * Like a package via the API
+ */
+export async function likePackage(
+  packageName: string,
+  userHandle?: string | null,
+): Promise<LikeResult> {
+  try {
+    const result = await $fetch<PackageLikes>('/api/social/like', {
+      method: 'POST',
+      body: { packageName },
+    })
+    return { success: true, data: result }
+  } catch (e) {
+    if (e instanceof FetchError) {
+      await handleAuthError(e, userHandle)
+    }
+    return { success: false, error: e as Error }
+  }
+}
+
+/**
+ * Unlike a package via the API
+ */
+export async function unlikePackage(
+  packageName: string,
+  userHandle?: string | null,
+): Promise<LikeResult> {
+  try {
+    const result = await $fetch<PackageLikes>('/api/social/like', {
+      method: 'DELETE',
+      body: { packageName },
+    })
+    return { success: true, data: result }
+  } catch (e) {
+    if (e instanceof FetchError) {
+      await handleAuthError(e, userHandle)
+    }
+    return { success: false, error: e as Error }
+  }
+}
+
+/**
+ * Toggle like status for a package
+ */
+export async function togglePackageLike(
+  packageName: string,
+  currentlyLiked: boolean,
+  userHandle?: string | null,
+): Promise<LikeResult> {
+  return currentlyLiked
+    ? unlikePackage(packageName, userHandle)
+    : likePackage(packageName, userHandle)
+}