From 886867792951dad3a2ec3ec83e84e053590fdf0d Mon Sep 17 00:00:00 2001 From: Uyen Dan Nguyen <113812992+dannguyen24@users.noreply.github.com> Date: Sun, 21 Dec 2025 00:08:19 -0500 Subject: [PATCH 1/4] added id dependency in useMemo --- compose.yml | 8 +-- .../components/dialog/AlreadyInRoomDialog.tsx | 55 +++++++++++++++++++ 2 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 extension/src/components/dialog/AlreadyInRoomDialog.tsx diff --git a/compose.yml b/compose.yml index 6c62bad3..880fa18c 100644 --- a/compose.yml +++ b/compose.yml @@ -11,10 +11,10 @@ services: - 3002:3002 - 3003:3003 # See entrypoint - used for remote-devtools - - 8000:8000 - - 8001:8001 - - 8002:8002 - - 8003:8003 + # - 8000:8000 + # - 8001:8001 + # - 8002:8002 + # - 8003:8003 environment: # Used by entrypoint - DATA_DIR=/app/mnt/data diff --git a/extension/src/components/dialog/AlreadyInRoomDialog.tsx b/extension/src/components/dialog/AlreadyInRoomDialog.tsx new file mode 100644 index 00000000..60a6424e --- /dev/null +++ b/extension/src/components/dialog/AlreadyInRoomDialog.tsx @@ -0,0 +1,55 @@ +import { useRoomActions, useRoomData } from "@cb/hooks/store"; +import { Button } from "@cb/lib/components/ui/button"; +import { cn } from "@cb/utils/cn"; +import { DialogOverlay } from "@radix-ui/react-dialog"; +import { throttle } from "lodash"; +import React from "react"; +import { RoomDialog, baseButtonClassName } from "./RoomDialog"; + +export const AlreadyInRoomDialog = () => { + const { join } = useRoomActions(); + const { id } = useRoomData(); + + const onJoinRoom = React.useMemo(() => { + return throttle(async (reactEvent: React.MouseEvent) => { + reactEvent.stopPropagation(); + if (id) { + await join(id); + } + }, 1000); + }, [join, id]); + + return ( + e.stopPropagation(), + }, + }} + overlay={ + + } + > +
+

+ We found this account already associated with this room. Joining again + (for example, from another tab or window) may cause the session to + break. +

