56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { atom, useAtom } from "jotai";
|
|
import { useCallback, useState } from "react";
|
|
|
|
const roomNameAtom = atom(getRoomNameFromUrl())
|
|
|
|
function useRoomName() {
|
|
const [roomName, setRoomName] = useAtom(roomNameAtom)
|
|
|
|
const updateRoomName = useCallback(
|
|
(newName: string) => {
|
|
setRoomName(newName);
|
|
console.log("[Rooms] update room name", newName);
|
|
},
|
|
[setRoomName]
|
|
);
|
|
|
|
const updateAndSubmitRoomName = useCallback(
|
|
(newName: string) => {
|
|
setRoomName(newName);
|
|
setRoomNameInUrl(newName);
|
|
setRoomNameInTitle(newName);
|
|
console.log("[Rooms] update and submit room name", newName);
|
|
},
|
|
[setRoomName]
|
|
)
|
|
|
|
const submitRoomName = useCallback(() => {
|
|
setRoomNameInUrl(roomName);
|
|
setRoomNameInTitle(roomName);
|
|
}, [roomName]);
|
|
|
|
return { roomName, updateRoomName, updateAndSubmitRoomName, 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 };
|