54 lines
1.3 KiB
TypeScript
54 lines
1.3 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 }
|