BC-7954 - Rename roomName param to parentId (#104)

src/App.tsx

@@ -2,7 +2,7 @@ import { ToastContainer } from "react-toastify";
 import UsersInfo from "./components/UsersInfo";
 import Editor from "./components/Editor";
 import { useJwtHandler } from "./hooks/useJwtHandler";
-import { roomId } from "./stores/setup";
+import { parentId } from "./stores/setup";
 import { useTldrawSettings } from "./hooks/useTldrawSettings";
 
 function App() {
@@ -20,7 +20,7 @@ function App() {
         <UsersInfo isFocusMode={isFocusMode} isDarkMode={isDarkMode} />
         <div className="tldraw">
           <Editor
-            roomId={roomId}
+            parentId={parentId}
             darkModeHandler={handleDarkModeChange}
             focusModeHandler={handleFocusModeChange}
           />

src/components/Editor.tsx

@@ -7,11 +7,11 @@ import CustomCursor from "./CustomCursor";
 import { useTldrawSettings } from "../hooks/useTldrawSettings";
 
 function Editor({
-  roomId,
+  parentId,
   darkModeHandler,
   focusModeHandler,
 }: {
-  roomId: string;
+  parentId: string;
   darkModeHandler: (isDarkMode: boolean) => void;
   focusModeHandler: (isFocusMode: boolean) => void;
 }) {
@@ -26,7 +26,7 @@ function Editor({
     isReadOnly,
     ...events
   } = useMultiplayerState({
-    roomId,
+    parentId,
     setIsDarkMode: darkModeHandler,
     setIsFocusMode: focusModeHandler,
   });

src/configuration/api/api.configuration.ts

@@ -2,7 +2,7 @@ export const API = {
   FILE_UPLOAD: "/api/v3/file/upload/school/SCHOOLID/boardnodes/CONTEXTID",
   FILE_DELETE: "/api/v3/file/delete/FILERECORD_ID",
   FILE_RESTORE: "/api/v3/file/restore/FILERECORD_ID",
-  LOGIN_REDIRECT: "/login?redirect=/tldraw?roomName=ROOMID",
+  LOGIN_REDIRECT: "/login?redirect=/tldraw?parentId=PARENTID",
   USER_DATA: `/api/v3/user/me`,
   ENV_CONFIG: `/api/v3/config/public`,
 };

src/hooks/useJwtHandler.test.ts

@@ -5,7 +5,7 @@ import { useJwtHandler } from "./useJwtHandler";
 
 vi.mock("../stores/setup", () => {
   return {
-    roomId: "test_room_id",
+    parentId: "test_parent_id",
   };
 });
 

src/hooks/useMultiplayerState.test.ts

@@ -144,7 +144,7 @@ describe("useMultiplayerState hook", () => {
   };
 
   const multiPlayerProps = {
-    roomId: "testRoom",
+    parentId: "testParent",
     setIsDarkMode: vi.fn(),
     setIsFocusMode: vi.fn(),
   };
@@ -161,7 +161,7 @@ describe("useMultiplayerState hook", () => {
       result.current.onMount(app);
     });
 
-    expect(loadRoomSpy).toHaveBeenCalledWith("testRoom");
+    expect(loadRoomSpy).toHaveBeenCalledWith("testParent");
     expect(pauseSpy).toHaveBeenCalled();
   });
 
@@ -266,7 +266,7 @@ describe("useMultiplayerState hook", () => {
     const { result } = renderHook(() => useMultiplayerState(multiPlayerProps));
 
     act(() => {
-      app.loadRoom("testRoom");
+      app.loadRoom("testParent");
       result.current.onChangePresence(app, user);
     });
 

src/hooks/useMultiplayerState.ts

@@ -55,13 +55,13 @@ import { deleteAsset, handleAssets } from "../utils/handleAssets";
 declare const window: Window & { app: TldrawApp };
 
 interface MultiplayerStateProps {
-  roomId: string;
+  parentId: string;
   setIsDarkMode: (isDarkMode: boolean) => void;
   setIsFocusMode: (isFocusMode: boolean) => void;
 }
 
 export function useMultiplayerState({
-  roomId,
+  parentId,
   setIsDarkMode,
   setIsFocusMode,
 }: MultiplayerStateProps) {
@@ -130,8 +130,8 @@ export function useMultiplayerState({
 
   const onMount = useCallback(
     (app: TldrawApp) => {
-      app.loadRoom(roomId);
-      app.document.name = `board-${roomId}`;
+      app.loadRoom(parentId);
+      app.document.name = `board-${parentId}`;
       // Turn off the app's own undo / redo stack
       app.pause();
       // Put the state into the window, for debugging
@@ -320,7 +320,7 @@ export function useMultiplayerState({
           }
 
           const { document, fileHandle } = result;
-          await importAssetsToS3(document, roomId, user!.schoolId);
+          await importAssetsToS3(document, parentId, user!.schoolId);
 
           yShapes.clear();
           yBindings.clear();
@@ -341,7 +341,7 @@ export function useMultiplayerState({
         app.setIsLoading(false);
       };
     },
-    [onSaveAs, roomId],
+    [onSaveAs, parentId],
   );
 
   const onAssetCreate = useCallback(
@@ -378,7 +378,7 @@ export function useMultiplayerState({
           fileExtension,
           id,
           user!.schoolId,
-          roomId,
+          parentId,
         );
 
         return url;
@@ -388,7 +388,7 @@ export function useMultiplayerState({
 
       return false;
     },
-    [roomId],
+    [parentId],
   );
 
   const onPatch = useCallback(
@@ -486,14 +486,14 @@ export function useMultiplayerState({
         const url = URL.createObjectURL(blob);
         const link = document.createElement("a");
         link.href = url;
-        link.download = `${roomId}_export.${info.type}`;
+        link.download = `${parentId}_export.${info.type}`;
         link.click();
       } catch (error) {
         handleError("An error occurred while exporting to image", error);
       }
       app.setIsLoading(false);
     },
-    [roomId],
+    [parentId],
   );
 
   // Document Changes --------

src/stores/setup.ts

@@ -3,7 +3,7 @@ import { Doc, Map, UndoManager } from "yjs";
 import { WebsocketProvider } from "y-websocket";
 import { Room } from "@y-presence/client";
 import { UserPresence } from "../types/UserPresence";
-import { getConnectionOptions, getRoomId } from "../utils/connectionOptions";
+import { getConnectionOptions, getParentId } from "../utils/connectionOptions";
 import { getEnvs } from "../utils/envConfig";
 import { getUserData } from "../utils/userData";
 import {
@@ -26,11 +26,11 @@ handleRedirectIfNotValid(userResult, envs);
 setDefaultState();
 
 const user = userResult.user;
-const roomId = getRoomId();
+const parentId = getParentId();
 const doc = new Doc();
 const provider = new WebsocketProvider(
   connectionOptions.websocketUrl,
-  roomId,
+  parentId,
   doc,
   {
     connect: true,
@@ -69,7 +69,7 @@ const resumeSync = () => {
 export {
   envs,
   user,
-  roomId,
+  parentId,
   doc,
   provider,
   room,

src/utils/boardImportUtils.ts

@@ -49,7 +49,7 @@ const openFromFileSystem = async (): Promise<null | {
 
 const importAssetsToS3 = async (
   document: TDDocument,
-  roomId: string,
+  parentId: string,
   schoolId: string,
 ): Promise<void> => {
   const assets = Object.values(document.assets);
@@ -59,7 +59,7 @@ const importAssetsToS3 = async (
   const blobsForUpload = await Promise.all(blobActions);
 
   const uploadActions = blobsForUpload.map((blob, index) =>
-    uploadAction(blob, roomId, schoolId, assets[index]),
+    uploadAction(blob, parentId, schoolId, assets[index]),
   );
   const uploadBlobResults = await Promise.all(uploadActions);
 
@@ -76,7 +76,7 @@ const base64ToBlobAction = (base64: string): Promise<Blob> => {
 
 const uploadAction = (
   blob: Blob,
-  roomId: string,
+  parentId: string,
   schoolId: string,
   asset: TDAsset,
 ): Promise<{ url: string }> => {
@@ -93,7 +93,7 @@ const uploadAction = (
 
   const fileUploadUrl = API.FILE_UPLOAD.replace("SCHOOLID", schoolId).replace(
     "CONTEXTID",
-    roomId,
+    parentId,
   );
   const promise = fetch(fileUploadUrl, {
     method: "POST",

src/utils/connectionOptions.ts

@@ -30,13 +30,13 @@ const getConnectionOptions = async (): Promise<{
   return connectionOptions;
 };
 
-const getRoomId = () => {
+const getParentId = () => {
   const urlParams = new URLSearchParams(window.location.search);
-  const roomId = urlParams.get("roomName") ?? "";
+  const parentId = urlParams.get("parentId") ?? "";
 
-  validateId(roomId);
+  validateId(parentId);
 
-  return roomId;
+  return parentId;
 };
 
-export { getConnectionOptions, getRoomId };
+export { getConnectionOptions, getParentId };

src/utils/fileUpload.ts

@@ -5,7 +5,7 @@ export const uploadFileToStorage = async (
   fileExtension: string,
   assetId: string,
   schoolId: string,
-  roomId: string,
+  parentId: string,
 ): Promise<string> => {
   const fileToUpload = new File([file], `${assetId}.${fileExtension}`, {
     type: file.type,
@@ -15,7 +15,7 @@ export const uploadFileToStorage = async (
   formData.append("file", fileToUpload);
   const fileUploadUrl = API.FILE_UPLOAD.replace("SCHOOLID", schoolId).replace(
     "CONTEXTID",
-    roomId,
+    parentId,
   );
 
   const response = await fetch(fileUploadUrl, {

src/utils/redirectUtils.ts

@@ -1,18 +1,18 @@
-import { getRoomId } from "./connectionOptions";
+import { getParentId } from "./connectionOptions";
 import { UserResult } from "../types/User";
 import { Envs } from "../types/Envs";
 import { setErrorData } from "./errorData";
 import { HttpStatusCode } from "../types/StatusCodeEnums";
 import { API } from "../configuration/api/api.configuration";
 
 const redirectToLoginPage = () => {
-  const roomId = getRoomId();
+  const parentId = getParentId();
   if (import.meta.env.PROD) {
-    const redirectUrl = API.LOGIN_REDIRECT.replace("ROOMID", roomId);
+    const redirectUrl = API.LOGIN_REDIRECT.replace("PARENTID", parentId);
     window.location.assign(redirectUrl);
   } else {
     window.location.assign(
-      `http://localhost:4000/login?redirect=tldraw?roomName=${roomId}`,
+      `http://localhost:4000/login?redirect=tldraw?parentId=${parentId}`,
     );
   }
 };