Organize paths. (tldraw#4786)

Organize file paths. Should help us stay a bit more consistent when defining and using paths of our app. ### Change type - [ ] `bugfix` - [x] `improvement` - [ ] `feature` - [ ] `api` - [ ] `other` ### Release notes - Help with tla route / paths organization.
fork-house · Oct 28, 2024 · 9be3b6f · 9be3b6f
1 parent 0a5a334
commit 9be3b6f
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 17 deletions.
diff --git a/apps/dotcom/client/src/routes.tsx b/apps/dotcom/client/src/routes.tsx
@@ -13,6 +13,7 @@ import { DefaultErrorFallback } from './components/DefaultErrorFallback/DefaultE
 import { ErrorPage } from './components/ErrorPage/ErrorPage'
 import { notFound } from './pages/not-found'
 import { TlaNotFoundError } from './tla/utils/notFoundError'
+import { PREFIX } from './tla/utils/urls'
 
 const LoginRedirectPage = lazy(() => import('./components/LoginRedirectPage/LoginRedirectPage'))
 
@@ -92,16 +93,22 @@ export const router = createRoutesFromElements(
 		{/* begin tla */}
 		<Route element={<NoIndex />}>
 			<Route lazy={() => import('./tla/providers/TlaRootProviders')}>
-				<Route path="/q" lazy={() => import('./tla/pages/local')} />
+				<Route path={`/${PREFIX.tla}`} lazy={() => import('./tla/pages/local')} />
 				{/* File view */}
-				<Route path="/q/f/:fileSlug" lazy={() => import('./tla/pages/file')} />
-				<Route path="/q/p/:fileSlug" lazy={() => import('./tla/pages/publish')} />
+				<Route
+					path={`/${PREFIX.tla}/${PREFIX.file}/:fileSlug`}
+					lazy={() => import('./tla/pages/file')}
+				/>
+				<Route
+					path={`/${PREFIX.tla}/${PREFIX.publish}/:fileSlug`}
+					lazy={() => import('./tla/pages/publish')}
+				/>
 				{/* Views that require login */}
 				<Route lazy={() => import('./tla/providers/RequireSignedInUser')}>
 					{/* User settings */}
-					<Route path="/q/profile" lazy={() => import('./tla/pages/profile')} />
+					<Route path={`/${PREFIX.tla}/profile`} lazy={() => import('./tla/pages/profile')} />
 					{/* Internal */}
-					<Route path="/q/debug" lazy={() => import('./tla/pages/debug')} />
+					<Route path={`/${PREFIX.tla}/debug`} lazy={() => import('./tla/pages/debug')} />
 				</Route>
 			</Route>
 		</Route>

diff --git a/apps/dotcom/client/src/tla/components/TlaErrorContent/TlaErrorContent.tsx b/apps/dotcom/client/src/tla/components/TlaErrorContent/TlaErrorContent.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { Link } from 'react-router-dom'
 import { useRaw } from '../../hooks/useRaw'
+import { getRootPath } from '../../utils/urls'
 import styles from './error.module.css'
 
 type TlaPageErrorType =
@@ -12,7 +13,7 @@ type TlaPageErrorType =
 function ErrorLinkHome() {
 	const raw = useRaw()
 	return (
-		<Link className={classNames(styles.link, 'tla-text_ui__regular')} to="/q/">
+		<Link className={classNames(styles.link, 'tla-text_ui__regular')} to={getRootPath()}>
 			{raw('Take me home')}
 		</Link>
 	)

diff --git a/apps/dotcom/client/src/tla/components/dialogs/TlaDeleteFileDialog.tsx b/apps/dotcom/client/src/tla/components/dialogs/TlaDeleteFileDialog.tsx
@@ -14,6 +14,7 @@ import {
 import { useApp } from '../../hooks/useAppState'
 import { useIsFileOwner } from '../../hooks/useIsFileOwner'
 import { useRaw } from '../../hooks/useRaw'
+import { getRootPath } from '../../utils/urls'
 
 export function TlaDeleteFileDialog({
 	fileId,
@@ -36,7 +37,7 @@ export function TlaDeleteFileDialog({
 		const result = await app.deleteOrForgetFile(fileId, token)
 		if (result.ok) {
 			if (location.pathname.endsWith(TldrawAppFileRecordType.parseId(fileId))) {
-				navigate('/q')
+				navigate(getRootPath())
 			}
 			onClose()
 		} else {

diff --git a/apps/dotcom/client/src/tla/layouts/TlaAnonLayout/TlaAnonLayout.tsx b/apps/dotcom/client/src/tla/layouts/TlaAnonLayout/TlaAnonLayout.tsx
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'
 import { TlaButton } from '../../components/TlaButton/TlaButton'
 import { usePreventAccidentalDrops } from '../../hooks/usePreventAccidentalDrops'
 import { useRaw } from '../../hooks/useRaw'
+import { getRootPath } from '../../utils/urls'
 import styles from './anon.module.css'
 
 export function TlaAnonLayout({ children }: { children: ReactNode }) {
@@ -18,12 +19,20 @@ export function TlaAnonLayout({ children }: { children: ReactNode }) {
 				</Link>
 				<div className={styles.signInButtons}>
 					<SignedOut>
-						<SignInButton mode="modal" forceRedirectUrl="/q" signUpForceRedirectUrl="/q">
+						<SignInButton
+							mode="modal"
+							forceRedirectUrl={getRootPath()}
+							signUpForceRedirectUrl={getRootPath()}
+						>
 							<TlaButton data-testid="tla-signin-button" variant="primary" ghost>
 								{raw('Log in')}
 							</TlaButton>
 						</SignInButton>
-						<SignInButton mode="modal" forceRedirectUrl="/q" signUpForceRedirectUrl="/q">
+						<SignInButton
+							mode="modal"
+							forceRedirectUrl={getRootPath()}
+							signUpForceRedirectUrl={getRootPath()}
+						>
 							<TlaButton data-testid="tla-signup-button">{raw('Sign up')}</TlaButton>
 						</SignInButton>
 					</SignedOut>

diff --git a/apps/dotcom/client/src/tla/layouts/TlaErrorLayout/TlaErrorLayout.tsx b/apps/dotcom/client/src/tla/layouts/TlaErrorLayout/TlaErrorLayout.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { TlaCloseButton } from '../../components/TlaCloseButton/TlaCloseButton'
 import { usePreventAccidentalDrops } from '../../hooks/usePreventAccidentalDrops'
+import { getRootPath } from '../../utils/urls'
 import styles from './error-layout.module.css'
 
 export function TlaErrorLayout({ children }: { children: ReactNode }) {
@@ -10,7 +11,7 @@ export function TlaErrorLayout({ children }: { children: ReactNode }) {
 
 	return (
 		<div data-sidebar="false">
-			<TlaCloseButton onClose={() => navigate('/q/')} />
+			<TlaCloseButton onClose={() => navigate(getRootPath())} />
 			<div className={styles.page}>
 				<div className={styles.pageCentered}>{children}</div>
 			</div>

diff --git a/apps/dotcom/client/src/tla/pages/debug.tsx b/apps/dotcom/client/src/tla/pages/debug.tsx
@@ -10,6 +10,7 @@ import { useRaw } from '../hooks/useRaw'
 import { useSessionState } from '../hooks/useSessionState'
 import { TlaPageLayout } from '../layouts/TlaPageLayout/TlaPageLayout'
 import { getLocalSessionState, updateLocalSessionState } from '../utils/local-session-state'
+import { getRootPath } from '../utils/urls'
 
 export function Component() {
 	const raw = useRaw()
@@ -22,7 +23,7 @@ export function Component() {
 			<h2>{raw('Users')}</h2>
 			<TlaSpacer height={20} />
 			<div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 'fit-content' }}>
-				<SignOutButton redirectUrl="/q">
+				<SignOutButton redirectUrl={getRootPath()}>
 					<TlaButton variant="warning">{raw('Sign out')}</TlaButton>
 				</SignOutButton>
 			</div>

diff --git a/apps/dotcom/client/src/tla/providers/RequireSignedInUser.tsx b/apps/dotcom/client/src/tla/providers/RequireSignedInUser.tsx
@@ -1,11 +1,12 @@
 import { Navigate, Outlet } from 'react-router-dom'
 import { useMaybeApp } from '../hooks/useAppState'
+import { getRootPath } from '../utils/urls'
 
 export function Component() {
 	const app = useMaybeApp()
 	if (!app) {
 		// todo: add a back-to location in the location state, redirect back to here after sign in
-		return <Navigate to="/q" />
+		return <Navigate to={getRootPath()} />
 	}
 	return <Outlet />
 }
diff --git a/apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx b/apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx
@@ -19,6 +19,7 @@ import { AppStateProvider } from '../hooks/useAppState'
 import { UserProvider } from '../hooks/useUser'
 import '../styles/tla.css'
 import { getLocalSessionState, updateLocalSessionState } from '../utils/local-session-state'
+import { getRootPath } from '../utils/urls'
 
 const assetUrls = getAssetUrlsByImport()
 
@@ -35,7 +36,7 @@ export function Component() {
 	const handleThemeChange = (theme: 'light' | 'dark' | 'system') => setTheme(theme)
 
 	return (
-		<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/q">
+		<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl={getRootPath()}>
 			<SignedInProvider onThemeChange={handleThemeChange}>
 				<div
 					ref={setContainer}

diff --git a/apps/dotcom/client/src/tla/utils/urls.ts b/apps/dotcom/client/src/tla/utils/urls.ts
@@ -1,11 +1,41 @@
-export function getFilePath(fileId: string): string {
-	return `/q/f/${fileId.split(':').pop()}`
+export const PREFIX = {
+	tla: 'q',
+	file: 'f',
+	publish: 'p',
+}
+
+export function buildUrl({ pathname }: { pathname: string }): string {
+	return `/${PREFIX.tla}${pathname}`
+}
+
+export function getRootPath() {
+	return buildUrl({ pathname: '/' })
+}
+
+export function getDebugPath() {
+	return buildUrl({ pathname: '/debug' })
+}
+
+export function getProfilePath() {
+	return buildUrl({ pathname: '/profile' })
+}
+
+export function getFilePath(fileId: string) {
+	return buildUrl({ pathname: `/${PREFIX.file}/${fileId.split(':').pop()}` })
+}
+
+export function getPublishPath(publishSlug: string) {
+	return buildUrl({ pathname: `/${PREFIX.publish}/${publishSlug}` })
+}
+
+function absoluteUrl(path: string) {
+	return `${window.location.origin}${path}`
 }
 
 export function getShareableFileUrl(fileId: string): string {
-	return `${window.location.origin}${getFilePath(fileId)}`
+	return absoluteUrl(getFilePath(fileId))
 }
 
 export function getShareablePublishUrl(publishSlug: string): string {
-	return `${window.location.origin}/q/p/${publishSlug}`
+	return absoluteUrl(getPublishPath(publishSlug))
 }