I think that's liking

Author: fatfingers23

app/composables/useAtproto.ts

@@ -1,4 +1,5 @@
 import type { UserSession } from '#shared/schemas/userSession'
+import type { PackageLikes } from '~~/server/utils/atproto/utils/likes'
 
 export function useAtproto() {
   const { data: user, pending, clear } = useFetch<UserSession | null>('/api/auth/session')
@@ -13,3 +14,30 @@ export function useAtproto() {
 
   return { user, pending, logout }
 }
+
+export function useLikePackage(packageName: string) {
+  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('/api/auth/social/like', {
+        method: 'POST',
+        body: { packageName },
+      })
+      data.value = result
+      return result
+    } catch (e) {
+      error.value = e as Error
+      throw e
+    } finally {
+      pending.value = false
+    }
+  }
+
+  return { data, error, pending, mutate }
+}

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

@@ -356,20 +356,20 @@ const canonicalUrl = computed(() => {
 const { user } = useAtproto()
 const showAuthModal = ref(false)
 
-const { data: likesData } = useFetch(() => `/api/likes/${packageName.value}`, {
-  default: () => ({ totalPackageLikes: 0, userHasLiked: false }),
+const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.value}`, {
+  default: () => ({ totalLikes: 0, userHasLiked: false }),
 })
 
-// const { mutate: likePackage } = useLikePackage(subjectRef)
+const { mutate: likePackage } = useLikePackage(packageName.value)
 
 const likeAction = async () => {
   if (user.value?.handle == null) {
     showAuthModal.value = true
   } else {
-    // const result = await likePackage()
-    // if (result?.likes) {
-    //   likesData.value = result.likes
-    // }
+    const result = await likePackage()
+    if (result?.totalLikes) {
+      likesData.value = result
+    }
   }
 }
 
@@ -537,9 +537,7 @@ defineOgImageComponent('Package', {
               class="w-4 h-4"
               aria-hidden="true"
             />
-            <span>{{
-              formatCompactNumber(likesData?.totalPackageLikes ?? 0, { decimals: 1 })
-            }}</span>
+            <span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
           </button>
 
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
@@ -1113,6 +1111,7 @@ defineOgImageComponent('Package', {
       </p>
       <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
+    <AuthModal v-model:open="showAuthModal" />
   </main>
 </template>
 

server/api/auth/social/like.post.ts

@@ -0,0 +1,60 @@
+import { Client } from '@atproto/lex'
+import { main as likeRecord } from '#shared/types/lexicons/dev/npmx/feed/like.defs'
+import * as dev from '#shared/types/lexicons/dev'
+import type { UriString } from '@atproto/lex'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInUsersDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInUsersDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  const body = await readBody<{ packageName: string }>(event)
+
+  if (!body.packageName) {
+    throw createError({
+      status: 400,
+      message: 'packageName is required',
+    })
+  }
+
+  const cachedFetch = event.context.cachedFetch
+  if (!cachedFetch) {
+    // TODO: Probably needs to add in a normal fetch if not provided
+    // but ideally should not happen
+    throw createError({
+      status: 500,
+      message: 'cachedFetch not provided in context',
+    })
+  }
+
+  const likesUtil = new PackageLikesUtils(cachedFetch)
+
+  const hasLiked = await likesUtil.hasTheUserLikedThePackage(body.packageName, loggedInUsersDid)
+  if (hasLiked) {
+    throw createError({
+      status: 400,
+      message: 'User has already liked the package',
+    })
+  }
+
+  const subjectRef = PACKAGE_SUBJECT_REF(body.packageName)
+  const client = new Client(oAuthSession)
+
+  const like = dev.npmx.feed.like.$build({
+    createdAt: new Date().toISOString(),
+    //TODO test this?
+    subjectRef: subjectRef as UriString,
+  })
+
+  const result = await client.create(likeRecord, like)
+  if (!result) {
+    throw createError({
+      status: 500,
+      message: 'Failed to create like',
+    })
+  }
+
+  return await likesUtil.likeAPackageAndRetunLikes(body.packageName, loggedInUsersDid)
+})

server/api/likes/[...pkg].get.ts server/api/social/likes/[...pkg].get.tsserver/api/likes/[...pkg].get.ts renamed to server/api/social/likes/[...pkg].get.ts

@@ -16,6 +16,6 @@ export default eventHandlerWithOAuthSession(async (event, oAuthSession, _) => {
     })
   }
 
-  const likesUtlil = new PackageLikesUtils(cachedFetch)
-  return await likesUtlil.getLikes(packageName, oAuthSession?.did.toString())
+  const likesUtil = new PackageLikesUtils(cachedFetch)
+  return await likesUtil.getLikes(packageName, oAuthSession?.did.toString())
 })

server/utils/atproto/oauth.ts

@@ -9,7 +9,7 @@ import { OAuthMetadataSchema } from '#shared/schemas/oauth'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
 // TODO: limit scope as features gets added. atproto just allows login so no scary login screen till we have scopes
-export const scope = 'atproto'
+export const scope = 'atproto repo:dev.npmx.feed.like'
 
 export function getOauthClientMetadata() {
   const dev = import.meta.dev

server/utils/atproto/utils/likes.ts

@@ -94,16 +94,18 @@ export class PackageLikesUtils {
         userHasLiked = userCachedLike
       } else {
         userHasLiked = await this.constellationUserHasLiked(subjectRef, usersDid)
-        await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), true, CACHE_MAX_AGE)
+        await this.cache.set(
+          CACHE_USER_LIKES_KEY(packageName, usersDid),
+          userHasLiked,
+          CACHE_MAX_AGE,
+        )
       }
     }
 
-    const packageLikes = {
-      totalPackageLikes: totalLikes,
+    return {
+      totalLikes: totalLikes,
       userHasLiked,
-    }
-
-    return packageLikes
+    } as PackageLikes
   }
 
   /**
@@ -132,19 +134,19 @@ export class PackageLikesUtils {
    */
   async likeAPackageAndRetunLikes(packageName: string, usersDid: string): Promise<PackageLikes> {
     const totalLikesKey = CACHE_PACKAGE_TOTAL_KEY(packageName)
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+
     let totalLikes = await this.cache.get<number>(totalLikesKey)
-    // If a cahce entry was found for total likes increase by 1
-    if (totalLikes !== undefined) {
-      await this.cache.set(totalLikesKey, totalLikes + 1, CACHE_MAX_AGE)
-    } else {
-      const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+    if (!totalLikes) {
       totalLikes = await this.constellationLikes(subjectRef)
+      totalLikes = totalLikes + 1
+      await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
     }
     // We already know the user has not liked the package so set in the cache
     await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), true, CACHE_MAX_AGE)
     return {
       totalLikes: totalLikes,
       userHasLiked: true,
-    }
+    } as PackageLikes
   }
 }