feature: first pass on replies

refactor: move more smarts in the smartforms around

models/event.ts

@@ -37,6 +37,81 @@ type TOPIC_EVENT_CACHE_ENTRY = {
 	eviction_timeout: number;
 };
 
+// TODO: separate out these different validators somewhere?
+export function VALIDATE_EVENT(event: EVENT) {
+	const errors: any[] = [];
+
+	const {
+		groups: {
+			type,
+			id
+		}
+	} = /^(?<type>\w+)\:(?<id>[A-Za-z-]+)$/.exec(event.id ?? '') ?? { groups: {} };
+
+	if (typeof type !== 'string' || type.length === 0) {
+		errors.push({
+			cause: 'missing_event_type_in_id',
+			message: 'An event must have a type that is also encoded into its id, eg: chat:able-fish-wife...'
+		});
+	}
+
+	if (typeof id !== 'string' || id.length !== 49) {
+		errors.push({
+			cause: 'invalid_event_id',
+			message: 'An event must have a type and a lurid id, eg: chat:able-fish-gold-wing-trip-form-seed-cost-rope-wife'
+		});
+	}
+
+	switch (event.type) {
+		case 'chat':
+			if (event.data?.message?.length <= 0) {
+				errors.push({
+					cause: 'chat_message_missing',
+					message: 'A chat message event cannot be empty.'
+				});
+			}
+			break;
+		case 'post':
+			if (event.data?.subject?.length <= 0) {
+				errors.push({
+					cause: 'post_missing_subject',
+					message: 'A post cannot have an empty subject.'
+				});
+			}
+			break;
+		case 'blurb':
+			if (event.data?.blurb?.length <= 0) {
+				errors.push({
+					cause: 'blurb_missing',
+					message: 'A blurb cannot be empty.'
+				});
+			} else if (event.data?.blurb?.length > 2 ** 8) {
+				errors.push({
+					cause: 'blurb_length_limit_exceeded',
+					message: 'A blurb cannot be longer than 256 characters.'
+				});
+			}
+			break;
+		case 'essay':
+			if (event.data?.essay?.length <= 0) {
+				errors.push({
+					cause: 'essay_missing',
+					message: 'An essay cannot be empty.'
+				});
+			} else if (event.data?.essay?.length > 2 ** 16) {
+				errors.push({
+					cause: 'essay_length_limit_exceeded',
+					message: 'An essay cannot be longer than 65536 characters - that would be a screed, which we do not yet support.'
+				});
+			}
+			break;
+		default:
+			break;
+	}
+
+	return errors.length ? errors : undefined;
+}
+
 const TOPIC_EVENT_ID_MATCHER = /^(?<event_type>.*):(?<event_id>.*)$/;
 
 const TOPIC_EVENTS: Record<string, TOPIC_EVENT_CACHE_ENTRY> = {};
@@ -73,6 +148,13 @@ export function get_events_collection_for_topic(topic_id: string): FSDB_COLLECTI
 					organize: by_lurid
 				}),
 
