draft-fix

src/components/Views/EditView.tsx

@@ -5,7 +5,6 @@ import { EditorComponent } from '~/components/Editor/Editor'
 import { DropArea } from '~/components/_shared/DropArea'
 import { Icon } from '~/components/_shared/Icon'
 import { InviteMembers } from '~/components/_shared/InviteMembers'
-import { Loading } from '~/components/_shared/Loading'
 import { Popover } from '~/components/_shared/Popover'
 import { EditorSwiper } from '~/components/_shared/SolidSwiper'
 import { ShoutForm, useEditorContext } from '~/context/editor'
@@ -61,6 +60,37 @@ export const EditView = (props: Props) => {
   const [draft, setDraft] = createSignal<Shout>(props.shout)
   const [mediaItems, setMediaItems] = createSignal<MediaItem[]>([])
 
+  const updateDraft = async (shout: Shout) => {
+    const resp = await client()?.query(getMyShoutQuery, { shout_id: shout.id })
+    const result = resp?.data?.get_my_shout
+    if (result) {
+      const { shout: loadedShout, error } = result
+      !error && setDraft(loadedShout)
+    }
+  }
+
+  createEffect(
+    on(draft, (loadedShout?: Shout) => {
+      if (!loadedShout) return
+
+      const draftForm = {
+        slug: loadedShout.slug || '',
+        shoutId: loadedShout.id || 0,
+        title: loadedShout.title || '',
+        lead: loadedShout.lead || '',
+        description: loadedShout.description || '',
+        subtitle: loadedShout.subtitle || '',
+        selectedTopics: (shoutTopics() || []) as Topic[],
+        mainTopic: shoutTopics()[0] || '',
+        body: loadedShout.body || '',
+        coverImageUrl: loadedShout.cover || '',
+        media: loadedShout.media || '',
+        layout: loadedShout.layout
+      }
+      setForm(draftForm)
+    })
+  )
+
   createEffect(() => setMediaItems(JSON.parse(form.media || '[]')))
 
   createEffect(
@@ -76,40 +106,14 @@ export const EditView = (props: Props) => {
             setForm(stored as ShoutForm)
           } else {
             if (!shout.slug) {
-              console.warn(`[EditView] shout has no slug! ${shout}`)
+              console.warn(`[EditView] new shout to store: ${shout}`)
             }
 
-            const resp = await client()?.query(getMyShoutQuery, { shout_id: shout.id })
-            const result = resp?.data?.get_my_shout
-
-            if (result) {
-              const { shout: loadedShout, error } = result
-              if (error) {
-                console.log(error)
-              } else {
-                setDraft(loadedShout)
-
-                const draftForm = {
-                  slug: loadedShout.slug || '',
-                  shoutId: loadedShout.id || 0,
-                  title: loadedShout.title || '',
-                  lead: loadedShout.lead || '',
-                  description: loadedShout.description || '',
-                  subtitle: loadedShout.subtitle || '',
-                  selectedTopics: (shoutTopics() || []) as Topic[],
-                  mainTopic: shoutTopics()[0] || '',
-                  body: loadedShout.body || '',
-                  coverImageUrl: loadedShout.cover || '',
-                  media: loadedShout.media || '',
-                  layout: loadedShout.layout
-                }
-                setForm(draftForm)
-              }
-            }
+            await updateDraft(shout)
           }
         }
       },
-      { defer: true }
+      {}
     )
   )
 
@@ -392,15 +396,13 @@ export const EditView = (props: Props) => {
             <div class="row">
               <HeadingActions />
             </div>
-            <Show when={draft()?.id} fallback={<Loading />}>
-              <EditorComponent
-                shoutId={form.shoutId}
-                initialContent={form.body}
-                onChange={(body: string) => handleInputChange('body', body)}
-              />
-              <Show when={draft()?.id}>
-                <Panel shoutId={draft()?.id} />
-              </Show>
+            <EditorComponent
+              shoutId={form.shoutId}
+              initialContent={form.body}
+              onChange={(body: string) => handleInputChange('body', body)}
+            />
+            <Show when={draft()?.id} keyed>
+              {(draftId) => <Panel shoutId={draftId} />}
             </Show>
           </div>
         </form>