feat(blog): editing

src/pages/write/action.tsx

@@ -1,7 +1,7 @@
 import { NDKContextType } from 'contexts/NDKContext'
 import { ActionFunctionArgs, redirect } from 'react-router-dom'
 import { getBlogPageRoute } from 'routes'
-import { BlogFormErrors, BlogEventSubmitForm } from 'types'
+import { BlogFormErrors, BlogEventSubmitForm, BlogEventEditForm } from 'types'
 import {
   isReachable,
   isValidImageUrl,
@@ -19,7 +19,7 @@ import { store } from 'store'
 
 export const writeRouteAction =
   (ndkContext: NDKContextType) =>
-  async ({ request }: ActionFunctionArgs) => {
+  async ({ params, request }: ActionFunctionArgs) => {
     // Get the current state
     const userState = store.getState().user
     let hexPubkey: string
@@ -47,7 +47,9 @@ export const writeRouteAction =
     const formData = await request.formData()
 
     // Parse the the data
-    const formSubmit = parseFormData<BlogEventSubmitForm>(formData)
+    const formSubmit = parseFormData<BlogEventSubmitForm | BlogEventEditForm>(
+      formData
+    )
 
     // Check for errors
     const formErrors = await validateFormData(formSubmit)
@@ -59,9 +61,23 @@ export const writeRouteAction =
     const turndownService = new TurndownService()
     const content = turndownService.turndown(formSubmit.content!)
 
-    const uuid = uuidv4()
+    // Check if we are editing or this is a new blog
+    const { naddr } = params
+    const isEditing =
+      naddr && request.method === 'PUT' && isEditForm(formSubmit)
+    const formEdit = isEditing ? formSubmit : undefined
+
     const currentTimeStamp = now()
 
+    // Get the existing edited fields or new ones
+    const uuid = isEditing && formEdit?.dTag ? formSubmit.dTag : uuidv4()
+    const rTag =
+      isEditing && formEdit?.rTag ? formEdit.rTag : window.location.host
+    const published_at =
+      isEditing && formEdit?.published_at
+        ? formEdit.published_at
+        : currentTimeStamp
+
     const aTag = `${kinds.LongFormArticle}:${hexPubkey}:${uuid}`
     const tTags = formSubmit
       .tags!.toLowerCase()
@@ -76,8 +92,8 @@ export const writeRouteAction =
       tags: [
         ['d', uuid],
         ['a', aTag],
-        ['r', window.location.host],
+        ['r', rTag],
-        ['published_at', currentTimeStamp.toString()],
+        ['published_at', published_at.toString()],
         ['title', formSubmit.title!],
         ['image', formSubmit.image!],
         ['summary', formSubmit.summary!],
@@ -160,3 +176,9 @@ const validateFormData = async (
 
   return errors
 }
+
+function isEditForm(
+  form: Partial<BlogEventSubmitForm | BlogEventEditForm>
+): form is BlogEventEditForm {
+  return (form as BlogEventEditForm).dTag !== undefined
+}

src/pages/write/index.tsx

@@ -68,7 +68,7 @@ export const WritePage = () => {
               {navigation.state === 'submitting' && (
                 <LoadingSpinner desc='Publishing blog to relays' />
               )}
-              <Form className='IBMSMSMBS_Write' method='post'>
+              <Form className='IBMSMSMBS_Write' method={blog ? 'put' : 'post'}>
                 <InputFieldUncontrolled
                   label='Title'
                   name='title'
@@ -115,6 +115,20 @@ export const WritePage = () => {
                   name='nsfw'
                   defaultChecked={blog?.nsfw}
                 />
+                {typeof blog?.dTag !== 'undefined' && (
+                  <input name='dTag' hidden value={blog.dTag} readOnly />
+                )}
+                {typeof blog?.rTag !== 'undefined' && (
+                  <input name='rTag' hidden value={blog.rTag} readOnly />
+                )}
+                {typeof blog?.published_at !== 'undefined' && (
+                  <input
+                    name='published_at'
+                    hidden
+                    value={blog.published_at}
+                    readOnly
+                  />
+                )}
                 <div className='IBMSMSMBS_WriteAction'>
                   <button
                     className='btn btnMain'

src/routes/index.tsx

@@ -107,7 +107,7 @@ export const routerWithNdkContext = (context: NDKContextType) =>
         },
         {
           path: appRoutes.blogEdit,
-          element: <WritePage />,
+          element: <WritePage key='edit' />,
           loader: blogRouteLoader(context),
           action: writeRouteAction(context)
         },
@@ -125,7 +125,7 @@ export const routerWithNdkContext = (context: NDKContextType) =>
         },
         {
           path: appRoutes.write,
-          element: <WritePage />,
+          element: <WritePage key='write' />,
           action: writeRouteAction(context)
         },
         {

src/types/blog.ts

@@ -22,6 +22,12 @@ export interface BlogEventSubmitForm extends Omit<BlogForm, 'nsfw'> {
   nsfw: string
 }
 
+export interface BlogEventEditForm extends BlogEventSubmitForm {
+  dTag: string
+  rTag: string
+  published_at: string
+}
+
 export interface BlogFormErrors extends Partial<BlogEventSubmitForm> {}
 
 export interface BlogCardDetails extends BlogDetails {