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,33 +60,18 @@ export const EditView = (props: Props) => {
   const [draft, setDraft] = createSignal<Shout>(props.shout)
   const [mediaItems, setMediaItems] = createSignal<MediaItem[]>([])
 
-  createEffect(() => setMediaItems(JSON.parse(form.media || '[]')))
+  const updateDraft = async (shout: Shout) => {
-
-  createEffect(
-    on(
-      () => props.shout,
-      async (shout) => {
-        if (shout) {
-          setShoutTopics((shout.topics as Topic[]) || [])
-
-          const stored = getDraftFromLocalStorage(shout.id)
-          if (stored) {
-            setDraft((old) => ({ ...old, ...stored }) as Shout)
-            setForm(stored as ShoutForm)
-          } else {
-            if (!shout.slug) {
-              console.warn(`[EditView] shout has no slug! ${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) {
+      !error && setDraft(loadedShout)
-                console.log(error)
+    }
-              } else {
+  }
-                setDraft(loadedShout)
+
+  createEffect(
+    on(draft, (loadedShout?: Shout) => {
+      if (!loadedShout) return
 
       const draftForm = {
         slug: loadedShout.slug || '',
@@ -104,12 +88,32 @@ export const EditView = (props: Props) => {
         layout: loadedShout.layout
       }
       setForm(draftForm)
+    })
+  )
+
+  createEffect(() => setMediaItems(JSON.parse(form.media || '[]')))
+
+  createEffect(
+    on(
+      () => props.shout,
+      async (shout) => {
+        if (shout) {
+          setShoutTopics((shout.topics as Topic[]) || [])
+
+          const stored = getDraftFromLocalStorage(shout.id)
+          if (stored) {
+            setDraft((old) => ({ ...old, ...stored }) as Shout)
+            setForm(stored as ShoutForm)
+          } else {
+            if (!shout.slug) {
+              console.warn(`[EditView] new shout to store: ${shout}`)
             }
-            }
+
+            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}>
+            <Show when={draft()?.id} keyed>
-                <Panel shoutId={draft()?.id} />
+              {(draftId) => <Panel shoutId={draftId} />}
-              </Show>
             </Show>
           </div>
         </form>