PF-1391 - Bumping @mirohq/[email protected]

miroapp · Nov 20, 2023 · 8e2e56d · 8e2e56d
1 parent 67b4d48
commit 8e2e56d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ npx create-miro-app@latest
 | [blob-maker](examples/blob-maker)                       | This example shows you how to create a drag and drop blobmaker using Miro's Web SDK.                                                               |
 | [youtube-room](examples/youtube-room)                   | This example shows you how to sync a YouTube player across multiple users through Socket.IO.                                                       |
 | [custom-actions](examples/custom-actions)               | This example shows you how register [custom actions](https://developers.miro.com/docs/add-custom-actions-to-your-app) in the item context menu.    |
+| [breakout-rooms](examples/breakout-rooms)               | This example shows you how use collaborative features (real-time storage, events, sessions, etc)                                                   |
 
 <p>&nbsp;</p>
 

diff --git a/examples/breakout-rooms/src/hooks.tsx b/examples/breakout-rooms/src/hooks.tsx
@@ -6,16 +6,17 @@ import {
   SelectionUpdateEvent,
   TimerEvent,
   UserInfo,
+  Session,
 } from "@mirohq/websdk-types";
 
 import {
   Breakout,
   Participant,
   Room,
   SelectItemsOpts,
-  Session,
   TimerOpts,
   TimerState,
+  UserSessionEvent,
 } from "./types";
 import { convertTime, formatDisplayTime, generateUniqueId } from "./utils";
 
@@ -101,7 +102,7 @@ export const useBreakout = () => {
     const init = () => {
       const breakoutRooms = miro.board.storage.collection(COLLECTION_NAME);
 
-      const activeValue = (activeBreakout: Breakout) => {
+      const activeValue = (activeBreakout?: Breakout) => {
         log("onValue", { activeBreakout });
         setBreakout(activeBreakout?.id ? activeBreakout : undefined);
       };
@@ -269,8 +270,8 @@ export const useBreakout = () => {
     await saveBreakout(breakout, { rooms });
   };
 
-  const handleUserJoined = async ({ userId }: { userId: string }) => {
-    log("handleUserJoined", { userId, breakout });
+  const handleUserJoined = async ({ user }: UserSessionEvent) => {
+    log("handleUserJoined", { user, breakout });
     if (!breakout) {
       return;
     }
@@ -280,7 +281,7 @@ export const useBreakout = () => {
 
     breakout.rooms.some((r) =>
       r.participants.some((p) => {
-        if (p.id === userId) {
+        if (p.id === user) {
           participant = p;
           room = r;
           return true;
@@ -294,7 +295,7 @@ export const useBreakout = () => {
 
     if (!room || !participant) {
       await miro.board.notifications.showError(
-        `User ${userId} has joined a session but no room was assigned`,
+        `User ${user} has joined a session but no room was assigned`,
       );
       return;
     }
@@ -323,8 +324,8 @@ export const useBreakout = () => {
     }
   };
 
-  const handleUserLeft = async ({ userId }: { userId: string }) => {
-    log("handleUserLeft", { userId, breakout });
+  const handleUserLeft = async ({ user }: UserSessionEvent) => {
+    log("handleUserLeft", { user, breakout });
     if (!breakout) {
       return;
     }
@@ -334,7 +335,7 @@ export const useBreakout = () => {
 
     breakout.rooms.some((r) =>
       r.participants.some((p) => {
-        if (p.id === userId) {
+        if (p.id === user) {
           participant = p;
           room = r;
           return true;
@@ -354,7 +355,6 @@ export const useBreakout = () => {
   };
 
   const upsertSession = async (breakout: Breakout) => {
-    // TODO replace with actual Session type from @mirohq/websdk-types
     let session: Session | undefined;
     if (breakout.sessionId) {
       const sessions = await miro.board.collaboration.getSessions();

diff --git a/examples/breakout-rooms/src/types.ts b/examples/breakout-rooms/src/types.ts
@@ -48,8 +48,6 @@ export type SelectItemsOpts = {
   predicate?: (items: Item) => boolean;
 };
 
-// TODO replace with actual Session type from @mirohq/websdk-types
-export type Session = {
-  id: string;
-  name: string;
+export type UserSessionEvent = {
+  user: string;
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1030,6 +1030,13 @@
     node-fetch "^2.6.9"
     typedoc "0.23.24"
 
+"@mirohq/[email protected]":
+  version "2.9.9"
+  resolved "https://registry.yarnpkg.com/@mirohq/websdk-types/-/websdk-types-2.9.9.tgz#d25e5f488c52aa06811b903effbc79129b7de5c4"
+  integrity sha512-5Q0Q2oFIbzy1qgSqsML7IT/iPmaBDaAM7KsE5HzZQW75HDszCBvrfZVqlVCAA7lp/pERA248PEk3tpDJb7W1eA==
+  dependencies:
+    typescript ">=4.6.3 || ~5"
+
 "@mirohq/websdk-types@^2.0.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@mirohq/websdk-types/-/websdk-types-2.3.0.tgz"