diff --git a/src/app/submit/_page.tsx b/src/app/submit/_page.tsx index 2713347e5..cf999f017 100644 --- a/src/app/submit/_page.tsx +++ b/src/app/submit/_page.tsx @@ -80,7 +80,7 @@ function Submit({ path, draftId, username, permlink, searchParams }: Props) { const [tags, setTags] = useState([]); const [thumbnails, setThumbnails] = useState([]); const [selectedThumbnail, setSelectedThumbnail, removeThumbnail] = useLocalStorage( - PREFIX + "draft_selected_image" + PREFIX + "_s_st" ); const [preview, setPreview] = useState({ title: "", @@ -215,17 +215,41 @@ function Submit({ path, draftId, username, permlink, searchParams }: Props) { } }, [activeUser, beneficiaries, previousActiveUser, setBeneficiaries, threeSpeakManager]); + // In case of creating new post then should save to local draft useEffect(() => { - setLocalDraft({ tags, title, body, description }); - }, [tags, title, body, setLocalDraft, description]); + if (editingEntry === null) { + setLocalDraft({ tags, title, body, description }); + } + }, [tags, title, body, setLocalDraft, description, editingEntry]); useEffect(() => { - updatePreview(); + if (_updateTimer) { + clearTimeout(_updateTimer); + _updateTimer = null; + } + + // Not sure why we are using setTimeOut(), but it causes some odd behavior and sets input value to preview.body when you try to delete/cancel text + _updateTimer = setTimeout(() => { + setPreview({ title, tags, body, description }); + }, 50); }, [title, body, tags]); useEffect(() => { threeSpeakManager.checkBodyForVideos(body); - }, [body]); + + // Whenever body changed then need to re-validate thumbnails + const { thumbnails } = extractMetaData(body); + const existingImages = editingEntry?.json_metadata.image ?? []; + const newThumbnails = thumbnails ? [...existingImages, ...thumbnails] : existingImages; + setThumbnails(Array.from(new Set(newThumbnails))); + + // In case of thumbnail isn't part of the thumbnails then should be reset to first one + if (!selectedThumbnail || !thumbnails?.includes(selectedThumbnail)) { + setSelectedThumbnail(newThumbnails[0]); + } + + setIsDraftEmpty(!Boolean(title?.length || tags?.length || body?.length)); + }, [body, selectedThumbnail]); useEffect(() => { if (searchParams && typeof searchParams?.cat === "string" && searchParams.cat.length > 0) { @@ -233,26 +257,6 @@ function Submit({ path, draftId, username, permlink, searchParams }: Props) { } }, [searchParams]); - const updatePreview = (): void => { - if (_updateTimer) { - clearTimeout(_updateTimer); - _updateTimer = null; - } - - // Not sure why we are using setTimeOut(), but it causes some odd behavior and sets input value to preview.body when you try to delete/cancel text - _updateTimer = setTimeout(() => { - const { thumbnails } = extractMetaData(body); - setPreview({ title, tags, body, description }); - const existingImages = editingEntry?.json_metadata.image ?? []; - const newThumbnails = thumbnails ? [...existingImages, ...thumbnails] : existingImages; - setThumbnails(Array.from(new Set(newThumbnails))); - if (editingEntry === null) { - setLocalDraft({ title, tags, body, description }); - } - setIsDraftEmpty(!Boolean(title?.length || tags?.length || body?.length)); - }, 50); - }; - const clear = () => { setTitle(""); setTags([]);