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>

apps/dotcom/src/components/ShareMenu.tsx

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