added dynamic check for project name and slug

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

Author: benjaminstrasser

package.json

@@ -49,13 +49,14 @@
 		"mode-watcher": "^0.3.0",
 		"pino": "^9.0.0",
 		"pino-pretty": "^11.0.0",
+		"slugify": "^1.6.6",
 		"svelte-sonner": "^0.3.24",
 		"sveltekit-superforms": "^2.13.0",
 		"tailwind-merge": "^2.3.0",
 		"tailwind-variants": "^0.2.1",
+		"throttle-debounce": "^5.0.2",
 		"typesafe-utils": "^1.16.2",
-		"zod": "^3.23.5",
-		"slugify": "^1.6.6"
+		"zod": "^3.23.5"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.2.0",
@@ -71,6 +72,7 @@
 		"@types/jsonwebtoken": "^9.0.6",
 		"@types/minimist": "^1.2.5",
 		"@types/node": "^20.12.7",
+		"@types/throttle-debounce": "^5.0.2",
 		"@typescript-eslint/eslint-plugin": "^7.6.0",
 		"@typescript-eslint/parser": "^7.6.0",
 		"autoprefixer": "^10.4.19",

pnpm-lock.yaml

@@ -1,5 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest'
-import { createProject, getAllProjects } from './project-repository'
+import {
+	checkProjectNameExists,
+	checkProjectSlugExists,
+	createProject,
+	getAllProjects
+} from './project-repository'
 import { runMigration } from '../db/database-migration-util'
 import { db } from '../db/database'
 import type { ProjectCreationParams, SelectableProject } from './project'
@@ -147,4 +152,36 @@ describe('Project Repository', () => {
 			expect(project.id).toBeTypeOf('number')
 		})
 	})
+
+	describe('checkProjectNameExists', () => {
+		it('should return true if a project with the given name exists', async () => {
+			await createProject(projectCreationObject)
+
+			const nameExists = await checkProjectNameExists(projectCreationObject.name)
+			expect(nameExists).toBe(true)
+		})
+
+		it('should return false if no project with the given name exists', async () => {
+			await createProject(projectCreationObject)
+
+			const nameExists = await checkProjectNameExists('Nonexistent Project')
+			expect(nameExists).toBe(false)
+		})
+	})
+
+	describe('checkProjectSlugExists', () => {
+		it('should return true if a project with the given slug exists', async () => {
+			await createProject(projectCreationObject)
+
+			const slugExists = await checkProjectSlugExists(projectCreationObject.slug)
+			expect(slugExists).toBe(true)
+		})
+
+		it('should return false if no project with the given slug exists', async () => {
+			await createProject(projectCreationObject)
+
+			const slugExists = await checkProjectSlugExists('nonexistent-slug')
+			expect(slugExists).toBe(false)
+		})
+	})
 })

services/src/project/project-repository.integration.test.ts

@@ -29,3 +29,15 @@ export function createProject(project: ProjectCreationParams): Promise<Selectabl
 export function getAllProjects(): Promise<SelectableProject[]> {
 	return db.selectFrom('projects').selectAll().execute()
 }
+
+export async function checkProjectNameExists(name: string) {
+	const result = await db.selectFrom('projects').selectAll().where('name', '==', name).execute()
+
+	return result.length > 0
+}
+
+export async function checkProjectSlugExists(slug: string) {
+	const result = await db.selectFrom('projects').selectAll().where('slug', '==', slug).execute()
+
+	return result.length > 0
+}

services/src/project/project-repository.ts

@@ -25,3 +25,20 @@ export async function getAllProjects() {
 		throw new Error('Error Getting Projects')
 	}
 }
+
+export async function checkProjectNameExists(name: string) {
+	try {
+		return await repository.checkProjectNameExists(name)
+	} catch (e) {
+		console.error(e)
+		throw new Error('Error Checking Project Name')
+	}
+}
+
+export async function checkProjectSlugExists(name: string) {
+	try {
+		return await repository.checkProjectSlugExists(createSlug(name))
+	} catch (e) {
+		throw new Error('Error Checking Project Slug')
+	}
+}

services/src/project/project-service.ts

@@ -1,18 +1,21 @@
 import { createSlug } from 'services/util/slug/slug-service'
 import { z } from 'zod'
 
-export const createProjectSchema = z
-	.object({
-		name: z
-			.string({ required_error: 'Project name is required' })
-			.min(1, 'Project name must have at least one character'),
-		base_language_code: z
-			.string({ required_error: 'Base language is required' })
-			.min(1, 'Base language must have at least one character')
-	})
-	.refine((data) => createSlug(data.name).length > 0, {
+export const baseCreateProjectSchema = z.object({
+	name: z
+		.string({ required_error: 'Project name is required' })
+		.min(1, 'Project name must have at least one character'),
+	base_language_code: z
+		.string({ required_error: 'Base language is required' })
+		.min(1, 'Base language must have at least one character')
+})
+
+export const createProjectSchema = baseCreateProjectSchema.refine(
+	(data) => createSlug(data.name).length > 0,
+	{
 		message: 'URL must have at least one character',
 		path: ['name']
-	})
+	}
+)
 
 export type CreateProjectFormSchema = z.infer<typeof createProjectSchema>

