From c29aef03f061cedf5faabedc21eac7d707773fb7 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 30 Sep 2021 10:05:06 +0200
Subject: [PATCH] Changed img description to caption

---
 CHANGELOG.md                                  |  2 +-
 src/commands/Dashboard.ts                     |  8 ++++--
 .../components/Media/Item.tsx                 | 28 +++++++++----------
 src/helpers/MediaLibrary.ts                   |  4 +--
 src/models/MediaPaths.ts                      |  2 +-
 5 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b53b441..dd705e91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### ✨ New features
 
-- [#113](https://github.com/estruyf/vscode-front-matter/issues/113): Integrating a local DB for media metadata (description, alt)
+- [#113](https://github.com/estruyf/vscode-front-matter/issues/113): Integrating a local DB for media metadata (caption, alt)
 
 ### 🎨 Enhancements
 
diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
index 4f738ec2..3c68d20d 100644
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -208,7 +208,7 @@ export class Dashboard {
         const line = data.position.line;
         const character = data.position.character;
         if (line) {
-          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![${data.alt || data.description || ""}](${data.image})`));
+          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![${data.alt || data.caption || ""}](${data.image})`));
         }
         panel.getMediaSelection();
       } else {
@@ -308,6 +308,8 @@ export class Dashboard {
       try {
         const metadata = Dashboard.mediaLib.get(file.fsPath);
 
+        console.log(metadata);
+
         return {
           ...file,
           stats: statSync(file.fsPath),
@@ -493,8 +495,8 @@ export class Dashboard {
   /**
    * Update the metadata of the selected file
    */
-  private static async updateMediaMetadata({ file, page, folder, description = null, alt = null }: { file:string; page: number; folder: string | null; description: string | null; alt: string | null; }) {
-    Dashboard.mediaLib.set(file, description, alt);
+  private static async updateMediaMetadata({ file, page, folder, ...metadata }: { file:string; page: number; folder: string | null; metadata: any; }) {
+    Dashboard.mediaLib.set(file, metadata);
     Dashboard.getMedia(page || 0, folder || "");
   }
 
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index c9a010eb..aca7a5c2 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -21,7 +21,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   const [ showAlert, setShowAlert ] = React.useState(false);
   const [ showForm, setShowForm ] = React.useState(false);
   const viewData = useRecoilValue(ViewDataSelector);
-  const [ description, setDescription ] = React.useState(media.description);
+  const [ caption, setCaption ] = React.useState(media.caption);
   const [ alt, setAlt ] = React.useState(media.alt);
   const page = useRecoilValue(PageSelector);
 
@@ -67,7 +67,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
       fieldName: viewData?.data?.fieldName,
       position: viewData?.data?.position || null,
       alt: alt || "",
-      description: description || ""
+      caption: caption || ""
     });
   };
 
@@ -76,7 +76,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     let snippet = settings?.mediaSnippet.join("\n");
     snippet = snippet?.replace("{mediaUrl}", parseWinPath(relPath) || "");
     snippet = snippet?.replace("{alt}", alt || "");
-    snippet = snippet?.replace("{description}", description || "");
+    snippet = snippet?.replace("{caption}", caption || "");
 
     Messenger.send(DashboardMessage.insertPreviewImage, {
       image: parseWinPath(relPath) || "",
@@ -120,7 +120,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   const submitMetadata = () => {
     Messenger.send(DashboardMessage.updateMediaMetadata, {
       file: media.fsPath,
-      description,
+      caption,
       alt,
       folder: selectedFolder,
       page
@@ -129,16 +129,16 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   };
 
   useEffect(() => {
-    if (media.alt !== description) {
+    if (media.alt !== alt) {
       setAlt(media.alt);
     }
   }, [media.alt]);
   
   useEffect(() => {
-    if (media.description !== description) {
-      setDescription(media.description);
+    if (media.caption !== caption) {
+      setCaption(media.caption);
     }
-  }, [media.description]);
+  }, [media.caption]);
 
   return (
     <>
@@ -203,10 +203,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
             {basename(parseWinPath(media.fsPath) || "")}
           </p>
           {
-            media.description && (
+            media.caption && (
               <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
-                <b className={`mr-2`}>Description:</b>
-                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.description}</span>
+                <b className={`mr-2`}>Caption:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.caption}</span>
               </p>
             )
           }
@@ -245,14 +245,14 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
             <div className="flex flex-col space-y-2">
               <div>
                 <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
-                  Description
+                  Caption
                 </label>
                 <div className="mt-1">
                   <textarea
                     rows={3}
                     className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
-                    value={description || ''}
-                    onChange={(e) => setDescription(e.target.value)}
+                    value={caption || ''}
+                    onChange={(e) => setCaption(e.target.value)}
                   />
                 </div>
               </div>
diff --git a/src/helpers/MediaLibrary.ts b/src/helpers/MediaLibrary.ts
index a77dd346..044b8a07 100644
--- a/src/helpers/MediaLibrary.ts
+++ b/src/helpers/MediaLibrary.ts
@@ -51,9 +51,9 @@ export class MediaLibrary {
     }
   }
 
-  public set(id: string, description: string | null = null, alt: string | null = null): void {
+  public set(id: string, metadata: any): void {
     const fileId = this.parsePath(id);
-    this.db.push(fileId, { description, alt }, true);
+    this.db.push(fileId, metadata, true);
   }
 
   public rename(oldId: string, newId: string): void {
diff --git a/src/models/MediaPaths.ts b/src/models/MediaPaths.ts
index 0bc1c121..07719026 100644
--- a/src/models/MediaPaths.ts
+++ b/src/models/MediaPaths.ts
@@ -10,6 +10,6 @@ export interface MediaInfo {
   fsPath: string; 
   vsPath: string | undefined;
   stats: Stats | undefined;
-  description?: string | undefined;
+  caption?: string | undefined;
   alt?: string | undefined;
 }
\ No newline at end of file