refactor(view): rename messages, abstract port usages.

packages/view/src/App.tsx

@@ -15,6 +15,7 @@ import {
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
+import type { IDESentEvents } from "types/IDESentEvents";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -31,9 +32,13 @@ const App = () => {
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
 
   if (initRef.current === false) {
+    const callbacks: IDESentEvents = {
+      fetchAnalyzedData: fetchAnalyzedData,
+    };
+
     setLoading(true);
-    ideAdapter.addAllEventListener(fetchAnalyzedData);
-    ideAdapter.sendFetchAnalyzedDataCommand();
+    ideAdapter.addIDESentEventListener(callbacks);
+    ideAdapter.sendFetchAnalyzedDataMessage();
     initRef.current = true;
   }
 

packages/view/src/components/TemporalFilter/TemporalFilter.tsx

@@ -1,5 +1,4 @@
 import "reflect-metadata";
-import { container } from "tsyringe";
 import type { CSSProperties } from "react";
 import { useEffect, useMemo, useRef } from "react";
 import * as d3 from "d3";
@@ -8,7 +7,7 @@ import BounceLoader from "react-spinners/BounceLoader";
 
 import { useGlobalData } from "hooks";
 import { throttle } from "utils";
-import type IDEPort from "ide/IDEPort";
+import { sendFetchAnalyzedDataCommand } from "services";
 
 import { filterDataByDate, getMinMaxDate, lineChartTimeFormatter, sortBasedOnCommitNode } from "./TemporalFilter.util";
 import "./TemporalFilter.scss";
@@ -67,8 +66,7 @@ const TemporalFilter = () => {
   const refreshHandler = throttle(() => {
     setLoading(true);
 
-    const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-    ideAdapter.sendFetchAnalyzedDataCommand();
+    sendFetchAnalyzedDataCommand();
   }, 3000);
 
   const windowSize = useWindowResize();

packages/view/src/components/ThemeSelector/ThemeSelector.tsx

@@ -1,9 +1,8 @@
 import "./ThemeSelector.scss";
-import { container } from "tsyringe";
 import { useCallback, useEffect, useState } from "react";
 
 import { debounce } from "utils";
-import type IDEPort from "ide/IDEPort";
+import { setPrimaryColor } from "services";
 
 import { PRIMARY_COLOR_VARIABLE_NAME } from "../../constants/constants";
 
@@ -15,8 +14,7 @@ const ThemeSelector = () => {
   }, []);
 
   const storeColorHandler = debounce((colorCode: string) => {
-    const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-    ideAdapter.setPrimaryColor(colorCode);
+    setPrimaryColor(colorCode);
   }, 3000);
 
   const handlePrimaryColor = useCallback(

packages/view/src/ide/FakeIDEAdapter.ts

@@ -1,64 +1,65 @@
 import { injectable } from "tsyringe";
 
-import type { ClusterNode, EngineCommand, EngineCommandNames } from "types";
-import type { EngineMessage, EngineMessageEvent } from "types/EngineMessage";
+import type { ClusterNode, IDEMessage, IDEMessageEvent } from "types";
+import type { IDESentEvents } from "types/IDESentEvents";
 
 import fakeData from "../fake-assets/cluster-nodes.json";
 
 import type IDEPort from "./IDEPort";
 
 @injectable()
 export default class FakeIDEAdapter implements IDEPort {
-  public addAllEventListener(fetchAnalyzedData: (analyzedData: ClusterNode[]) => void) {
-    const onReceiveMessage = (e: EngineMessageEvent): void => {
-      const response = e.data;
-      if (response.command === "fetchAnalyzedData") {
-        const fetchedData = response.payload as unknown as ClusterNode[];
-        fetchAnalyzedData(fetchedData);
+  public addIDESentEventListener(events: IDESentEvents) {
+    const onReceiveMessage = (e: IDEMessageEvent): void => {
+      const responseMessage = e.data;
+      if (responseMessage.command === "fetchAnalyzedData") {
+        const fetchedData = responseMessage.payload as unknown as ClusterNode[];
+        events.fetchAnalyzedData(fetchedData);
       }
     };
 
     window.addEventListener("message", onReceiveMessage);
   }
 
-  public sendFetchAnalyzedDataCommand() {
-    const command: EngineCommand = {
+  public sendFetchAnalyzedDataMessage() {
+    const message: IDEMessage = {
       command: "fetchAnalyzedData",
     };
     setTimeout(() => {
-      this.executeCommand(command);
+      this.sendMessageToMe(message);
     }, 3000);
   }
 
   public setPrimaryColor(color: string) {
     sessionStorage.setItem("PRIMARY_COLOR", color);
-    const command: EngineCommand = {
+    const message: IDEMessage = {
       command: "updatePrimaryColor",
     };
-    this.executeCommand(command);
+    this.sendMessageToMe(message);
   }
 
-  private getResponseMessage(commandName: EngineCommandNames) {
-    switch (commandName) {
+  private convertMessage(message: IDEMessage) {
+    const { command } = message;
+
+    switch (command) {
       case "fetchAnalyzedData":
         return {
-          command: commandName,
+          command: command,
           payload: fakeData as unknown as string,
         };
       case "updatePrimaryColor":
         return {
-          command: commandName,
+          command: command,
           payload: sessionStorage.getItem("PRIMARY_COLOR") as string,
         };
       default:
         return {
-          command: commandName,
+          command: command,
         };
     }
   }
 
-  private executeCommand(command: EngineCommand) {
-    const message: EngineMessage = this.getResponseMessage(command.command);
-    window.postMessage(message);
+  private sendMessageToMe(message: IDEMessage) {
+    window.postMessage(this.convertMessage(message));
   }
 }

packages/view/src/ide/IDEPort.ts

@@ -1,12 +1,12 @@
-import type { ClusterNode } from "types";
+import type { IDESentEvents } from "types/IDESentEvents";
 
 export type IDEMessage = {
   command: string;
   uri: string;
 };
 
 export default interface IDEPort {
-  addAllEventListener: (fetchAnalyzedData: (analyzedData: ClusterNode[]) => void) => void;
-  sendFetchAnalyzedDataCommand: () => void;
+  addIDESentEventListener: (apiCallbacks: IDESentEvents) => void;
+  sendFetchAnalyzedDataMessage: () => void;
   setPrimaryColor: (color: string) => void;
 }

packages/view/src/ide/VSCodeIDEAdapter.ts

@@ -1,19 +1,19 @@
 import { injectable } from "tsyringe";
 
-import type { ClusterNode, EngineCommand } from "types";
-import type { EngineMessageEvent } from "types/EngineMessage";
+import type { ClusterNode, IDEMessage, IDEMessageEvent } from "types";
+import type { IDESentEvents } from "types/IDESentEvents";
 
 import type IDEPort from "./IDEPort";
 import { vscode } from "./VSCodeAPIWrapper";
 
 @injectable()
 export default class VSCodeIDEAdapter implements IDEPort {
-  public addAllEventListener(fetchAnalyzedData: (analyzedData: ClusterNode[]) => void) {
-    const onReceiveMessage = (e: EngineMessageEvent): void => {
-      const response = e.data;
-      switch (response.command) {
+  public addIDESentEventListener(callbacks: IDESentEvents) {
+    const onReceiveMessage = (e: IDEMessageEvent): void => {
+      const responseMessage = e.data;
+      switch (responseMessage.command) {
         case "fetchAnalyzedData":
-          fetchAnalyzedData(JSON.parse(response.payload || "") as unknown as ClusterNode[]);
+          callbacks.fetchAnalyzedData(JSON.parse(responseMessage.payload || "") as unknown as ClusterNode[]);
           break;
         case "getBranchList":
         default:
@@ -23,22 +23,22 @@ export default class VSCodeIDEAdapter implements IDEPort {
     window.addEventListener("message", onReceiveMessage);
   }
 
-  public sendFetchAnalyzedDataCommand() {
-    const command: EngineCommand = {
+  public sendFetchAnalyzedDataMessage() {
+    const message: IDEMessage = {
       command: "fetchAnalyzedData",
     };
-    this.executeCommand(command);
+    this.sendMessageToIDE(message);
   }
 
   public setPrimaryColor(color: string) {
-    const command: EngineCommand = {
+    const message: IDEMessage = {
       command: "updatePrimaryColor",
       payload: JSON.stringify({ primary: color }),
     };
-    this.executeCommand(command);
+    this.sendMessageToIDE(message);
   }
 
-  private executeCommand(command: EngineCommand) {
-    vscode.postMessage(command);
+  private sendMessageToIDE(message: IDEMessage) {
+    vscode.postMessage(message);
   }
 }

packages/view/src/services/index.ts

@@ -0,0 +1,13 @@
+import { container } from "tsyringe";
+
+import type IDEPort from "ide/IDEPort";
+
+const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
+
+export const setPrimaryColor = (color: string) => {
+  ideAdapter.setPrimaryColor(color);
+};
+
+export const sendFetchAnalyzedDataCommand = () => {
+  ideAdapter.sendFetchAnalyzedDataMessage();
+};

packages/view/src/types/IDEMessage.ts

@@ -0,0 +1,10 @@
+export type IDEMessage = {
+  command: IDEMessageCommandNames;
+  payload?: string;
+};
+
+export interface IDEMessageEvent extends MessageEvent {
+  data: IDEMessage;
+}
+
+export type IDEMessageCommandNames = "fetchAnalyzedData" | "getBranchList" | "updatePrimaryColor";

packages/view/src/types/IDESentEvents.ts

@@ -0,0 +1,6 @@
+import type { ClusterNode } from "types";
+
+// triggered by ide response
+export type IDESentEvents = {
+  fetchAnalyzedData: (analyzedData: ClusterNode[]) => void;
+};

packages/view/src/types/index.ts

@@ -1,5 +1,5 @@
 export * from "./global";
 export * from "./NodeTypes.temp";
 export * from "./EngineCommand";
-export * from "./EngineMessage";
+export * from "./IDEMessage";
 export * from "./Author";