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:
Mitja Bezenšek 2024-05-13 12:58:34 +02:00 committed by GitHub
parent 3dcd2a851c
commit 7226afc1ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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 () => {