+				parent_id: new FSDB_INDEXER_SYMLINKS<EVENT>({
+					name: 'parent_id',
+					field: 'parent_id',
+					to_many: true,
+					organize: by_lurid
+				}),
+
 				tags: new FSDB_INDEXER_SYMLINKS<EVENT>({
 					name: 'tags',
 					get_values_to_index: (event: EVENT): string[] => {

public/api/topics/:topic_id/events/index.ts

@@ -2,7 +2,7 @@ import lurid from '@andyburke/lurid';
 import { get_session, get_user, PRECHECK_TABLE, require_user } from '../../../../../utils/prechecks.ts';
 import { TOPIC, TOPICS } from '../../../../../models/topic.ts';
 import * as CANNED_RESPONSES from '../../../../../utils/canned_responses.ts';
-import { EVENT, get_events_collection_for_topic } from '../../../../../models/event.ts';
+import { EVENT, get_events_collection_for_topic, VALIDATE_EVENT } from '../../../../../models/event.ts';
 import parse_body from '../../../../../utils/bodyparser.ts';
 import { FSDB_COLLECTION, FSDB_SEARCH_OPTIONS, WALK_ENTRY } from '@andyburke/fsdb';
 import * as path from '@std/path';
@@ -172,6 +172,15 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
 
 		event.id = `${event.type}:${lurid()}`;
 
+		const errors = VALIDATE_EVENT(event);
+		if (errors) {
+			return Response.json({
+				errors
+			}, {
+				status: 400
+			});
+		}
+
 		await events.create(event);
 
 		return Response.json(event, {

public/base.css

@@ -210,6 +210,33 @@ textarea:focus {
 	height: 0;
 }
 
+input[collapse-toggle] {
+	display: none;
+	visibility: hidden;
+}
+
+label:has(input[collapse-toggle]) {
+	display: block;
+	max-width: 8rem;
+	cursor: pointer;
+	border: 1px solid var(--text);
+	border-radius: var(--border-radius);
+	padding: 0.5rem;
+	margin-bottom: 2rem;
+}
+
+input[collapse-toggle] + .collapsible,
+label:has(input[collapse-toggle]) + .collapsible {
+	transition: all 0.33s;
+	height: 0;
+	overflow: hidden;
+}
+
+input[collapse-toggle]:checked + .collapsible,
+label:has(input[collapse-toggle]:checked) + .collapsible {
+	height: 100%;
+}
+
 form div {
 	position: relative;
 	display: flex;

public/js/smartforms.js

@@ -1,10 +1,11 @@
-document.addEventListener("DOMContentLoaded", () => {
+function smarten_forms() {
-	/* make all forms semi-smart */
+	const forms = document.body.querySelectorAll("form[data-smart]:not([data-smartened])");
-	const forms = document.querySelectorAll("form[data-smart]");
 	for (const form of forms) {
 		async function on_submit(event) {
+			debugger;
 			event.preventDefault();
 			form.disabled = true;
+			form.__submitted_at = new Date();
 
 			if (form.on_submit) {
 				const result = await form.on_submit(event);
@@ -25,8 +26,63 @@ document.addEventListener("DOMContentLoaded", () => {
 					continue;
 				}
 
-				if (typeof value === "string" && value.length === 0) {
+				const input = form.querySelector(`[name="${key}"]`);
-					const input = form.querySelector(`[name="${key}"]`);
+
+				if (input.type === "file") {
+					if (input.dataset["smartformsSaveToHome"]) {
+						form.uploaded = [];
+						form.errors = [];
+
+						const user = document.body.dataset.user
+							? JSON.parse(document.body.dataset.user)
+							: undefined;
+						if (!user) {
+							throw new Error("You must be logged in to upload files here.");
+						}
+
+						for await (const file of input.files) {
+							const body = new FormData();
+							body.append("file", file, encodeURIComponent(file.name));
+
+							const file_path =
+								"/files/users/" + user.id + "/" + encodeURIComponent(file.name);
+
+							const file_upload_response = await api.fetch(file_path, {
+								method: "PUT",
+								body,
+							});
+
+							if (!file_upload_response.ok) {
+								const error = await file_upload_response.json();
+								form.errors.push(error?.error?.message ?? "Unknown error.");
+								continue;
+							}
+
+							const file_url =
+								window.location.protocol + "//" + window.location.host + file_path;
+							form.uploaded.push(file_url);
+						}
+
+						if (form.errors.length) {
+							const errors = form.errors.join("\n\n");
+							alert(errors);
+							return false;
+						}
+
+						continue;
+					}
+				}
+
+				const generator = input.getAttribute("generator");
+				const generated_value =
+					typeof generator === "string" && generator.length
+						? eval(generator)(input, form)
+						: undefined;
+
+				const resolved_value =
+					typeof value === "string" && value.length ? value : generated_value;
+
+				if (typeof resolved_value === "undefined") {
 					const should_submit_empty = input && input.dataset["smartformsSubmitEmpty"];
 					if (!should_submit_empty) {
 						continue;
@@ -40,11 +96,20 @@ document.addEventListener("DOMContentLoaded", () => {
 					current = current[element];
 				}
 
-				current[elements.slice(elements.length - 1).shift()] = value;
+				current[elements.slice(elements.length - 1).shift()] = resolved_value;
 			}
 
-			if (form.on_parsed) {
+			if (form.uploaded?.length > 0) {
-				await form.on_parsed(json);
+				json.data = json.data ?? {};
+				json.data.media = [...form.uploaded];
+			}
+
+			const on_parsed =
+				form.on_parsed ??
+				(form.getAttribute("on_parsed") ? eval(form.getAttribute("on_parsed")) : undefined);
+
+			if (on_parsed) {
+				await on_parsed(json);
 			}
 
 			try {
@@ -69,7 +134,7 @@ document.addEventListener("DOMContentLoaded", () => {
 						return form.on_error(error);
 					}
 
-					alert(error.message ?? "Unknown error!");
+					alert(error.message ?? "Unknown error:\n\n" + error);
 					return;
 				}
 
@@ -78,8 +143,20 @@ document.addEventListener("DOMContentLoaded", () => {
 				}
 
 				const response_body = await response.json();
-				if (form.on_reply) {
+
-					return form.on_reply(response_body);
+				const on_reply =
+					form.on_reply ??
+					(form.getAttribute("on_reply")
+						? eval(form.getAttribute("on_reply"))
+						: undefined);
+				if (on_reply) {
+					await on_reply(response_body);
+				}
+
+				const inputs_for_reset = form.querySelectorAll("input[reset-on-submit]");
+				for (const input of inputs_for_reset) {
+					const reset_value = input.getAttribute("reset-on-submit");
+					input.value = reset_value ?? "";
 				}
 			} catch (error) {
 				console.dir({
@@ -97,6 +174,19 @@ document.addEventListener("DOMContentLoaded", () => {
 		}
 
 		form.addEventListener("submit", on_submit);
-		//form.onsubmit = on_submit;
+		form.dataset.smartened = true;
 	}
+}
+
+const smarten_observer = new MutationObserver(smarten_forms);
+smarten_observer.observe(document, {
+	childList: true,
+	subtree: true,
 });
+
+/*
+
+document.addEventListener("DOMContentLoaded", smarten_forms);
+document.addEventListener("DOMSubtreeModified", smarten_forms);
+
+*/

public/tabs/forum/forum.html

@@ -6,12 +6,14 @@
 	.post-container {
 		position: relative;
 		display: grid;
-		grid-template-rows: auto auto 1fr;
+		grid-template-rows: auto auto auto auto 1fr;
 		grid-template-columns: auto auto 1fr;
 		grid-template-areas:
-			"expander preview info"
+			"expander	preview	info"
-			"expander preview subject"
+			"expander	preview	subject"
-			"expander preview content";
+			".			.		content"
+			".			.		newpost"
+			".			.		replies";
 		max-height: 6rem;
 		padding: 1rem;
 		border: 1px solid var(--border-subtle);
@@ -20,9 +22,8 @@
 		margin-bottom: 2rem;
 	}
 
-	.post-container:has(input[name="expanded"]:checked) {
+	.post-container:has(> div > label > input[name="expanded"]:checked) {
-		max-height: 40rem;
+		max-height: unset;
-		overflow-y: scroll;
 	}
 
 	.expand-toggle-container input[name="expanded"] {
@@ -30,15 +31,16 @@
 		visibility: hidden;
 		opacity: 0;
 	}
-	.post-container:has(input[name="expanded"]) .icon.minus,
+
-	.post-container:has(input[name="expanded"]:checked) .icon.plus {
+	.post-container:has(> div > label > input[name="expanded"]) .icon.minus,
+	.post-container:has(> div > label > input[name="expanded"]:checked) .icon.plus {
 		display: block;
 		opacity: 1;
 		visibility: visible;
 	}
 
-	.post-container:has(input[name="expanded"]) .icon.plus,
+	.post-container:has(> div > label > input[name="expanded"]) .icon.plus,
-	.post-container:has(input[name="expanded"]:checked) .icon.minus {
+	.post-container:has(> div > label > input[name="expanded"]:checked) .icon.minus {
 		display: none;
 		opacity: 0;
 		visibility: hidden;
@@ -121,6 +123,14 @@
 		padding-left: 5rem;
 		margin-top: 2rem;
 	}
+
+	.post-container .new-post-container {
+		grid-area: newpost;
+	}
+
+	.post-container .replies-container {
+		grid-area: replies;
+	}
 </style>
 
 <div id="forum" class="tab">
@@ -145,10 +155,10 @@
 					const creator = await USERS.get(post.creator_id);
 					const existing_element =
 						document.getElementById(`post-${post.id.substring(0, 49)}`) ??
-						document.getElementById(`post-${post.meta.temp_id}`);
+						document.getElementById(`post-${post.meta?.temp_id}`);
 					const post_datetime = datetime_to_local(post.timestamps.created);
 
-					const html_content = `<div class="post-container" data-creator_id="${creator.id}">
+					const html_content = `<div class="post-container" data-creator_id="${creator.id}" data-post_id="${post.id}">
 						<div class="expand-toggle-container">
 							<label>
 								<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
@@ -173,14 +183,21 @@
 						</div>
 						<div class="subject-container">${post.data.subject}</div>
 						<div class="content-container">${htmlify(post.data.content)}</div>
+						<!-- #include file="./new_post.html" -->
+						<div class="replies-container"></div>
 					</div>`;
 
 					if (existing_element) {
 						const template = document.createElement("template");
 						template.innerHTML = html_content;
 						existing_element.replaceWith(template.content.firstChild);
+						existing_element.classList.remove("sending");
 					} else {
-						forum_posts_list.insertAdjacentHTML("beforeend", html_content);
+						const target_container =
+							document.querySelector(
+								`.post-container[data-post_id='${post.parent_id}'] > .replies-container`,
+							) ?? forum_posts_list;
+						target_container.insertAdjacentHTML("beforeend", html_content);
 					}
 				}
 
@@ -202,6 +219,12 @@
 						await render_post(post);
 					}
 
+					const new_post_forms = document.querySelectorAll(".post-creation-form");
+					for (const new_post_form of new_post_forms) {
+						new_post_form.action =
+							"/api/topics/" + document.body.dataset?.topic + "/events";
+					}
+
 					forum_posts_list.scrollTop = 0;
 				}
 
@@ -228,7 +251,7 @@
 					})
 						.then(async (new_events_response) => {
 							const new_events = (await new_events_response.json()) ?? [];
-							await append_posts(new_events);
+							await append_posts(new_events.reverse());
 							poll_for_new_posts(topic_id);
 						})
 						.catch((error) => {
@@ -276,7 +299,7 @@
 
 					const events = await events_response.json();
 
-					await append_posts(events);
+					await append_posts(events.reverse());
 					poll_for_new_posts();
 				}
 				document.addEventListener("topic_changed", load_active_topic_for_forum);
@@ -284,157 +307,6 @@
 			</script>
 		</div>
 
-		<div id="post-creation-container" data-requires-permission="topics.posts.create">
+		<!-- #include file="./new_post.html" -->
-			<button
-				onclick="(() => { document.querySelector( '#post-creation' ).classList.toggle( 'collapsed' ); })()"
-			>
-				<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Post
-			</button>
-			<form
-				id="post-creation"
-				data-smart="true"
-				method="POST"
-				class="collapsed"
-				style="
-					margin-top: 1rem
-					width: 100%;
-					overflow: hidden;
-					overflow: hidden;
-					transition: all 0.5s;
-				"
-			>
-				<script>
-					const form = document.currentScript.closest("form");
-
-					document.addEventListener("DOMContentLoaded", () => {
-						const file_input = form.querySelector('input[type="file"]');
-						const subject_input = form.querySelector('[name="data.subject"]');
-						const content_input = form.querySelector('[name="data.content"]');
-						const parent_id_input = form.querySelector('[name="parent_id"]');
-
-						form.on_submit = async (event) => {
-							const user = JSON.parse(document.body.dataset.user);
-							const topic_id = document.body.dataset.topic;
-							if (!topic_id) {
-								alert("Failed to get topic_id!");
-								return false;
-							}
-
-							form.uploaded_urls = [];
-							form.errors = [];
-							for await (const file of file_input.files) {
-								const body = new FormData();
-								body.append("file", file, encodeURIComponent(file.name));
-
-								const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
-
-								const file_upload_response = await api.fetch(file_path, {
-									method: "PUT",
-									body,
-								});
-
-								if (!file_upload_response.ok) {
-									const error = await file_upload_response.json();
-									form.errors.push(error?.error?.message ?? "Unknown error.");
-									continue;
-								}
-
-								const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
-								form.uploaded_urls.push(file_url);
-							}
-
-							if (form.errors.length) {
-								const errors = form.errors.join("\n\n");
-								alert(errors);
-								return false;
-							}
-
-							const subject = subject_input.value.trim();
-							const content = content_input.value.trim();
-
-							if (subject.length === 0) {
-								return false;
-							}
-
-							form.action = `/api/topics/${topic_id}/events`;
-						};
-
-						form.on_parsed = (json) => {
-							const now = new Date().toISOString();
-
-							const temp_id = `TEMP-${now}`;
-							json.id = temp_id;
-							json.type = "post";
-							json.meta = {
-								temp_id,
-							};
-							json.timestamps = {
-								created: now,
-								updated: now,
-							};
-							json.data = json.data ?? {};
-
-							if (form.uploaded_urls.length) {
-								json.data.content =
-									(typeof json.data.content === "string" &&
-									json.data.content.trim().length
-										? json.data.content.trim() + "\n"
-										: "") + form.uploaded_urls.join("\n");
-							}
-
-							render_post(json);
-							document.getElementById(`post-${temp_id}`)?.classList.add("sending");
-						};
-
-						form.on_error = (error) => {
-							// TODO: mark the temporary message element with the failed class?
-							alert(error);
-							content_input.focus();
-						};
-
-						form.on_reply = (post) => {
-							const post_id = `post-${post.meta?.temp_id ?? ""}`;
-							document.getElementById(post_id)?.classList.remove("sending");
-
-							append_posts([post]);
-							parent_id_input.value = "";
-							subject_input.value = "";
-							content_input.value = "";
-						};
-					});
-				</script>
-
-				<input type="hidden" name="parent_id" value="" />
-
-				<input
-					id="new-thread-subject"
-					type="text"
-					name="data.subject"
-					value=""
-					placeholder="Thread subject..."
-					style="margin-bottom: 1rem"
-				/>
-
-				<input
-					id="file-upload-and-share-input-for-thread"
-					aria-label="Upload and share file"
-					type="file"
-					multiple
-				/>
-				<label for="file-upload-and-share-input-for-thread">
-					<div class="icon attachment"></div>
-				</label>
-
-				<textarea
-					id="new-thread-content"
-					type="text"
-					name="data.content"
-					value=""
-					placeholder=" ... "
-				></textarea>
-
-				<input type="submit" value="Post" />
-			</form>
-		</div>
 	</div>
 </div>

public/tabs/forum/new_post.html

@@ -0,0 +1,82 @@
+<div class="new-post-container">
+	<label>
+		<input type="checkbox" collapse-toggle />
+		<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
+		<span>New Post</span>
+	</label>
+	<form
+		data-smart="true"
+		data-requires-permission="topics.posts.create"
+		method="POST"
+		class="post-creation-form collapsible"
+		style="
+			margin-top: 1rem
+			width: 100%;
+			transition: all 0.5s;
+		"
+		on_reply="(post) => { append_posts([post]); }"
+		on_parsed="(post) => { render_post(post); document.getElementById('post-' + post.id)?.classList.add('sending'); }"
+	>
+		<input type="hidden" name="type" value="post" />
+
+		<input
+			type="hidden"
+			name="id"
+			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+		<input
+			type="hidden"
+			name="meta.temp_id"
+			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+
+		<input
+			type="hidden"
+			name="timestamps.created"
+			generator="(_input, form) => form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+		<input
+			type="hidden"
+			name="timestamps.updated"
+			generator="(_input, form) => form.__submitted_at.toISOString()"
+			reset-on-submit
+		/>
+
+		<input
+			type="hidden"
+			name="parent_id"
+			generator="(_input, form) => { debugger; const parent_post = form.closest( '.post-container' ); return parent_post?.dataset?.post_id; }"
+		/>
+
+		<input
+			class="new-post-subject"
+			type="text"
+			name="data.subject"
+			value=""
+			placeholder="Post subject..."
+			style="margin-bottom: 1rem"
+			reset-on-submit
+		/>
+		<label>
+			<input
+				aria-label="Upload and share file"
+				type="file"
+				multiple
+				data-smartforms-save-to-home="true"
+				reset-on-submit
+			/>
+			<div class="icon attachment"></div>
+		</label>
+		<textarea
+			type="text"
+			name="data.content"
+			value=""
+			placeholder=" ... "
+			reset-on-submit
+		></textarea>
+		<input type="submit" value="Post" />
+	</form>
+</div>