Move post message and use effect

Author: norascheuch

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-data-provider.ts

@@ -49,8 +49,8 @@ export class ModelDetailsDataProvider
     hideModeledApis?: boolean,
   ): Promise<void> {
     if (
-      externalApiUsages &&
-      databaseItem &&
+      externalApiUsages !== undefined &&
+      databaseItem !== undefined &&
       (this.externalApiUsages !== externalApiUsages ||
         this.databaseItem !== databaseItem)
     ) {

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-panel.ts

@@ -33,7 +33,7 @@ export class ModelDetailsPanel extends DisposableObject {
       databaseItem,
       hideModeledApis,
     );
-    if (externalApiUsages) {
+    if (externalApiUsages !== undefined) {
       this.treeView.badge = {
         value: externalApiUsages.length,
         tooltip: "Number of external APIs",

extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx

@@ -101,6 +101,13 @@ export function DataExtensionsEditor({
     INITIAL_HIDE_MODELED_APIS_VALUE,
   );
 
+  useEffect(() => {
+    vscode.postMessage({
+      t: "hideModeledApis",
+      hideModeledApis,
+    });
+  }, [hideModeledApis]);
+
   const [modeledMethods, setModeledMethods] = useState<
     Record<string, ModeledMethod>
   >(initialModeledMethods);
@@ -281,12 +288,7 @@ export function DataExtensionsEditor({
 
   const onHideModeledApis = useCallback(() => {
     setHideModeledApis((oldHideModeledApis) => !oldHideModeledApis);
-
-    vscode.postMessage({
-      t: "hideModeledApis",
-      hideModeledApis: !hideModeledApis,
-    });
-  }, [hideModeledApis]);
+  }, []);
 
   if (viewState === undefined || externalApiUsages.length === 0) {
     return <LoadingContainer>Loading...</LoadingContainer>;