+
+ + + +
+
+ + ); +}; From 797047b95ab9b8689e8edb53c2305ca1b240d51a Mon Sep 17 00:00:00 2001 From: Uyen Dan Nguyen <113812992+dannguyen24@users.noreply.github.com> Date: Sun, 21 Dec 2025 00:36:11 -0500 Subject: [PATCH 2/4] added id in useMemo dependency --- .../components/dialog/AlreadyInRoomDialog.tsx | 48 ++++++++----------- .../src/components/panel/BrowsePanel.tsx | 31 +++++++++++- 2 files changed, 49 insertions(+), 30 deletions(-) diff --git a/extension/src/components/dialog/AlreadyInRoomDialog.tsx b/extension/src/components/dialog/AlreadyInRoomDialog.tsx index 60a6424e..df4ba4a7 100644 --- a/extension/src/components/dialog/AlreadyInRoomDialog.tsx +++ b/extension/src/components/dialog/AlreadyInRoomDialog.tsx @@ -1,24 +1,17 @@ -import { useRoomActions, useRoomData } from "@cb/hooks/store"; import { Button } from "@cb/lib/components/ui/button"; +import { DialogClose } from "@cb/lib/components/ui/dialog"; import { cn } from "@cb/utils/cn"; import { DialogOverlay } from "@radix-ui/react-dialog"; -import { throttle } from "lodash"; -import React from "react"; import { RoomDialog, baseButtonClassName } from "./RoomDialog"; -export const AlreadyInRoomDialog = () => { - const { join } = useRoomActions(); - const { id } = useRoomData(); - - const onJoinRoom = React.useMemo(() => { - return throttle(async (reactEvent: React.MouseEvent) => { - reactEvent.stopPropagation(); - if (id) { - await join(id); - } - }, 1000); - }, [join, id]); - +interface AlreadyInRoomDialogProps { + onConfirm: (event: React.MouseEvent) => void; + onCancel: (event: React.MouseEvent) => void; +} +export const AlreadyInRoomDialog = ({ + onConfirm, + onCancel, +}: AlreadyInRoomDialogProps) => { return ( { } > -
-

- We found this account already associated with this room. Joining again - (for example, from another tab or window) may cause the session to - break. -

-
+
+ - - -
+ +
); diff --git a/extension/src/components/panel/BrowsePanel.tsx b/extension/src/components/panel/BrowsePanel.tsx index bf8a7bbb..f745d9eb 100644 --- a/extension/src/components/panel/BrowsePanel.tsx +++ b/extension/src/components/panel/BrowsePanel.tsx @@ -5,22 +5,26 @@ import { DefaultTableHeader } from "@cb/components/table/DefaultTableHeader"; import { DefaultTableRow } from "@cb/components/table/DefaultTableRow"; import { Tooltip } from "@cb/components/tooltip"; import { CSS, ROOM } from "@cb/constants"; -import { useRoomActions } from "@cb/hooks/store"; +import { useRoomActions, useRoomData } from "@cb/hooks/store"; import { Button } from "@cb/lib/components/ui/button"; import InfiniteScroll from "@cb/lib/components/ui/InfiniteScroll"; import { Input } from "@cb/lib/components/ui/input"; import { Spinner } from "@cb/lib/components/ui/spinner"; import { TableCell, TableRow } from "@cb/lib/components/ui/table"; import { roomQuery } from "@cb/services/db"; +import { cn } from "@cb/utils/cn"; import { throttle } from "lodash"; import { CornerUpLeft } from "lucide-react"; import React from "react"; +import { AlreadyInRoomDialog } from "@cb/components/dialog/AlreadyInRoomDialog"; const HOOK_LIMIT = 100; export const BrowsePanel = () => { const { home } = useRoomActions(); const { join } = useRoomActions(); + const { id } = useRoomData(); + const [showDialog, setShowDialog] = React.useState(false); const [inputRoomId, setInputRoomId] = React.useState(""); const { data, loading, getNext, hasNext } = usePaginate({ baseQuery: roomQuery, @@ -34,11 +38,31 @@ export const BrowsePanel = () => { roomId: string ) => { reactEvent.stopPropagation(); + if (roomId === id) { + setShowDialog(true); + return; + } await join(roomId); }, 1000 ); - }, [join]); + }, [join, id]); + + const onJoinAnyway = React.useMemo(() => { + return throttle( + async ( + reactEvent: React.MouseEvent | React.KeyboardEvent + ) => { + reactEvent.stopPropagation(); + await join(inputRoomId); + }, + 1000 + ); + }, [join, inputRoomId]); + + const onCancel = () => { + setShowDialog(false); + }; const onChangeRoomIdInput = (e: React.ChangeEvent) => { e.preventDefault(); @@ -47,6 +71,9 @@ export const BrowsePanel = () => { return (
+ {showDialog && ( + + )}
Date: Sat, 27 Dec 2025 19:41:44 -0500 Subject: [PATCH 3/4] added changes before switch branch --- extension/src/components/panel/BrowsePanel.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/extension/src/components/panel/BrowsePanel.tsx b/extension/src/components/panel/BrowsePanel.tsx index f745d9eb..3ca07812 100644 --- a/extension/src/components/panel/BrowsePanel.tsx +++ b/extension/src/components/panel/BrowsePanel.tsx @@ -54,7 +54,9 @@ export const BrowsePanel = () => { reactEvent: React.MouseEvent | React.KeyboardEvent ) => { reactEvent.stopPropagation(); + setShowDialog(false); await join(inputRoomId); + console.log("Joining anyway"); }, 1000 ); @@ -74,6 +76,9 @@ export const BrowsePanel = () => { {showDialog && ( )} + + {/* */} +
Date: Wed, 31 Dec 2025 15:47:57 -0500 Subject: [PATCH 4/4] bug on showDialog after calling onJoinRoom --- .../components/dialog/AlreadyInRoomDialog.tsx | 6 ++++ .../src/components/panel/BrowsePanel.tsx | 29 ++++++++++++------- extension/src/components/ui/Header.tsx | 2 +- extension/src/store/roomStore.ts | 21 ++++++++++++++ 4 files changed, 46 insertions(+), 12 deletions(-) diff --git a/extension/src/components/dialog/AlreadyInRoomDialog.tsx b/extension/src/components/dialog/AlreadyInRoomDialog.tsx index df4ba4a7..90a8e4da 100644 --- a/extension/src/components/dialog/AlreadyInRoomDialog.tsx +++ b/extension/src/components/dialog/AlreadyInRoomDialog.tsx @@ -5,15 +5,21 @@ import { DialogOverlay } from "@radix-ui/react-dialog"; import { RoomDialog, baseButtonClassName } from "./RoomDialog"; interface AlreadyInRoomDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; onConfirm: (event: React.MouseEvent) => void; onCancel: (event: React.MouseEvent) => void; } + export const AlreadyInRoomDialog = ({ + open, + onOpenChange, onConfirm, onCancel, }: AlreadyInRoomDialogProps) => { return ( { const { home } = useRoomActions(); const { join } = useRoomActions(); - const { id } = useRoomData(); + const { checkAlreadyInRoom } = useRoomActions(); const [showDialog, setShowDialog] = React.useState(false); const [inputRoomId, setInputRoomId] = React.useState(""); const { data, loading, getNext, hasNext } = usePaginate({ baseQuery: roomQuery, hookLimit: HOOK_LIMIT, }); + React.useEffect(() => { + console.log("showDialog changed to:", showDialog); + }, [showDialog]); const onJoinRoom = React.useMemo(() => { return throttle( @@ -38,15 +42,18 @@ export const BrowsePanel = () => { roomId: string ) => { reactEvent.stopPropagation(); - if (roomId === id) { + const alreadyInRoom = await checkAlreadyInRoom(roomId); + if (alreadyInRoom) { + console.log("Already in the room - opening dialog"); setShowDialog(true); return; } + console.log("Joining room:", roomId); await join(roomId); }, 1000 ); - }, [join, id]); + }, [join, checkAlreadyInRoom]); const onJoinAnyway = React.useMemo(() => { return throttle( @@ -73,12 +80,12 @@ export const BrowsePanel = () => { return (
- {showDialog && ( - - )} - - {/* */} - +
{

- CodeBuddy + CodeBuddy2

); diff --git a/extension/src/store/roomStore.ts b/extension/src/store/roomStore.ts index e7302f3c..0bdb977a 100644 --- a/extension/src/store/roomStore.ts +++ b/extension/src/store/roomStore.ts @@ -110,6 +110,7 @@ interface RoomAction { selectSidebarTab: (identifier: SidebarTabIdentifier) => void; closeSidebarTab: () => void; getVariables: (url: string) => Question["variables"] | undefined; + checkAlreadyInRoom: (id: Id) => Promise; }; peers: { update: (id: Id, peer: Partial) => Promise; @@ -411,6 +412,26 @@ const createRoomStore = (background: BackgroundProxy, appStore: AppStore) => { }); } }, + checkAlreadyInRoom: async (id: string) => { + try { + const username = appStore + .getState() + .actions.getAuthUser().username; + const room = await db.room.get(id); + if (room && Object.keys(room.users).includes(username)) { + console.log(`User ${username} is already in room ${id}`); + set((state) => { + state.status = RoomStatus.IN_ROOM; + }); + + return true; + } + return false; + } catch (error) { + console.error("Failed to check already in room", error); + return false; + } + }, leave: async () => { try { get().actions.room.loading();