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..90a8e4da --- /dev/null +++ b/extension/src/components/dialog/AlreadyInRoomDialog.tsx @@ -0,0 +1,53 @@ +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 { 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 ( + e.stopPropagation(), + }, + }} + overlay={ + + } + > +
+ + + + +
+
+ ); +}; diff --git a/extension/src/components/panel/BrowsePanel.tsx b/extension/src/components/panel/BrowsePanel.tsx index bf8a7bbb..b8f57e4d 100644 --- a/extension/src/components/panel/BrowsePanel.tsx +++ b/extension/src/components/panel/BrowsePanel.tsx @@ -1,3 +1,4 @@ +import { AlreadyInRoomDialog } from "@cb/components/dialog/AlreadyInRoomDialog"; import { baseButtonClassName } from "@cb/components/dialog/RoomDialog"; import { DefaultTable } from "@cb/components/table/DefaultTable"; import { DefaultTableBody } from "@cb/components/table/DefaultTableBody"; @@ -6,12 +7,14 @@ 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 usePaginate from "@cb/hooks/usePaginate"; 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"; @@ -21,11 +24,16 @@ const HOOK_LIMIT = 100; export const BrowsePanel = () => { const { home } = useRoomActions(); const { join } = useRoomActions(); + 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( @@ -34,11 +42,36 @@ export const BrowsePanel = () => { roomId: string ) => { reactEvent.stopPropagation(); + 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]); + }, [join, checkAlreadyInRoom]); + + const onJoinAnyway = React.useMemo(() => { + return throttle( + async ( + reactEvent: React.MouseEvent | React.KeyboardEvent + ) => { + reactEvent.stopPropagation(); + setShowDialog(false); + await join(inputRoomId); + console.log("Joining anyway"); + }, + 1000 + ); + }, [join, inputRoomId]); + + const onCancel = () => { + setShowDialog(false); + }; const onChangeRoomIdInput = (e: React.ChangeEvent) => { e.preventDefault(); @@ -47,6 +80,12 @@ export const BrowsePanel = () => { return (
+
{

- 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();