working update profile endpoint, util, and cache update

Author: zeucapua

app/pages/profile/[handle]/index.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
+import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 import { normalizeSearchParam } from '#shared/utils/url'
 
-const route = useRoute('/profile/[handle]')
-const router = useRouter()
-
 type LikesResult = {
   records: {
     value: {
@@ -13,6 +11,8 @@ type LikesResult = {
   }[]
 }
 
+const route = useRoute('/profile/[handle]')
+const router = useRouter()
 const handle = computed(() => route.params.handle)
 
 const { data: profile }: { data?: NPMXProfile } = useFetch(
@@ -23,6 +23,57 @@ const { data: profile }: { data?: NPMXProfile } = useFetch(
   },
 )
 
+const { user } = useAtproto()
+const isEditing = ref(false)
+const displayNameInput = ref()
+const descriptionInput = ref()
+const websiteInput = ref()
+const isUpdateProfileActionPending = ref(false)
+
+watchEffect(() => {
+  if (isEditing) {
+    if (profile) {
+      displayNameInput.value = profile.value.displayName
+      descriptionInput.value = profile.value.description
+      websiteInput.value = profile.value.website
+    }
+  }
+})
+
+async function updateProfile() {
+  if (!user.value.handle || !displayNameInput.value) {
+    return
+  }
+
+  isUpdateProfileActionPending.value = true
+  const currentProfile = profile.value
+
+  // optimistic update
+  profile.value = {
+    displayName: displayNameInput.value,
+    description: descriptionInput.value,
+    website: websiteInput.value,
+  }
+
+  try {
+    const result = await updateProfileUtil(handle, {
+      displayName: displayNameInput.value,
+      description: descriptionInput.value,
+      website: websiteInput.value,
+    })
+
+    if (!result.success) {
+      profile.value = currentProfile
+    }
+
+    isUpdateProfileActionPending.value = false
+    isEditing.value = false
+  } catch (e) {
+    profile.value = currentProfile
+    isUpdateProfileActionPending.value = false
+  }
+}
+
 const { data: likesData, status } = await useProfileLikes(handle)
 
 useSeoMeta({
@@ -43,7 +94,49 @@ defineOgImageComponent('Default', {
   <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
-      <div class="flex flex-col flex-wrap gap-4">
+      <!-- Editing Profile -->
+      <div v-if="isEditing" class="flex flex-col flex-wrap gap-4">
+        <button @click="isEditing = false">Cancel</button>
+        <button @click.prevent="updateProfile" :disabled="isUpdateProfileActionPending">
+          Save
+        </button>
+        <label for="displayName" class="text-sm flex flex-col gap-2">
+          Display Name
+          <input
+            required
+            name="displayName"
+            type="text"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            v-model="displayNameInput"
+          />
+        </label>
+        <label for="description" class="text-sm flex flex-col gap-2">
+          Description
+          <input
+            name="description"
+            type="text"
+            placeholder="No description"
+            v-model="descriptionInput"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          />
+        </label>
+        <div class="flex gap-4 items-center">
+          <h2>@{{ handle }}</h2>
+          <div class="link-subtle font-mono text-sm inline-flex items-center gap-1.5">
+            <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
+            <input
+              name="website"
+              type=""
+              v-model="websiteInput"
+              class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-3 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Display Profile -->
+      <div v-else class="flex flex-col flex-wrap gap-4">
+        <button v-if="user?.handle === handle" @click="isEditing = true">Edit</button>
         <h1 class="font-mono text-2xl sm:text-3xl font-medium">{{ profile.displayName }}</h1>
         <p v-if="profile.description">{{ profile.description }}</p>
         <div class="flex gap-4">

app/utils/atproto/profile.ts

@@ -0,0 +1,36 @@
+import { FetchError } from 'ofetch'
+import { handleAuthError } from './helpers'
+
+export type UpdateProfileResult = {
+  success: boolean
+  error?: Error
+}
+
+/**
+ * Update an NPMX Profile via the API
+ */
+export async function updateProfile(
+  userHandle: string,
+  {
+    displayName,
+    description,
+    website,
+  }: {
+    displayName: string
+    description?: string
+    website?: string
+  },
+): Promise<UpdateProfileResult> {
+  try {
+    await $fetch<string>(`/api/social/profile/${userHandle}`, {
+      method: 'PUT',
+      body: { displayName, description, website },
+    })
+    return { success: true }
+  } catch (e) {
+    if (e instanceof FetchError) {
+      await handleAuthError(e, userHandle)
+    }
+    return { success: false, error: e as Error }
+  }
+}

lexicons/dev/npmx/actor/profile.json

@@ -7,6 +7,7 @@
       "type": "record",
       "record": {
         "type": "object",
+        "required": ["displayName"],
         "properties": {
           "avatar": {
             "type": "blob",

server/api/social/profile/[identifier]/index.put.ts

@@ -0,0 +1,46 @@
+import { parse } from 'valibot'
+import { Client } from '@atproto/lex'
+import * as dev from '#shared/types/lexicons/dev'
+import type { NPMXProfile } from '~~/shared/types/social'
+import { ProfileEditBodySchema } from '~~/shared/schemas/social'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInUsersDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInUsersDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  //Checks if the user has a scope to like packages
+  await throwOnMissingOAuthScope(oAuthSession, LIKES_SCOPE)
+
+  const body = parse(ProfileEditBodySchema, await readBody(event))
+  const client = new Client(oAuthSession)
+
+  const profile = dev.npmx.actor.profile.$build({
+    displayName: body.displayName,
+    ...(body.description
+      ? {
+          description: body.description,
+        }
+      : {}),
+    ...(body.website
+      ? {
+          website: body.website as `${string}:${string}`,
+        }
+      : {}),
+  })
+
+  const result = await client.put(dev.npmx.actor.profile, profile, { rkey: 'self' })
+  if (!result) {
+    throw createError({
+      status: 500,
+      message: 'Failed to update the profile',
+    })
+  }
+
+  const profileUtil = new ProfileUtils()
+  await profileUtil.updateProfileCache(loggedInUsersDid, body as NPMXProfile)
+
+  return result.validationStatus
+})

server/utils/atproto/utils/profile.ts

@@ -55,7 +55,7 @@ export class ProfileUtils {
    * @param handle
    * @returns
    */
-  async getProfile(handle: string) {
+  async getProfile(handle: string): Promise<NPMXProfile | undefined> {
     const profileKey = CACHE_PROFILE_KEY(handle)
     const cachedProfile = await this.cache.get<NPMXProfile>(profileKey)
 
@@ -80,4 +80,11 @@ export class ProfileUtils {
 
     return profile
   }
+
+  async updateProfileCache(handle: string, profile: NPMXProfile): Promise<NPMXProfile | undefined> {
+    const miniDoc = await this.slingshotMiniDoc(handle)
+    const profileKey = CACHE_PROFILE_KEY(miniDoc.handle)
+    await this.cache.set(profileKey, profile, CACHE_MAX_AGE)
+    return profile
+  }
 }

shared/schemas/social.ts

@@ -9,3 +9,12 @@ export const PackageLikeBodySchema = v.object({
 })
 
 export type PackageLikeBody = v.InferOutput<typeof PackageLikeBodySchema>
+
+// TODO: add 'avatar'
+export const ProfileEditBodySchema = v.object({
+  displayName: v.string(),
+  website: v.optional(v.string()),
+  description: v.optional(v.string()),
+})
+
+export type ProfileEditBody = v.InferOutput<typeof ProfileEditBodySchema>