New add existing room/space modal (#2451)

src/app/features/lobby/SpaceItem.tsx

@@ -30,12 +30,12 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import * as css from './SpaceItem.css';
 import * as styleCss from './style.css';
 import { useDraggableItem } from './DnD';
-import { openSpaceAddExisting } from '../../../client/action/navigation';
 import { stopPropagation } from '../../utils/keyboard';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
 import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
+import { AddExistingModal } from '../add-existing';
 
 function SpaceProfileLoading() {
   return (
@@ -243,6 +243,7 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
 function AddRoomButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
   const openCreateRoomModal = useOpenCreateRoomModal();
+  const [addExisting, setAddExisting] = useState(false);
 
   const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
@@ -254,7 +255,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
   };
 
   const handleAddExisting = () => {
-    openSpaceAddExisting(item.roomId);
+    setAddExisting(true);
     setCords(undefined);
   };
 
@@ -300,6 +301,9 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
       >
         <Text size="B300">Add Room</Text>
       </Chip>
+      {addExisting && (
+        <AddExistingModal parentId={item.roomId} requestClose={() => setAddExisting(false)} />
+      )}
     </PopOut>
   );
 }
@@ -307,6 +311,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
 function AddSpaceButton({ item }: { item: HierarchyItem }) {
   const [cords, setCords] = useState<RectCords>();
   const openCreateSpaceModal = useOpenCreateSpaceModal();
+  const [addExisting, setAddExisting] = useState(false);
 
   const handleAddSpace: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
@@ -318,7 +323,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
   };
 
   const handleAddExisting = () => {
-    openSpaceAddExisting(item.roomId, true);
+    setAddExisting(true);
     setCords(undefined);
   };
   return (
@@ -363,6 +368,9 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
       >
         <Text size="B300">Add Space</Text>
       </Chip>
+      {addExisting && (
+        <AddExistingModal space parentId={item.roomId} requestClose={() => setAddExisting(false)} />
+      )}
     </PopOut>
   );
 }