feels so close

Author: fatfingers23

app/composables/useAtproto.ts

@@ -68,3 +68,19 @@ export function useLikePackage(packageName: string) {
 
   return { data, error, pending, mutate }
 }
+
+export function useUnlikePackage(packageName: string) {
+  const { user } = useAtproto()
+
+  const { data, error, pending, execute } = useFetch<PackageLikes>('/api/auth/social/like', {
+    method: 'DELETE',
+    body: { packageName },
+    immediate: false,
+    watch: false,
+    onResponseError: async ({ error: e }) => {
+      await handleAuthError(e, user.value?.handle)
+    },
+  })
+
+  return { data, error, pending, mutate: execute }
+}

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

@@ -363,13 +363,14 @@ const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.valu
 })
 
 const { mutate: likePackage } = useLikePackage(packageName.value)
+const { mutate: unlikePackage } = useUnlikePackage(packageName.value)
 
 const likeAction = async () => {
   if (user.value?.handle == null) {
     authModal.open()
   } else {
-    const result = await likePackage()
-    if (result?.totalLikes) {
+    const result = likesData.value?.userHasLiked ? await unlikePackage() : await likePackage()
+    if (result?.totalLikes != null) {
       likesData.value = result
     }
   }

server/api/auth/session.get.ts

@@ -7,12 +7,5 @@ export default eventHandlerWithOAuthSession(async (event, oAuthSession, serverSe
     return null
   }
 
-  if (oAuthSession) {
-    let tokenInfo = await oAuthSession.getTokenInfo()
-    console.log('scopes', tokenInfo.scope)
-
-    // return null
-  }
-
   return result.output
 })

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

@@ -0,0 +1,49 @@
+import { Client } from '@atproto/lex'
+import * as dev from '#shared/types/lexicons/dev'
+import { LIKES_SCOPE } from '~~/shared/utils/constants'
+import { checkOAuthScope } from '~~/server/utils/atproto/oauth'
+
+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 getTheUsersLikedRecord = await likesUtil.getTheUsersLikedRecord(
+    body.packageName,
+    loggedInUsersDid,
+  )
+  if (getTheUsersLikedRecord) {
+    //Checks if the user has a scope to like packages
+    await checkOAuthScope(oAuthSession, LIKES_SCOPE)
+    const client = new Client(oAuthSession)
+
+    var result = await client.delete(dev.npmx.feed.like, {
+      rkey: getTheUsersLikedRecord.rkey,
+    })
+    console.log(result)
+    return await likesUtil.unlikeAPackageAndReturnLikes(body.packageName, loggedInUsersDid)
+  }
+})

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

@@ -1,8 +1,8 @@
 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'
-import { ERROR_NEED_REAUTH, LIKES_SCOPE } from '~~/shared/utils/constants'
+import { LIKES_SCOPE } from '~~/shared/utils/constants'
+import { checkOAuthScope } from '~~/server/utils/atproto/oauth'
 
 export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
   const loggedInUsersDid = oAuthSession?.did.toString()
@@ -41,28 +41,21 @@ export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
   }
 
   //Checks if the user has a scope to like packages
-  const tokenInfo = await oAuthSession.getTokenInfo()
-  if (!tokenInfo.scope.includes(LIKES_SCOPE)) {
-    throw createError({
-      status: 403,
-      message: ERROR_NEED_REAUTH,
-    })
-  }
+  await checkOAuthScope(oAuthSession, LIKES_SCOPE)
 
   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(dev.npmx.feed.like, like)
   if (!result) {
     throw createError({
       status: 500,
-      message: 'Failed to create like',
+      message: 'Failed to create a like',
     })
   }
 

server/utils/atproto/oauth.ts

@@ -8,8 +8,7 @@ import { LIKES_SCOPE, UNSET_NUXT_SESSION_PASSWORD } from '#shared/utils/constant
 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'
+// TODO: If you add writing a new record you will need to add a scope for it
 export const scope = `atproto ${LIKES_SCOPE}`
 
 export function getOauthClientMetadata() {
@@ -61,6 +60,22 @@ async function getOAuthSession(event: H3Event): Promise<OAuthSession | undefined
   return await client.restore(currentSession.tokenSet.sub)
 }
 
+/**
+ * As we add new scopes we need to check if the client has the ability to use it.
+ * If not need to let the client know to redirect the user to the PDS to upgrade their scopes.
+ * @param oAuthSession - The current OAuth session from the event
+ * @param requiredScopes - The required scope you are checking if you can use
+ */
+export async function checkOAuthScope(oAuthSession: OAuthSession, requiredScopes: string) {
+  const tokenInfo = await oAuthSession.getTokenInfo()
+  if (!tokenInfo.scope.includes(requiredScopes)) {
+    throw createError({
+      status: 403,
+      message: ERROR_NEED_REAUTH,
+    })
+  }
+}
+
 export function eventHandlerWithOAuthSession<T extends EventHandlerRequest, D>(
   handler: EventHandlerWithOAuthSession<T, D>,
 ) {

server/utils/atproto/utils/likes.ts

@@ -1,5 +1,6 @@
 import { getCacheAdatper } from '../../cache'
 import { $nsid as likeNsid } from '#shared/types/lexicons/dev/npmx/feed/like.defs'
+import type { Backlink } from '~~/shared/utils/constellation'
 
 /**
  * Likes for a npm package on npmx
@@ -40,6 +41,8 @@ export class PackageLikesUtils {
       '.subjectRef',
       //Limit doesn't matter here since we are just counting the total likes
       1,
+      undefined,
+      0,
     )
     return totalLinks.total
   }
@@ -60,6 +63,7 @@ export class PackageLikesUtils {
       undefined,
       false,
       [[usersDid]],
+      0,
     )
     //TODO: need to double check this logic
     return userLikes.total > 0
@@ -149,4 +153,55 @@ export class PackageLikesUtils {
       userHasLiked: true,
     } as PackageLikes
   }
+
+  /**
+   * We need to get the record the user has that they liked the package
+   * @param packageName
+   * @param usersDid
+   * @returns
+   */
+  async getTheUsersLikedRecord(
+    packageName: string,
+    usersDid: string,
+  ): Promise<Backlink | undefined> {
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+    const { data: userLikes } = await this.constellation.getBackLinks(
+      subjectRef,
+      likeNsid,
+      'subjectRef',
+      //Limit doesn't matter here since we are just counting the total likes
+      1,
+      undefined,
+      false,
+      [[usersDid]],
+      0,
+    )
+    if (userLikes.total > 0 && userLikes.records.length > 0) {
+      return userLikes.records[0]
+    }
+  }
+
+  /**
+   * At this point you should have checked if the user had a record for the package on the network and removed it before updating the cache
+   * @param packageName
+   * @param usersDid
+   * @returns
+   */
+  async unlikeAPackageAndReturnLikes(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 (!totalLikes) {
+      totalLikes = await this.constellationLikes(subjectRef)
+    }
+    totalLikes = totalLikes - 1
+    await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
+
+    await this.cache.delete(CACHE_USER_LIKES_KEY(packageName, usersDid))
+    return {
+      totalLikes: totalLikes,
+      userHasLiked: false,
+    } as PackageLikes
+  }
 }