Prevent unnecessary fetching of readonly slugs (#3663)

Prevents unnecessary fetching of readonly slugs. We only need to fetch
it if we don't have it yet.

There was also a weird issue with `window.location.href` sometimes
returning encoded search params and sometimes decoded ones:


![image](https://github.com/tldraw/tldraw/assets/2523721/ca1e36c6-5e86-4e48-9350-c53de32a9f2e)

This then caused an additional fetch in the `setInterval` since the
[urls did not
match](https://github.com/tldraw/tldraw/blob/main/apps/dotcom/src/components/ShareMenu.tsx#L140).

![CleanShot 2024-04-30 at 14 37
12](https://github.com/tldraw/tldraw/assets/2523721/b1c540aa-902a-4574-a8e7-a0507f7dbda2)

Resolves https://github.com/tldraw/tldraw/issues/3661

### 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. Open a multiplayer room. You should only see one fetch for the
readonly slug.

1. Open a local room.
2. Share it. You should only see one fetch for the readonly slug.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Prevent unnecessary fetching of readonly slugs.
This commit is contained in:
Mitja Bezenšek 2024-05-03 12:47:58 +02:00 committed by GitHub
parent 1366a15b7a
commit c308cc2edd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 12 deletions

View file

@ -124,16 +124,24 @@ export const ShareMenu = React.memo(function ShareMenu() {
})
}
getReadonlyUrl().then((readonlyUrl) => {
if (readonlyUrl && !shareState.readonlyQrCodeDataUrl) {
// fetch the readonly QR code data URL
createQRCodeImageDataString(readonlyUrl).then((dataUrl) => {
if (!cancelled) {
setShareState((s) => ({ ...s, readonlyUrl, readonlyQrCodeDataUrl: dataUrl }))
}
})
}
})
if (!shareState.readonlyUrl) {
getReadonlyUrl().then((readonlyUrl) => {
if (readonlyUrl) {
// fetch the readonly QR code data URL
createQRCodeImageDataString(readonlyUrl).then((dataUrl) => {
if (!cancelled) {
setShareState((s) => ({ ...s, readonlyUrl, readonlyQrCodeDataUrl: dataUrl }))
}
})
}
})
} else if (!shareState.readonlyQrCodeDataUrl) {
createQRCodeImageDataString(shareState.readonlyUrl).then((dataUrl) => {
if (!cancelled) {
setShareState((s) => ({ ...s, readonlyQrCodeDataUrl: dataUrl }))
}
})
}
const interval = setInterval(() => {
const url = window.location.href

View file

@ -70,7 +70,12 @@ async function getSnapshotLink(
return ''
}
const paramsToUse = getViewportUrlQuery(editor)
const params = paramsToUse ? `?${new URLSearchParams(paramsToUse).toString()}` : ''
// React router has an issue with the search params being encoded, which can cause multiple navigations
// and can also make us believe that the URL has changed when it hasn't.
// https://github.com/tldraw/tldraw/pull/3663#discussion_r1584946080
const params = paramsToUse
? decodeURIComponent(`?${new URLSearchParams(paramsToUse).toString()}`)
: ''
return new Blob([`${window.location.origin}/${SNAPSHOT_PREFIX}/${response.roomId}${params}`], {
type: 'text/plain',
})
@ -134,7 +139,13 @@ export function useSharing(): TLUiOverrides {
const query = getViewportUrlQuery(editor)
const origin = window.location.origin
const pathname = `/${ROOM_PREFIX}/${response.slug}?${new URLSearchParams(query ?? {}).toString()}`
// React router has an issue with the search params being encoded, which can cause multiple navigations
// and can also make us believe that the URL has changed when it hasn't.
// https://github.com/tldraw/tldraw/pull/3663#discussion_r1584946080
const pathname = decodeURIComponent(
`/${ROOM_PREFIX}/${response.slug}?${new URLSearchParams(query ?? {}).toString()}`
)
if (runningInIFrame) {
window.open(`${origin}${pathname}`)
} else {