init backend

frontend/src/hooks/useRoomName.ts

@@ -0,0 +1,45 @@
+import { useCallback, useState } from "react";
+
+function useRoomName() {
+  const [roomName, setRoomName] = useState(getRoomNameFromUrl());
+
+  const updateRoomName = useCallback(
+    (newName: string) => {
+      setRoomName(newName);
+      console.log("[Rooms] update room name", newName);
+    },
+    [setRoomName]
+  );
+
+  const submitRoomName = useCallback(
+    () => {
+      setRoomNameInUrl(roomName);
+      setRoomNameInTitle(roomName);
+    },
+    [roomName]
+  );
+
+  return { roomName, updateRoomName, submitRoomName };
+}
+
+function getRoomNameFromUrl(): string {
+  const pathName = location.pathname;
+  const roomName = pathName
+    .substring(pathName.lastIndexOf("/"), pathName.length)
+    .replace("/", "");
+  console.log("[Rooms] Got roomName from url", roomName);
+  setRoomNameInTitle(roomName);
+  return roomName;
+}
+
+function setRoomNameInUrl(roomName: string) {
+  history.pushState(history.state, "_", roomName);
+}
+
+function setRoomNameInTitle(roomName: string) {
+  if (!!roomName) {
+    document.title = roomName;
+  }
+}
+
+export { useRoomName };