From 81265e3c497023a26fa7dce48c6c0f985da66847 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 4 Apr 2024 16:57:40 +0200
Subject: [PATCH] #671 - Fix on metadata update

---
 .../components/Media/DetailsSlideOver.tsx     |  8 ++++----
 .../components/Media/MediaItemPanel.tsx       | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
index 6da55038..8d8a690f 100644
--- a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
+++ b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
@@ -67,23 +67,23 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
     fields?.forEach((field) => {
       if (field.name === "title") {
         items.push(
-          <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.metadata.title || ""} />
+          <DetailsItem key="title" title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.metadata.title || ""} />
         );
       } else if (field.name === "caption") {
         if (isImageFile) {
           items.push(
-            <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.metadata.caption || ""} />
+            <DetailsItem key="caption" title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.metadata.caption || ""} />
           );
         }
       } else if (field.name === "alt") {
         if (isImageFile) {
           items.push(
-            <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.metadata.alt || ""} />
+            <DetailsItem key="alt" title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.metadata.alt || ""} />
           );
         }
       } else {
         items.push(
-          <DetailsItem title={field.title || field.name} details={(media.metadata[field.name] || "") as string} />
+          <DetailsItem key={field.name} title={field.title || field.name} details={(media.metadata[field.name] || "") as string} />
         );
       }
     });
diff --git a/src/dashboardWebView/components/Media/MediaItemPanel.tsx b/src/dashboardWebView/components/Media/MediaItemPanel.tsx
index d6bc2dda..06ab8896 100644
--- a/src/dashboardWebView/components/Media/MediaItemPanel.tsx
+++ b/src/dashboardWebView/components/Media/MediaItemPanel.tsx
@@ -11,16 +11,24 @@ export interface IMediaItemPanelProps {
 }
 
 export const MediaItemPanel: React.FunctionComponent<IMediaItemPanelProps> = ({ allMedia }: React.PropsWithChildren<IMediaItemPanelProps>) => {
+  const [crntPath, setCrntPath] = useState<string>('');
   const [media, setMedia] = useState<MediaInfo | undefined>(undefined);
   const [showForm, setShowForm] = useState(false);
   const [showDetails, setShowDetails] = useState(false);
   const [selectedItemAction, setSelectedItemAction] = useRecoilState(SelectedItemActionAtom);
   const { mediaFolder, mediaSize, mediaDimensions, isImage, isVideo } = useMediaInfo(media);
 
+  const onDismiss = () => {
+    setShowDetails(false);
+    setShowForm(false);
+    setMedia(undefined);
+  };
+
   useEffect(() => {
     if (selectedItemAction && selectedItemAction.path) {
       const mediaFile = allMedia.find((m) => m.fsPath === selectedItemAction.path);
       setMedia(mediaFile);
+      setCrntPath(selectedItemAction.path);
 
       if (selectedItemAction.action === 'edit') {
         setShowForm(true);
@@ -31,8 +39,11 @@ export const MediaItemPanel: React.FunctionComponent<IMediaItemPanelProps> = ({
       }
 
       setSelectedItemAction(undefined);
+    } else if (crntPath) {
+      const mediaFile = allMedia.find((m) => m.fsPath === crntPath);
+      setMedia(mediaFile);
     }
-  }, [allMedia, selectedItemAction]);
+  }, [allMedia, selectedItemAction, crntPath]);
 
   if (showDetails && media) {
     return (
@@ -47,11 +58,7 @@ export const MediaItemPanel: React.FunctionComponent<IMediaItemPanelProps> = ({
         isVideoFile={isVideo}
         onEdit={() => setShowForm(true)}
         onEditClose={() => setShowForm(false)}
-        onDismiss={() => {
-          setShowDetails(false);
-          setShowForm(false);
-          setMedia(undefined);
-        }}
+        onDismiss={onDismiss}
       />
     );
   }