From 758eccc659a2622113ca1715ec213d47d97e393d Mon Sep 17 00:00:00 2001 From: InfiniteTF Date: Thu, 11 Feb 2021 04:33:16 +0100 Subject: [PATCH] Fix scene edit state resetting when scene is updated (#1112) * Fix organized click resetting scene form state * Fix state resetting for images/galleries * Fix favoriting a performer resetting edit state --- .../src/components/Changelog/versions/v050.md | 3 +- .../GalleryDetails/GalleryEditPanel.tsx | 114 ++++++------- .../Images/ImageDetails/ImageEditPanel.tsx | 49 +++--- .../Performers/PerformerDetails/Performer.tsx | 14 +- .../PerformerDetailsPanel.tsx | 77 +++------ .../Scenes/SceneDetails/SceneEditPanel.tsx | 151 ++++++++---------- 6 files changed, 172 insertions(+), 236 deletions(-) diff --git a/ui/v2.5/src/components/Changelog/versions/v050.md b/ui/v2.5/src/components/Changelog/versions/v050.md index ef0b30551..e3fe1ad3e 100644 --- a/ui/v2.5/src/components/Changelog/versions/v050.md +++ b/ui/v2.5/src/components/Changelog/versions/v050.md @@ -29,10 +29,11 @@ * Support configurable number of threads for scanning and generation. ### 🐛 Bug fixes +* Fix edit data being lost when clicking the O-Counter, Organized or Favorite buttons. * Exclude media in `generated` directory from the library. * Prevent cover image from being incorrectly regenerated when a scene file's hash changes. * Fix version check sometimes giving incorrect results. -* Fixed stash potentially deleting `downloads` directory when first run. +* Fix stash potentially deleting `downloads` directory when first run. * Fix sprite generation when generated path has special characters. * Prevent studio from being set as its own parent * Fixed performer scraper select overlapping search results diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx index cd26f6b2b..5f515fb0b 100644 --- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx @@ -39,18 +39,29 @@ interface IExistingProps { export const GalleryEditPanel: React.FC< IProps & (INewProps | IExistingProps) -> = (props) => { +> = ({ gallery, isNew, isVisible, onDelete }) => { const Toast = useToast(); const history = useHistory(); - const [title, setTitle] = useState(); - const [details, setDetails] = useState(); - const [url, setUrl] = useState(); - const [date, setDate] = useState(); - const [rating, setRating] = useState(); - const [studioId, setStudioId] = useState(); - const [performerIds, setPerformerIds] = useState(); - const [tagIds, setTagIds] = useState(); - const [scenes, setScenes] = useState<{ id: string; title: string }[]>([]); + const [title, setTitle] = useState(gallery?.title ?? ""); + const [details, setDetails] = useState(gallery?.details ?? ""); + const [url, setUrl] = useState(gallery?.url ?? ""); + const [date, setDate] = useState(gallery?.date ?? ""); + const [rating, setRating] = useState(gallery?.rating ?? NaN); + const [studioId, setStudioId] = useState( + gallery?.studio?.id ?? undefined + ); + const [performerIds, setPerformerIds] = useState( + gallery?.performers.map((p) => p.id) ?? [] + ); + const [tagIds, setTagIds] = useState( + gallery?.tags.map((t) => t.id) ?? [] + ); + const [scenes, setScenes] = useState<{ id: string; title: string }[]>( + gallery?.scenes.map((s) => ({ + id: s.id, + title: s.title ?? TextUtils.fileNameFromPath(s.path ?? ""), + })) ?? [] + ); const Scrapers = useListGalleryScrapers(); @@ -60,18 +71,18 @@ export const GalleryEditPanel: React.FC< ] = useState(); // Network state - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(false); const [createGallery] = useGalleryCreate(); const [updateGallery] = useGalleryUpdate(); useEffect(() => { - if (props.isVisible) { + if (isVisible) { Mousetrap.bind("s s", () => { onSave(); }); Mousetrap.bind("d d", () => { - props.onDelete(); + onDelete(); }); // numeric keypresses get caught by jwplayer, so blur the element @@ -107,34 +118,9 @@ export const GalleryEditPanel: React.FC< } }); - function updateGalleryEditState(state?: GQL.GalleryDataFragment) { - const perfIds = state?.performers?.map((performer) => performer.id); - const tIds = state?.tags ? state?.tags.map((tag) => tag.id) : undefined; - - setTitle(state?.title ?? undefined); - setDetails(state?.details ?? undefined); - setUrl(state?.url ?? undefined); - setDate(state?.date ?? undefined); - setRating(state?.rating === null ? NaN : state?.rating); - setStudioId(state?.studio?.id ?? undefined); - setPerformerIds(perfIds); - setTagIds(tIds); - setScenes( - (state?.scenes ?? []).map((s) => ({ - id: s.id, - title: s.title ?? TextUtils.fileNameFromPath(s.path ?? ""), - })) - ); - } - - useEffect(() => { - updateGalleryEditState(props.gallery); - setIsLoading(false); - }, [props.gallery]); - function getGalleryInput() { return { - id: props.isNew ? undefined : props.gallery.id, + id: isNew ? undefined : gallery?.id ?? "", title: title ?? "", details, url, @@ -150,7 +136,7 @@ export const GalleryEditPanel: React.FC< async function onSave() { setIsLoading(true); try { - if (props.isNew) { + if (isNew) { const result = await createGallery({ variables: { input: getGalleryInput(), @@ -176,9 +162,9 @@ export const GalleryEditPanel: React.FC< setIsLoading(false); } - function onScrapeDialogClosed(gallery?: GQL.ScrapedGalleryDataFragment) { - if (gallery) { - updateGalleryFromScrapedGallery(gallery); + function onScrapeDialogClosed(data?: GQL.ScrapedGalleryDataFragment) { + if (data) { + updateGalleryFromScrapedGallery(data); } setScrapedGallery(undefined); } @@ -194,8 +180,8 @@ export const GalleryEditPanel: React.FC< { - onScrapeDialogClosed(gallery); + onClose={(data) => { + onScrapeDialogClosed(data); }} /> ); @@ -208,30 +194,30 @@ export const GalleryEditPanel: React.FC< } function updateGalleryFromScrapedGallery( - gallery: GQL.ScrapedGalleryDataFragment + galleryData: GQL.ScrapedGalleryDataFragment ) { - if (gallery.title) { - setTitle(gallery.title); + if (galleryData.title) { + setTitle(galleryData.title); } - if (gallery.details) { - setDetails(gallery.details); + if (galleryData.details) { + setDetails(galleryData.details); } - if (gallery.date) { - setDate(gallery.date); + if (galleryData.date) { + setDate(galleryData.date); } - if (gallery.url) { - setUrl(gallery.url); + if (galleryData.url) { + setUrl(galleryData.url); } - if (gallery.studio && gallery.studio.stored_id) { - setStudioId(gallery.studio.stored_id); + if (galleryData.studio?.stored_id) { + setStudioId(galleryData.studio.stored_id); } - if (gallery.performers && gallery.performers.length > 0) { - const idPerfs = gallery.performers.filter((p) => { + if (galleryData.performers?.length) { + const idPerfs = galleryData.performers.filter((p) => { return p.stored_id !== undefined && p.stored_id !== null; }); @@ -241,13 +227,13 @@ export const GalleryEditPanel: React.FC< } } - if (gallery?.tags?.length) { - const idTags = gallery.tags.filter((p) => { - return p.stored_id !== undefined && p.stored_id !== null; + if (galleryData?.tags?.length) { + const idTags = galleryData.tags.filter((t) => { + return t.stored_id !== undefined && t.stored_id !== null; }); if (idTags.length > 0) { - const newIds = idTags.map((p) => p.stored_id); + const newIds = idTags.map((t) => t.stored_id); setTagIds(newIds as string[]); } } @@ -299,7 +285,7 @@ export const GalleryEditPanel: React.FC< @@ -343,7 +329,7 @@ export const GalleryEditPanel: React.FC< setRating(value)} + onSetRating={(value) => setRating(value ?? NaN)} /> diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx index 84c1d0ef2..811bea075 100644 --- a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx +++ b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx @@ -19,26 +19,32 @@ interface IProps { onDelete: () => void; } -export const ImageEditPanel: React.FC = (props: IProps) => { +export const ImageEditPanel: React.FC = ({ + image, + isVisible, + onDelete, +}) => { const Toast = useToast(); - const [title, setTitle] = useState(); - const [rating, setRating] = useState(); - const [studioId, setStudioId] = useState(); - const [performerIds, setPerformerIds] = useState(); - const [tagIds, setTagIds] = useState(); + const [title, setTitle] = useState(image?.title ?? ""); + const [rating, setRating] = useState(image.rating ?? NaN); + const [studioId, setStudioId] = useState(image.studio?.id ?? ""); + const [performerIds, setPerformerIds] = useState( + image.performers.map((p) => p.id) + ); + const [tagIds, setTagIds] = useState(image.tags.map((t) => t.id)); // Network state - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(false); const [updateImage] = useImageUpdate(); useEffect(() => { - if (props.isVisible) { + if (isVisible) { Mousetrap.bind("s s", () => { onSave(); }); Mousetrap.bind("d d", () => { - props.onDelete(); + onDelete(); }); // numeric keypresses get caught by jwplayer, so blur the element @@ -74,26 +80,9 @@ export const ImageEditPanel: React.FC = (props: IProps) => { } }); - function updateImageEditState(state: Partial) { - const perfIds = state.performers?.map((performer) => performer.id); - const tIds = state.tags ? state.tags.map((tag) => tag.id) : undefined; - - setTitle(state.title ?? undefined); - setRating(state.rating === null ? NaN : state.rating); - // setGalleryId(state?.gallery?.id ?? undefined); - setStudioId(state?.studio?.id ?? undefined); - setPerformerIds(perfIds); - setTagIds(tIds); - } - - useEffect(() => { - updateImageEditState(props.image); - setIsLoading(false); - }, [props.image]); - function getImageInput(): GQL.ImageUpdateInput { return { - id: props.image.id, + id: image.id, title, rating: rating ?? null, studio_id: studioId ?? null, @@ -131,7 +120,7 @@ export const ImageEditPanel: React.FC = (props: IProps) => { @@ -152,7 +141,7 @@ export const ImageEditPanel: React.FC = (props: IProps) => { setRating(value)} + onSetRating={(value) => setRating(value ?? NaN)} /> @@ -164,7 +153,7 @@ export const ImageEditPanel: React.FC = (props: IProps) => { - setStudioId(items.length > 0 ? items[0]?.id : undefined) + setStudioId(items.length > 0 ? items[0]?.id : "") } ids={studioId ? [studioId] : []} /> diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index 34b0b0310..1bc42fd1e 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -223,10 +223,16 @@ export const Performer: React.FC = () => { } function setFavorite(v: boolean) { - onSave({ - id: performer.id, - favorite: v, - }); + if (performer.id) { + updatePerformer({ + variables: { + input: { + id: performer.id, + favorite: v, + }, + }, + }); + } } const renderIcons = () => ( diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx index ff207f034..1a5182e1a 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx @@ -68,24 +68,32 @@ export const PerformerDetailsPanel: React.FC = ({ // Editing performer state const [image, setImage] = useState(); - const [name, setName] = useState(); - const [aliases, setAliases] = useState(); - const [favorite, setFavorite] = useState(); - const [birthdate, setBirthdate] = useState(); - const [ethnicity, setEthnicity] = useState(); - const [country, setCountry] = useState(); - const [eyeColor, setEyeColor] = useState(); - const [height, setHeight] = useState(); - const [measurements, setMeasurements] = useState(); - const [fakeTits, setFakeTits] = useState(); - const [careerLength, setCareerLength] = useState(); - const [tattoos, setTattoos] = useState(); - const [piercings, setPiercings] = useState(); - const [url, setUrl] = useState(); - const [twitter, setTwitter] = useState(); - const [instagram, setInstagram] = useState(); - const [gender, setGender] = useState(undefined); - const [stashIDs, setStashIDs] = useState([]); + const [name, setName] = useState(performer?.name ?? ""); + const [aliases, setAliases] = useState(performer.aliases ?? ""); + const [birthdate, setBirthdate] = useState(performer.birthdate ?? ""); + const [ethnicity, setEthnicity] = useState(performer.ethnicity ?? ""); + const [country, setCountry] = useState(performer.country ?? ""); + const [eyeColor, setEyeColor] = useState(performer.eye_color ?? ""); + const [height, setHeight] = useState(performer.height ?? ""); + const [measurements, setMeasurements] = useState( + performer.measurements ?? "" + ); + const [fakeTits, setFakeTits] = useState(performer.fake_tits ?? ""); + const [careerLength, setCareerLength] = useState( + performer.career_length ?? "" + ); + const [tattoos, setTattoos] = useState(performer.tattoos ?? ""); + const [piercings, setPiercings] = useState(performer.piercings ?? ""); + const [url, setUrl] = useState(performer.url ?? ""); + const [twitter, setTwitter] = useState(performer.twitter ?? ""); + const [instagram, setInstagram] = useState(performer.instagram ?? ""); + const [gender, setGender] = useState( + performer.gender ?? undefined + ); + const [stashIDs, setStashIDs] = useState( + performer.stash_ids ?? [] + ); + const favorite = performer.favorite ?? false; // Network state const [isLoading, setIsLoading] = useState(false); @@ -101,35 +109,6 @@ export const PerformerDetailsPanel: React.FC = ({ const imageEncoding = ImageUtils.usePasteImage(onImageLoad, isEditing); - function updatePerformerEditState( - state: Partial - ) { - if ((state as GQL.PerformerDataFragment).favorite !== undefined) { - setFavorite((state as GQL.PerformerDataFragment).favorite); - } - setName(state.name ?? undefined); - setAliases(state.aliases ?? undefined); - setBirthdate(state.birthdate ?? undefined); - setEthnicity(state.ethnicity ?? undefined); - setCountry(state.country ?? undefined); - setEyeColor(state.eye_color ?? undefined); - setHeight(state.height ?? undefined); - setMeasurements(state.measurements ?? undefined); - setFakeTits(state.fake_tits ?? undefined); - setCareerLength(state.career_length ?? undefined); - setTattoos(state.tattoos ?? undefined); - setPiercings(state.piercings ?? undefined); - setUrl(state.url ?? undefined); - setTwitter(state.twitter ?? undefined); - setInstagram(state.instagram ?? undefined); - setGender( - genderToString((state as GQL.PerformerDataFragment).gender ?? undefined) - ); - if ((state as GQL.PerformerDataFragment).stash_ids !== undefined) { - setStashIDs((state as GQL.PerformerDataFragment).stash_ids); - } - } - function translateScrapedGender(scrapedGender?: string) { if (!scrapedGender) { return; @@ -245,10 +224,6 @@ export const PerformerDetailsPanel: React.FC = ({ } }); - useEffect(() => { - if (!isNew) updatePerformerEditState(performer); - }, [isNew, performer]); - useEffect(() => { if (onImageChange) { onImageChange(image); diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx index c9d6a75a4..6d65b7252 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx @@ -40,26 +40,43 @@ interface IProps { onDelete: () => void; } -export const SceneEditPanel: React.FC = (props: IProps) => { +export const SceneEditPanel: React.FC = ({ + scene, + isVisible, + onDelete, +}) => { const Toast = useToast(); - const [title, setTitle] = useState(); - const [details, setDetails] = useState(); - const [url, setUrl] = useState(); - const [date, setDate] = useState(); - const [rating, setRating] = useState(); - const [galleries, setGalleries] = useState<{ id: string; title: string }[]>( - [] + const [title, setTitle] = useState(scene.title ?? ""); + const [details, setDetails] = useState(scene.details ?? ""); + const [url, setUrl] = useState(scene.url ?? ""); + const [date, setDate] = useState(scene.date ?? ""); + const [rating, setRating] = useState( + scene.rating ?? undefined + ); + const [galleries, setGalleries] = useState<{ id: string; title: string }[]>( + scene.galleries.map((g) => ({ + id: g.id, + title: g.title ?? TextUtils.fileNameFromPath(g.path ?? ""), + })) + ); + const [studioId, setStudioId] = useState( + scene.studio?.id + ); + const [performerIds, setPerformerIds] = useState( + scene.performers.map((p) => p.id) + ); + const [movieIds, setMovieIds] = useState( + scene.movies.map((m) => m.movie.id) ); - const [studioId, setStudioId] = useState(); - const [performerIds, setPerformerIds] = useState(); - const [movieIds, setMovieIds] = useState(undefined); const [ movieSceneIndexes, setMovieSceneIndexes, - ] = useState(new Map()); - const [tagIds, setTagIds] = useState(); + ] = useState( + new Map(scene.movies.map((m) => [m.movie.id, m.scene_index ?? undefined])) + ); + const [tagIds, setTagIds] = useState(scene.tags.map((t) => t.id)); const [coverImage, setCoverImage] = useState(); - const [stashIDs, setStashIDs] = useState([]); + const [stashIDs, setStashIDs] = useState(scene.stash_ids); const Scrapers = useListSceneScrapers(); const [queryableScrapers, setQueryableScrapers] = useState([]); @@ -71,17 +88,17 @@ export const SceneEditPanel: React.FC = (props: IProps) => { const stashConfig = useConfiguration(); // Network state - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(false); const [updateScene] = useSceneUpdate(); useEffect(() => { - if (props.isVisible) { + if (isVisible) { Mousetrap.bind("s s", () => { onSave(); }); Mousetrap.bind("d d", () => { - props.onDelete(); + onDelete(); }); // numeric keypresses get caught by jwplayer, so blur the element @@ -141,7 +158,7 @@ export const SceneEditPanel: React.FC = (props: IProps) => { }); if (!changed) { - movieSceneIndexes.forEach((v, id) => { + movieSceneIndexes.forEach((_v, id) => { if (!newMap.has(id)) { // id was removed changed = true; @@ -155,49 +172,11 @@ export const SceneEditPanel: React.FC = (props: IProps) => { } }, [movieIds, movieSceneIndexes]); - function updateSceneEditState(state: Partial) { - const perfIds = state.performers?.map((performer) => performer.id); - const tIds = state.tags ? state.tags.map((tag) => tag.id) : undefined; - const moviIds = state.movies - ? state.movies.map((sceneMovie) => sceneMovie.movie.id) - : undefined; - const movieSceneIdx: MovieSceneIndexMap = new Map(); - if (state.movies) { - state.movies.forEach((m) => { - movieSceneIdx.set(m.movie.id, m.scene_index ?? undefined); - }); - } - - setTitle(state.title ?? undefined); - setDetails(state.details ?? undefined); - setUrl(state.url ?? undefined); - setDate(state.date ?? undefined); - setRating(state.rating === null ? NaN : state.rating); - setGalleries( - (state?.galleries ?? []).map((g) => ({ - id: g.id, - title: g.title ?? TextUtils.fileNameFromPath(g.path ?? ""), - })) - ); - setStudioId(state?.studio?.id ?? undefined); - setMovieIds(moviIds); - setMovieSceneIndexes(movieSceneIdx); - setPerformerIds(perfIds); - setTagIds(tIds); - setStashIDs(state?.stash_ids ?? []); - } - - useEffect(() => { - updateSceneEditState(props.scene); - setCoverImagePreview(props.scene?.paths?.screenshot ?? undefined); - setIsLoading(false); - }, [props.scene]); - const imageEncoding = ImageUtils.usePasteImage(onImageLoad, true); function getSceneInput(): GQL.SceneUpdateInput { return { - id: props.scene.id, + id: scene.id, title, details, url, @@ -284,7 +263,7 @@ export const SceneEditPanel: React.FC = (props: IProps) => { async function onScrapeStashBoxClicked(stashBoxIndex: number) { setIsLoading(true); try { - const result = await queryStashBoxScene(stashBoxIndex, props.scene.id); + const result = await queryStashBoxScene(stashBoxIndex, scene.id); if (!result.data || !result.data.queryStashBoxScene) { return; } @@ -339,9 +318,9 @@ export const SceneEditPanel: React.FC = (props: IProps) => { } } - function onScrapeDialogClosed(scene?: GQL.ScrapedSceneDataFragment) { - if (scene) { - updateSceneFromScrapedScene(scene); + function onScrapeDialogClosed(sceneData?: GQL.ScrapedSceneDataFragment) { + if (sceneData) { + updateSceneFromScrapedScene(sceneData); } setScrapedScene(undefined); } @@ -353,16 +332,14 @@ export const SceneEditPanel: React.FC = (props: IProps) => { const currentScene = getSceneInput(); if (!currentScene.cover_image) { - currentScene.cover_image = props.scene.paths.screenshot; + currentScene.cover_image = scene.paths.screenshot; } return ( { - onScrapeDialogClosed(scene); - }} + onClose={(s) => onScrapeDialogClosed(s)} /> ); } @@ -444,29 +421,31 @@ export const SceneEditPanel: React.FC = (props: IProps) => { ); } - function updateSceneFromScrapedScene(scene: GQL.ScrapedSceneDataFragment) { - if (scene.title) { - setTitle(scene.title); + function updateSceneFromScrapedScene( + updatedScene: GQL.ScrapedSceneDataFragment + ) { + if (updatedScene.title) { + setTitle(updatedScene.title); } - if (scene.details) { - setDetails(scene.details); + if (updatedScene.details) { + setDetails(updatedScene.details); } - if (scene.date) { - setDate(scene.date); + if (updatedScene.date) { + setDate(updatedScene.date); } - if (scene.url) { - setUrl(scene.url); + if (updatedScene.url) { + setUrl(updatedScene.url); } - if (scene.studio && scene.studio.stored_id) { - setStudioId(scene.studio.stored_id); + if (updatedScene.studio && updatedScene.studio.stored_id) { + setStudioId(updatedScene.studio.stored_id); } - if (scene.performers && scene.performers.length > 0) { - const idPerfs = scene.performers.filter((p) => { + if (updatedScene.performers && updatedScene.performers.length > 0) { + const idPerfs = updatedScene.performers.filter((p) => { return p.stored_id !== undefined && p.stored_id !== null; }); @@ -476,8 +455,8 @@ export const SceneEditPanel: React.FC = (props: IProps) => { } } - if (scene.movies && scene.movies.length > 0) { - const idMovis = scene.movies.filter((p) => { + if (updatedScene.movies && updatedScene.movies.length > 0) { + const idMovis = updatedScene.movies.filter((p) => { return p.stored_id !== undefined && p.stored_id !== null; }); @@ -487,8 +466,8 @@ export const SceneEditPanel: React.FC = (props: IProps) => { } } - if (scene?.tags?.length) { - const idTags = scene.tags.filter((p) => { + if (updatedScene?.tags?.length) { + const idTags = updatedScene.tags.filter((p) => { return p.stored_id !== undefined && p.stored_id !== null; }); @@ -498,10 +477,10 @@ export const SceneEditPanel: React.FC = (props: IProps) => { } } - if (scene.image) { + if (updatedScene.image) { // image is a base64 string - setCoverImage(scene.image); - setCoverImagePreview(scene.image); + setCoverImage(updatedScene.image); + setCoverImagePreview(updatedScene.image); } } @@ -551,7 +530,7 @@ export const SceneEditPanel: React.FC = (props: IProps) => {