Fix readonly fetching happening too often. (#3732)
The problem happened because we cleared the `readonlyUrl` from shared state. This was happening every time the url changed (so panning, zooming,...). Now, instead of clearing the `readonlyUrl` we pull out the room prefix and slug from the readonly url. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [ ] `sdk` — Changes the tldraw SDK - [x] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Create a shared room. 2. Move the camera around. 3. We should not be constantly fetching the readonly slug. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Fix an issue where readonly slug was being fetched every time the url changed (panning, zooming,...). --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
This commit is contained in:
parent
3dcd2a851c
commit
7226afc1ff
1 changed files with 17 additions and 4 deletions
|
@ -32,7 +32,7 @@ type ShareState = {
|
|||
state: ShareCurrentState
|
||||
qrCodeDataUrl: string
|
||||
url: string
|
||||
readonlyUrl: string | null
|
||||
readonlyUrl?: string
|
||||
readonlyQrCodeDataUrl: string
|
||||
}
|
||||
|
||||
|
@ -47,10 +47,23 @@ function isSharedReadWriteUrl(pathname: string) {
|
|||
return pathname.startsWith(`/${ROOM_PREFIX}/`)
|
||||
}
|
||||
|
||||
function getFreshShareState(): ShareState {
|
||||
function getFreshShareState(previousReadonlyUrl?: string): ShareState {
|
||||
const isSharedReadWrite = isSharedReadWriteUrl(window.location.pathname)
|
||||
const isSharedReadOnly = isSharedReadonlyUrl(window.location.pathname)
|
||||
|
||||
let readonlyUrl
|
||||
if (isSharedReadOnly) {
|
||||
readonlyUrl = window.location.href
|
||||
} else if (previousReadonlyUrl) {
|
||||
// Pull out the room prefix and the readonly slug from the existing readonly url
|
||||
const segments = window.location.pathname.split('/')
|
||||
const roSegments = new URL(previousReadonlyUrl).pathname.split('/')
|
||||
segments[1] = roSegments[1]
|
||||
segments[2] = roSegments[2]
|
||||
const newPathname = segments.join('/')
|
||||
readonlyUrl = `${window.location.origin}${newPathname}${window.location.search}`
|
||||
}
|
||||
|
||||
return {
|
||||
state: isSharedReadWrite
|
||||
? SHARE_CURRENT_STATE.SHARED_READ_WRITE
|
||||
|
@ -58,7 +71,7 @@ function getFreshShareState(): ShareState {
|
|||
? SHARE_CURRENT_STATE.SHARED_READ_ONLY
|
||||
: SHARE_CURRENT_STATE.OFFLINE,
|
||||
url: window.location.href,
|
||||
readonlyUrl: isSharedReadOnly ? window.location.href : null,
|
||||
readonlyUrl,
|
||||
qrCodeDataUrl: '',
|
||||
readonlyQrCodeDataUrl: '',
|
||||
}
|
||||
|
@ -146,7 +159,7 @@ export const ShareMenu = React.memo(function ShareMenu() {
|
|||
const interval = setInterval(() => {
|
||||
const url = window.location.href
|
||||
if (shareState.url === url) return
|
||||
setShareState(getFreshShareState())
|
||||
setShareState(getFreshShareState(shareState.readonlyUrl))
|
||||
}, 300)
|
||||
|
||||
return () => {
|
||||
|
|
Loading…
Reference in a new issue