src/components/container/projects/create-project-schema.ts

@@ -9,13 +9,15 @@
 	import { page } from '$app/stores'
 	import { toast } from 'svelte-sonner'
 	import SlugDisplay from './slug-display.svelte'
+	import { debounce } from 'throttle-debounce'
 
 	export let data: SuperValidated<Infer<typeof createProjectSchema>>
 
 	let open = false
 
 	const form = superForm(data, {
 		validators: zodClient(createProjectSchema),
+		validationMethod: 'oninput',
 		async onUpdated({ form }) {
 			if (form.message) {
 				if ($page.status >= 400) {
@@ -25,10 +27,42 @@
 					open = false
 				}
 			}
+		},
+		async onChange(event) {
+			// if name changed the server error is no longer relevant
+			if (event.paths.includes('name')) {
+				nameServerError = []
+			}
+
+			$errors.name = [...nameServerError, ...($errors.name || [])]
 		}
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, errors, allErrors } = form
+
+	// name validation hidden form
+	let nameServerError: string[] = []
+
+	const { submit } = superForm(
+		{ name: '' },
+		{
+			invalidateAll: false,
+			applyAction: false,
+			SPA: '?/check',
+			onSubmit(event) {
+				if (!$formData.name) {
+					event.cancel()
+				}
+
+				event.formData.set('name', $formData.name)
+			},
+			onUpdated({ form }) {
+				nameServerError = form.errors.name || []
+				$errors.name = [...nameServerError, ...($errors.name || [])]
+			}
+		}
+	)
+	const checkProjectName = debounce(300, submit)
 </script>
 
 <Dialog.Root bind:open>
@@ -39,7 +73,7 @@
 		+ Create Project
 	</Dialog.Trigger>
 	<Dialog.Content class="sm:max-w-[425px]">
-		<form method="POST" use:enhance>
+		<form method="POST" action="?/post" use:enhance>
 			<Dialog.Header>
 				<Dialog.Title>New Project</Dialog.Title>
 				<Dialog.Description>
@@ -55,6 +89,7 @@
 							data-testid="create-project-name-input"
 							placeholder="Enter Name"
 							bind:value={$formData.name}
+							on:input={checkProjectName}
 						/>
 					</Form.Control>
 					<SlugDisplay name={$formData.name} />
@@ -74,7 +109,9 @@
 				</Form.Field>
 			</div>
 			<Dialog.Footer>
-				<Form.Button data-testid="create-project-submit-button">Create Project</Form.Button>
+				<Form.Button disabled={$allErrors.length !== 0} data-testid="create-project-submit-button">
+					Create Project
+				</Form.Button>
 			</Dialog.Footer>
 		</form>
 	</Dialog.Content>

src/components/container/projects/create-project.svelte

@@ -1,8 +1,15 @@
 import type { Actions, PageServerLoad } from './$types'
 import { message, setError, superValidate } from 'sveltekit-superforms'
 import { zod } from 'sveltekit-superforms/adapters'
-import { createProjectSchema } from '$components/container/projects/create-project-schema'
-import { createProject } from 'services/project/project-service'
+import {
+	baseCreateProjectSchema,
+	createProjectSchema
+} from '$components/container/projects/create-project-schema'
+import {
+	checkProjectNameExists,
+	checkProjectSlugExists,
+	createProject
+} from 'services/project/project-service'
 import { getAllProjects } from 'services/project/project-repository'
 import { CreateProjectNameNotUniqueError } from 'services/error'
 
@@ -13,8 +20,10 @@ export const load: PageServerLoad = async () => {
 	}
 }
 
+const nameSchema = baseCreateProjectSchema.pick({ name: true })
+
 export const actions: Actions = {
-	default: async ({ request }) => {
+	post: async ({ request }) => {
 		const form = await superValidate(request, zod(createProjectSchema))
 
 		if (!form.valid) {
@@ -38,5 +47,24 @@ export const actions: Actions = {
 		}
 
 		return message(form, { message: 'Project Created', project })
+	},
+	check: async ({ request }) => {
+		const form = await superValidate(request, zod(nameSchema))
+
+		if (!form.valid) {
+			return message(form, 'Invalid form', {
+				status: 500
+			})
+		}
+
+		if (await checkProjectNameExists(form.data.name)) {
+			setError(form, 'name', 'Name already in use.')
+		}
+
+		if (await checkProjectSlugExists(form.data.name)) {
+			setError(form, 'name', 'URL already in use.')
+		}
+
+		return { form }
 	}
 }