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:
parent
1366a15b7a
commit
c308cc2edd
2 changed files with 31 additions and 12 deletions
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue