From f0f133fdd2041bb495a2d2154e0584dd6dce8aaa Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Mon, 4 Mar 2024 16:21:59 +0000
Subject: [PATCH] Shorten url state (#3041)

This PR shortens the URL parameters for the dot com. Old formal still
works but this is shorter (it has bugged me for ages).

Before:
tldraw.com/r/ok?viewport=0,0,1080,720&page=page:ashdsad_sadsadasd
After:
tldraw.com/r/ok?v=0,0,1080,720&p=ashdsad_sadsadasd


### Change Type

- [x] `internal`

### Test Plan

1. Try the old url parameter format.
2. Try the new one.

### Release Notes

- Shortens url parameters for dot com.
---
 .../src/components/MultiplayerEditor.tsx      |  2 +-
 apps/dotcom/src/hooks/useUrlState.ts          | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/dotcom/src/components/MultiplayerEditor.tsx b/apps/dotcom/src/components/MultiplayerEditor.tsx
index 2b1b8e2de..6923a76bb 100644
--- a/apps/dotcom/src/components/MultiplayerEditor.tsx
+++ b/apps/dotcom/src/components/MultiplayerEditor.tsx
@@ -182,7 +182,7 @@ export function UrlStateSync() {
 		window.history.replaceState(
 			{},
 			document.title,
-			window.location.pathname + `?viewport=${params.viewport}&page=${params.page}`
+			window.location.pathname + `?v=${params.v}&p=${params.p}`
 		)
 	}, [])
 
diff --git a/apps/dotcom/src/hooks/useUrlState.ts b/apps/dotcom/src/hooks/useUrlState.ts
index f152fcbbc..a6b719e99 100644
--- a/apps/dotcom/src/hooks/useUrlState.ts
+++ b/apps/dotcom/src/hooks/useUrlState.ts
@@ -2,10 +2,15 @@ import { default as React, useEffect } from 'react'
 import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from 'tldraw'
 
 const PARAMS = {
+	// deprecated
 	viewport: 'viewport',
 	page: 'page',
+	// current
+	v: 'v',
+	p: 'p',
 } as const
-export type UrlStateParams = Record<keyof typeof PARAMS, string>
+
+export type UrlStateParams = Partial<Record<keyof typeof PARAMS, string>>
 
 const viewportFromString = (str: string) => {
 	const [x, y, w, h] = str.split(',').map((n) => parseInt(n, 10))
@@ -28,8 +33,8 @@ const viewportToString = (
 export const getViewportUrlQuery = (editor: Editor): UrlStateParams | null => {
 	if (!editor.getViewportPageBounds()) return null
 	return {
-		[PARAMS.viewport]: viewportToString(editor.getViewportPageBounds()),
-		[PARAMS.page]: editor.getCurrentPageId(),
+		[PARAMS.v]: viewportToString(editor.getViewportPageBounds()),
+		[PARAMS.p]: editor.getCurrentPageId()?.split(':')[1],
 	}
 }
 
@@ -45,8 +50,8 @@ export function useUrlState(onChangeUrl: (params: UrlStateParams) => void) {
 
 		const url = new URL(location.href)
 
-		if (url.searchParams.has(PARAMS.viewport)) {
-			const newViewportRaw = url.searchParams.get(PARAMS.viewport)
+		if (url.searchParams.has(PARAMS.viewport) || url.searchParams.has(PARAMS.v)) {
+			const newViewportRaw = url.searchParams.get(PARAMS.viewport) ?? url.searchParams.get(PARAMS.v)
 			if (newViewportRaw) {
 				try {
 					const viewport = viewportFromString(newViewportRaw)
@@ -65,8 +70,9 @@ export function useUrlState(onChangeUrl: (params: UrlStateParams) => void) {
 				}
 			}
 		}
-		if (url.searchParams.has(PARAMS.page)) {
-			const newPageId = url.searchParams.get(PARAMS.page)
+		if (url.searchParams.has(PARAMS.page) || url.searchParams.has(PARAMS.p)) {
+			const newPageId =
+				url.searchParams.get(PARAMS.page) ?? 'page:' + url.searchParams.get(PARAMS.p)
 			if (newPageId) {
 				if (editor.store.has(newPageId as TLPageId)) {
 					editor.setCurrentPage(newPageId as TLPageId)