use app_card:open for navigation

dropbox · May 6, 2024 · 57d373d · 57d373d
1 parent 9fe31e8
commit 57d373d
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 24 deletions.
diff --git a/public/miro.js b/public/miro.js
@@ -302,6 +302,24 @@ export function attachToSocket(socket) {
     }, Promise.resolve(null));
   });
 
+  socket.on("query", async ({ name, requestId }) => {
+    switch (name) {
+      case "cards": {
+        const cards = await miro.board.get({ type: ["card", "app_card"] });
+        const response = await Promise.all(cards.map(extractCardData));
+        socket.emit("queryResult", { requestId, response });
+        break;
+      }
+    }
+  });
+  miro.board.ui.on("app_card:open", async (event) => {
+    const { appCard } = event;
+    const data = await extractCardData(appCard);
+    if (data) {
+      socket.emit("navigateTo", data);
+    }
+  });
+
   miro.board.ui.on("items:delete", async function (event) {
     return event.items.reduce(async (promise, item) => {
       await promise;

diff --git a/src/EventTypes.ts b/src/EventTypes.ts
@@ -15,6 +15,10 @@ export type CardData = {
   codeLink: string | null;
 };
 
+export type Queries = {
+  cards: () => CardData[]
+};
+
 export type RequestEvents = {
   newCard: (data: CardData) => void;
   attachCard: (data: CardData) => void;
@@ -26,6 +30,11 @@ export type RequestEvents = {
     miroLink: string;
     status: "connected" | "disconnected";
   }) => void;
+  query: <N extends keyof Queries>(data: {
+    name: N;
+    requestId: string;
+    data: Parameters<Queries[N]>;
+  }) => void;
   jump: (data: {
     lastUri: string;
     lastPosition: vscode.Position;
@@ -36,7 +45,12 @@ export type RequestEvents = {
 export type ResponseEvents = {
   cardsInEditor: (data: { path: string; cards: CardData[] }) => void;
   selectedCards: (data: { data: CardData[] }) => void;
+  navigateTo: (card: CardData) => void;
   card: (url: string, data: CardData) => void;
+  queryResult: <N extends keyof Queries>(data: {
+    requestId: string,
+    response: Queries[N],
+  }) => void;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/src/extension.ts b/src/extension.ts
@@ -1,6 +1,6 @@
 import * as vscode from "vscode";
 import { makeExpressServer } from "./server";
-import { CardData, RequestEvents } from "./EventTypes";
+import { CardData, Queries, RequestEvents, ResponseEvents } from "./EventTypes";
 import { Socket } from "socket.io";
 import { makeHoverProvider } from "./make-hover-provider";
 import { makeNewCardHandler } from "./make-new-card-handler";
@@ -19,6 +19,11 @@ export type HandlerContext = {
   lastPosition: vscode.Position | undefined;
   lastUri: vscode.Uri | undefined;
   waitForConnections: () => Promise<void>;
+  query: <Req extends keyof Queries, Res extends ReturnType<Queries[Req]>>(
+    socket: Socket<ResponseEvents, RequestEvents>,
+    request: Req,
+    ...data: Parameters<Queries[Req]>
+  ) => Promise<Res>;
   emit: <T extends keyof RequestEvents>(
     event: T,
     ...data: Parameters<RequestEvents[T]>
@@ -73,6 +78,32 @@ export function activate(context: vscode.ExtensionContext) {
     lastPosition: undefined,
     lastUri: undefined,
     emit: (t, ...data) => io.emit(t, ...data),
+    query: function <
+      Req extends keyof Queries,
+      Res extends ReturnType<Queries[Req]>
+    >(
+      socket: Socket<ResponseEvents, RequestEvents>,
+      request: Req, 
+      ...data: Parameters<Queries[Req]>
+    ): Promise<Res> {
+      const requestId = Math.random().toString();
+      return new Promise<Res>((resolve) => {
+        const captureResponse: ResponseEvents["queryResult"] = (response) => {
+          if (response.requestId === requestId) {
+            io.off("queryResult", captureResponse);
+            resolve(response.response as Res);
+          }
+        };
+
+        socket.on("queryResult", captureResponse);
+
+        socket.emit("query", {
+          name: request,
+          requestId,
+          data,
+        });
+      });
+    },
     async waitForConnections() {
       if (sockets.size > 0) {
         return;

diff --git a/src/server.ts b/src/server.ts
@@ -14,14 +14,15 @@ export function makeExpressServer({
   renderStatusBar,
   allCards,
   selectedCards,
+  query,
 }: HandlerContext) {
   const app = express();
   const httpServer = createServer(app);
   const io = new Server<ResponseEvents, RequestEvents>(httpServer);
 
   renderStatusBar();
 
-  io.on("connection", (socket) => {
+  io.on("connection", async (socket) => {
     sockets.set(socket.id, socket);
     renderStatusBar();
     socket.on("disconnect", () => {
@@ -33,38 +34,30 @@ export function makeExpressServer({
       `AppExplorer Connected at socket - ${socket.id}`
     );
 
+    socket.on("navigateTo", async (card) => {
+      const status = (await goToCardCode(card)) ? "connected" : "disconnected";
+      if (card.miroLink) {
+        socket.emit("cardStatus", {
+          miroLink: card.miroLink,
+          status,
+        });
+      }
+    });
     socket.on("selectedCards", async (event) => {
       selectedCards.length = 0;
       selectedCards.push(...event.data.map((card) => card.miroLink));
 
       event.data.forEach((card) => {
         allCards.set(card.miroLink, card);
       });
-
-      if (selectedCards.length === 1) {
-        const card = event.data[0];
-
-        const status = (await goToCardCode(card))
-          ? "connected"
-          : "disconnected";
-        if (card.miroLink) {
-          socket.emit("cardStatus", {
-            miroLink: card.miroLink,
-            status,
-          });
-        }
-      }
     });
 
-    socket.on("card", (miroLink, card) => {
-      if (card == null) {
-        allCards.delete(miroLink);
-      } else {
-        allCards.set(miroLink, card);
-      }
-      renderStatusBar();
+    const cards = await query(socket, "cards");
+    console.log("cards", cards);
+    cards.forEach((card) => {
+      allCards.set(card.miroLink, card);
     });
-    socket.emit("queryBoard");
+    renderStatusBar();
   });
 
   app.use(compression());