feat: use constants for routes instead of hardcoded strings (#65)

src/lib/components/header.svelte

@@ -6,6 +6,7 @@
 
 	import type { User } from '$lib/stores/user'
 	import { goto } from '$app/navigation'
+	import { ROUTES } from '$lib/routes'
 
 	let cls: string | undefined = undefined
 	export { cls as class }
@@ -16,9 +17,9 @@
 	<div class="header">
 		<span class="title">The Outlet</span>
 		{#if user !== undefined}
-			<Avatar src={user.avatar} on:click={() => goto('/profile')} />
+			<Avatar src={user.avatar} on:click={() => goto(ROUTES.PROFILE)} />
 		{:else}
-			<Button icon={UserIcon} on:click={() => goto('/profile')} />
+			<Button icon={UserIcon} on:click={() => goto(ROUTES.PROFILE)} />
 		{/if}
 	</div>
 	<div class="subheader">

src/lib/components/wallet-connect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
+	import { ROUTES } from '$lib/routes'
 	import Button from './button.svelte'
 	import WalletIcon from './icons/wallet.svelte'
 
@@ -12,7 +13,7 @@
 		icon={WalletIcon}
 		variant="primary"
 		label="Connect wallet to post"
-		on:click={() => goto('/profile')}
+		on:click={() => goto(ROUTES.PROFILE)}
 	/>
 	<div class="explanation">Connect a wallet to access or create your account.</div>
 </div>

src/lib/routes.ts

@@ -0,0 +1,7 @@
+export const ROUTES = {
+	HOME: '/',
+	PROFILE: '/profile',
+	PROFILE_ADDRESS: (address: string) => `/profile/${address}`,
+	PROFILE_NEW: '/profile/new',
+	POST_NEW: '/post/new',
+}

src/routes/+page.svelte

@@ -11,6 +11,7 @@
 	import Button from '$lib/components/button.svelte'
 	import Edit from '$lib/components/icons/edit.svelte'
 	import User from '$lib/components/icons/user.svelte'
+	import { ROUTES } from '$lib/routes'
 </script>
 
 <div>
@@ -23,7 +24,7 @@
 				variant="primary"
 				label="Create post"
 				icon={Edit}
-				on:click={() => goto('/post/new')}
+				on:click={() => goto(ROUTES.POST_NEW)}
 			/>
 		</div>
 	{:else if $profile.key === true}
@@ -32,7 +33,7 @@
 				variant="primary"
 				label="Select identity"
 				icon={User}
-				on:click={() => goto('/profile')}
+				on:click={() => goto(ROUTES.PROFILE)}
 			/>
 			Select an identity to use with your account.
 		</div>
@@ -46,7 +47,7 @@
 		<Post
 			{post}
 			onUserClick={(user) => {
-				goto(`/profile/${user.address}`)
+				goto(ROUTES.PROFILE_ADDRESS(user.address))
 			}}
 		/>
 	{:else}

src/routes/post/new/+page.svelte

@@ -8,6 +8,7 @@
 	import { posts } from '$lib/stores/post'
 	import { goto } from '$app/navigation'
 	import Collaborate from '$lib/components/icons/collaborate.svelte'
+	import { ROUTES } from '$lib/routes'
 
 	let postText = ''
 
@@ -19,7 +20,7 @@
 			text: postText,
 			user: $profile.active,
 		})
-		goto('/')
+		goto(ROUTES.HOME)
 	}
 </script>
 
@@ -32,10 +33,10 @@
 </div>
 
 <div>
-	<Avatar src={$profile.active?.avatar} on:click={() => goto('/profile')} />
+	<Avatar src={$profile.active?.avatar} on:click={() => goto(ROUTES.PROFILE)} />
 	<div>{$profile.active?.name}</div>
 	<div>{$profile.active?.address}</div>
-	<Button variant="secondary" icon={Collaborate} on:click={() => goto('/profile')} />
+	<Button variant="secondary" icon={Collaborate} on:click={() => goto(ROUTES.PROFILE)} />
 </div>
 
 <InputString bind:value={postText} placeholder="Write here..." />

src/routes/profile/+page.svelte

@@ -5,25 +5,30 @@
 	import CodeSigningService from '$lib/components/icons/code-signing-service.svelte'
 	import GroupSecurity from '$lib/components/icons/group-security.svelte'
 	import Identity from '$lib/components/identity.svelte'
+	import { ROUTES } from '$lib/routes'
 	import { profile } from '$lib/stores/profile'
 	import type { User } from '$lib/stores/user'
 
 	const onSelectIdentityClick = (id: User) => {
 		$profile.active = id
-		goto('/')
+		history.back()
 	}
 </script>
 
 <div class="header">
 	<h1>{$profile.key ? 'Choose' : 'Create'} identity</h1>
-	<Button icon={Close} on:click={() => goto('/')} />
+	<Button icon={Close} on:click={() => history.back()} />
 </div>
 <div class="content">
 	{#if $profile.key}
 		{#each $profile.profiles as p}
 			<Identity identity={p} click={onSelectIdentityClick} />
 		{/each}
-		<Button icon={GroupSecurity} label="Create new identity" on:click={() => goto('profile/new')} />
+		<Button
+			icon={GroupSecurity}
+			label="Create new identity"
+			on:click={() => goto(ROUTES.PROFILE_NEW)}
+		/>
 		<span>You can create multiple identities under the same account.</span>
 		<a href="/">Learn more about identities.</a>
 	{:else}

src/routes/profile/new/+page.svelte

@@ -9,6 +9,7 @@
 	import { profile } from '$lib/stores/profile'
 	import { formatAddress } from '$lib/utils'
 	import { goto } from '$app/navigation'
+	import { ROUTES } from '$lib/routes'
 
 	const generateRandomHex = (size: number) =>
 		`0x${[...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')}`
@@ -27,7 +28,7 @@
 
 <div class="header">
 	<h1>Create identity</h1>
-	<Button icon={Close} on:click={() => goto('/profile')} />
+	<Button icon={Close} on:click={() => goto(ROUTES.PROFILE)} />
 </div>
 <div class="content">
 	<Input title="Public address">
@@ -59,7 +60,7 @@
 			on:click={() => {
 				const user = { address, name, avatar: image }
 				$profile.profiles = [...$profile.profiles, user]
-				goto('/profile')
+				goto(ROUTES.PROFILE)
 			}}
 		/>
 	</div>

tests/test.ts

@@ -1,6 +1,7 @@
+import { ROUTES } from '$lib/routes'
 import { expect, test } from '@playwright/test'
 
 test('index page has expected header', async ({ page }) => {
-	await page.goto('/')
+	await page.goto(ROUTES.HOME)
 	expect(await page.textContent('span')).toBe('The Outlet')
 })