#577 - Fix in the dataFile field

CHANGELOG.md

@@ -19,6 +19,7 @@
 - [#564](https://github.com/estruyf/vscode-front-matter/issues/564): Fix to only pass strings to the taxonomy dashboard
 - [#567](https://github.com/estruyf/vscode-front-matter/issues/567): Fix taxonomy filters that are incorrectly positioned
 - [#572](https://github.com/estruyf/vscode-front-matter/issues/572): Fix the media snippet placeholder link
+- [#577](https://github.com/estruyf/vscode-front-matter/issues/577): Fix in the `dataFile` field where data entries get overwritten
 
 ## [8.4.0] - 2023-04-03 - [Release notes](https://beta.frontmatter.codes/updates/v8.4.0)
 

src/listeners/panel/BaseListener.ts

@@ -23,4 +23,30 @@ export abstract class BaseListener {
       payload
     });
   }
+
+  public static sendRequest(command: string, requestId: string, payload: any) {
+    Logger.info(`Sending request result to panel: ${command}`);
+
+    const extPath = Extension.getInstance().extensionPath;
+    const panel = ExplorerView.getInstance(extPath);
+
+    panel.getWebview()?.postMessage({
+      command,
+      requestId,
+      payload
+    });
+  }
+
+  public static sendRequestError(command: string, requestId: string, error: any) {
+    Logger.info(`Sending request error to the panel: ${command}`);
+
+    const extPath = Extension.getInstance().extensionPath;
+    const panel = ExplorerView.getInstance(extPath);
+
+    panel.getWebview()?.postMessage({
+      command,
+      requestId,
+      error
+    });
+  }
 }

src/listeners/panel/DataListener.ts

@@ -66,7 +66,7 @@ export class DataListener extends BaseListener {
         commands.executeCommand(COMMAND_NAME.setContentType);
         break;
       case CommandToCode.getDataEntries:
-        this.getDataFileEntries(msg.payload);
+        this.getDataFileEntries(msg.command, msg.requestId || '', msg.payload);
         break;
     }
   }
@@ -171,17 +171,11 @@ export class DataListener extends BaseListener {
     const editor = window.activeTextEditor;
 
     let article;
-    if (filePath) {
-      article = await ArticleHelper.getFrontMatterByPath(filePath);
-    } else {
-      if (!editor) {
-        return;
-      }
 
-      const article = ArticleHelper.getFrontMatter(editor);
-      if (!article) {
-        return;
-      }
+    if (editor) {
+      article = ArticleHelper.getFrontMatter(editor);
+    } else if (filePath) {
+      article = await ArticleHelper.getFrontMatterByPath(filePath);
     }
 
     if (!article) {
@@ -340,10 +334,16 @@ export class DataListener extends BaseListener {
    * Retrieve the data entries from local data files
    * @param data
    */
-  private static async getDataFileEntries(data: any) {
+  private static async getDataFileEntries(command: string, requestId: string, data: any) {
+    if (!command || !requestId || !data) {
+      return;
+    }
+
     const entries = await DataFileHelper.getById(data);
     if (entries) {
-      this.sendMsg(Command.dataFileEntries, entries);
+      this.sendRequest(command, requestId, entries);
+    } else {
+      this.sendRequestError(command, requestId, "Couldn't find data file entries");
     }
   }
 

src/panelWebView/components/Fields/DataFileField.tsx

@@ -1,9 +1,7 @@
-import { Messenger } from '@estruyf/vscode/dist/client';
-import { EventData } from '@estruyf/vscode/dist/models';
+import { messageHandler } from '@estruyf/vscode/dist/client';
 import { ChevronDownIcon, DatabaseIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Command } from '../../Command';
 import { CommandToCode } from '../../CommandToCode';
 import Downshift from 'downshift';
 import { ChoiceButton } from './ChoiceButton';
@@ -37,14 +35,6 @@ export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({
   const [crntSelected, setCrntSelected] = React.useState<string | string[] | null>();
   const dsRef = React.useRef<Downshift<string> | null>(null);
 
-  const messageListener = (message: MessageEvent<EventData<any>>) => {
-    const { command, payload } = message.data;
-
-    if (command === Command.dataFileEntries) {
-      setDataEntries(payload || null);
-    }
-  };
-
   const onValueChange = useCallback(
     (txtValue: string) => {
       if (multiSelect) {
@@ -137,18 +127,14 @@ export const DataFileField: React.FunctionComponent<IDataFileFieldProps> = ({
 
   useEffect(() => {
     if (dataFileId) {
-      Messenger.send(CommandToCode.getDataEntries, dataFileId);
+      messageHandler.request<string[]>(CommandToCode.getDataEntries, dataFileId).then((entries) => {
+        setDataEntries(entries || null);
+      }).catch((err) => {
+        setDataEntries(null);
+      });
     }
   }, [dataFileId]);
 
-  useEffect(() => {
-    Messenger.listen(messageListener);
-
-    return () => {
-      Messenger.unlisten(messageListener);
-    };
-  }, []);
-
   return (
     <div className={`metadata_field ${showRequiredState ? 'required' : ''}`}>
       <FieldTitle label={label} icon={<DatabaseIcon />} required={required} />