Merge pull request #36 from bob2402/recommended-length

problem: can't see characters remaining when adding new problem
nostrocket · Sep 29, 2024 · 4b2a0a4 · 4b2a0a4
2 parents d084c40 + 6c21f2f
commit 4b2a0a4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/src/components/TextareaField.svelte b/src/components/TextareaField.svelte
@@ -5,6 +5,7 @@
 	export let title: string = '';
 	export let value: string = '';
 	export let errorText: string = '';
+	export let promptText: string = '';
 </script>
 
 <div class="relative w-full">
@@ -17,6 +18,9 @@
 		{...options}
 		class="h-24 w-full rounded-lg border px-3 py-2 font-normal leading-relaxed"
 	/>
+	{#if promptText}
+		<div class="text-[13px] font-light text-green-500">{promptText}</div>
+	{/if}
 	{#if errorText}
 		<div class="mt-1.5 text-[13px] font-light text-red-500">{errorText}</div>
 	{/if}

diff --git a/src/views/LogNewProblem.svelte b/src/views/LogNewProblem.svelte
@@ -27,23 +27,22 @@
 	let isPublishing = false;
 
 	function validateInputs(tldr: string, para: string) {
-		const errors = {
+		const prompt = {
 			tldr: '',
 			para: ''
 		};
 
-		if (tldr.length > 140) {
-			errors.tldr = 'TLDR must be 140 characters or less';
+		if (tldr.length > 0) {
+			prompt.tldr = `( ${tldr.length} / 140 )`;
 		}
-		if (para.length > 560) {
-			errors.para = 'Paragraph must be 560 characters or less';
+		if (para.length > 0) {
+			prompt.para = `( ${para.length} / 560 )`;
 		}
 
-		return errors;
+		return prompt;
 	}
 
-	$: errors = validateInputs(tldr, para);
-	$: isValid = !errors.tldr && !errors.para;
+	$: prompt = validateInputs(tldr, para);
 
 	function publish(ndk: NDKSvelte) {
 		if (isPublishing) return;
@@ -57,10 +56,6 @@
 			throw new Error('no current user');
 		}
 
-		if (!isValid) {
-			throw new Error('input is not valid');
-		}
-
 		let e = new NDKEvent(ndk);
 		const identify = sha256(author.pubkey + tldr);
 		console.log('identify', identify);
@@ -105,7 +100,8 @@
 				<TextareaField
 					title="Title"
 					bind:value={tldr}
-					errorText={errors.tldr}
+					promptText={prompt.tldr}
+					maxlength={140}
 					options={{
 						placeholder: 'Enter a brief description (max 140 characters)',
 						style: 'height: 60px;'
@@ -114,7 +110,8 @@
 				<TextareaField
 					title="Description"
 					bind:value={para}
-					errorText={errors.para}
+					promptText={prompt.para}
+					maxlength={560}
 					options={{
 						placeholder: 'Enter a detailed description (max 560 characters)',
 						style: 'height: 180px;'
@@ -136,7 +133,7 @@
 				</RadioGroup.Root>
 				{#if $currentUser}
 					<Button
-						disabled={!tldr || !para || !isValid || isPublishing}
+						disabled={!tldr || !para || isPublishing}
 						on:click={() => publish($ndk)}
 						type="submit"
 					>