App.tsx

import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "./components/ui/card";
import { faker } from "@faker-js/faker";
import { Button } from "./components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "./components/ui/dialog";
import { Input } from "./components/ui/input";
import { ThemeProvider } from "./components/theme-provider";
import { H1, P } from "./components/ui/typography";
import { AiFillStar } from "solid-icons/ai";
import { Textarea } from "./components/ui/textarea";
import {
	type Thread,
	getAllThreads,
	upsertThread,
} from "@b.s/qwery-example-api";
import { useQwery, useNetworkMode, useMonitoredFetch } from "@b.s/solid-qwery";
import {
	Component,
	For,
	JSX,
	createEffect,
	createRenderEffect,
	createSignal,
} from "solid-js";
import { As } from "@kobalte/core";

const ThreadChild: Component<{
	child: any;
	onClickReply: any;
	onClickExpand: any;
}> = props => {
	let previous = props.child;
	let rerenders = 0;

	createRenderEffect(() => {
		if (previous !== props.child) {
			rerenders = rerenders + 1 * 50;
			previous = props.child;
		}
	});

	return (
		<Card
			class="cursor-pointer border-2"
			style={{
				"border-color": `hsl(${Math.max(250 - rerenders, 0)}, 100%, 50%)`,
			}}>
			<CardHeader>
				<CardTitle>{props.child.createdBy}</CardTitle>
				<CardDescription class="flex space-x-1">
					<span>{props.child.createdAt.toDateString()}</span>
					<span>&middot;</span>
					<span class="inline-flex items-center space-x-1">
						<span>{props.child.likes}</span>
						<span>
							<AiFillStar />
						</span>
					</span>
				</CardDescription>
			</CardHeader>
			<CardContent>
				<P>{props.child.content}</P>
			</CardContent>
			<CardFooter class="flex-col space-y-4">
				{props.child.children && (
					<Button
						class="w-full"
						variant="secondary"
						onClick={props.onClickExpand(props.child)}>
						View whole thread
					</Button>
				)}
				<Button
					variant="default"
					class="w-full"
					onClick={props.onClickReply(props.child)}>
					Reply
				</Button>
			</CardFooter>
		</Card>
	);
};

const Thread: Component<{ initialValue: any; dispatch: any }> = props => {
	const name = faker.person.fullName();
	const [currentThread, setCurrentThread] = createSignal(props.initialValue);
	const [replyTo, setReplyTo] = createSignal<any>(null);
	const [content, setContent] = createSignal("");

	let previous = props.initialValue;
	let rerenders = 0;

	const { data, dispatch } = useQwery({
		queryKey: `threads-${props.initialValue.uuid}`,
		initialValue: props.initialValue as Thread,
		onChange: async (next: Thread) => {
			const newItem = next.children?.find(thread => !thread.uuid);

			if (!newItem) {
				throw new Error("Unexpected error: New thread not found");
			}

			const result = await upsertThread(newItem);

			return result;
		},
		onSuccess: (next, _previous, result: Omit<Thread, "children">) => ({
			...next,
			children: next.children!.map(child => {
				if (!child.uuid) {
					return {
						...child,
						...result,
					};
				}

				return child;
			}),
		}),
		broadcast: true,
	});

	createRenderEffect(() => {
		if (previous !== currentThread()) {
			rerenders = rerenders + 1 * 50;
			previous = currentThread();
		}
	});

	/**
	 * When we have updates which are broadcasted,
	 * `data` will be updated each time an update is broadcast,
	 * so we have to update `currentThread` with the broadcasted
	 * updates
	 */
	createEffect(() => {
		if (!data()) {
			return;
		}

		setCurrentThread(findDeep(currentThread().uuid, data() as Thread));
	});

	const onChangeNewThread: JSX.ChangeEventHandlerUnion<
		HTMLInputElement,
		Event
	> = event => setContent(event.target.value);

	const onSubmitNewThread = async () => {
		// This is a really deep update so manually create the new `Thread`
		// we are creating a child thread for a child thread
		// and then dispatch the update specifying it has already been persisted
		if (replyTo()) {
			const newThread = {
				createdBy: name,
				content: content(),
				parent: replyTo().uuid,
				likes: 0,
			};

			const result = await upsertThread(newThread);

			// `dispatch` returns the `latest` version of the main thread here
			// since the global `onChange` which is async is not triggered
			const latest = dispatch(
				thread => {
					const replyingTo = findDeep(replyTo().uuid, thread);

					replyingTo.children ??= [];
					replyingTo.children.unshift(result);
				},
				{ isPersisted: true },
			) as Thread;

			// TODO: Causes the dialog to close
			// Maybe bug with Solid
			props.dispatch(
				allThreads => {
					const currentThread = allThreads.find(
						thread => thread.uuid === latest.uuid,
					);

					currentThread.children = latest.children;
				},
				{ isPersisted: true },
			);

			setCurrentThread(findDeep(currentThread().uuid, latest));

			return setContent("");
		}

		const newThread = {
			createdBy: name,
			content: content(),
			parent: currentThread().uuid,
			likes: 0,
		};

		// `dispatch` returns a `Promise` here since the global `onChange` is triggered
		const latest = (await dispatch(thread => {
			thread.children ??= [];

			thread.children.unshift(newThread as Thread);
		})) as Thread;

		setContent("");
		return setCurrentThread(latest);
	};
	const replyToMainThread = () => setReplyTo(null);
	const onKeyDownNewThread: JSX.EventHandlerUnion<
		HTMLInputElement,
		KeyboardEvent
	> = event => {
		if (event.key === "Enter") {
			return onSubmitNewThread();
		}

		if (event.key === "Backspace" && !content()) {
			replyToMainThread();
		}
	};
	const makeOnClickReply = child => (event: MouseEvent) => {
		event.stopPropagation();

		setReplyTo(child);
	};
	const makeOnClickExpandThread = child => () => {
		setCurrentThread(child);
	};
	const onClickReturnToMainThread = () => {
		setCurrentThread(data());
		setReplyTo(null);
	};

	if (!data()) {
		return null;
	}

	return (
		<Dialog>
			<DialogTrigger asChild>
				<As
					component={Card}
					class="cursor-pointer max-w-2xl border-2"
					style={{
						"border-color": `hsl(${Math.max(250 - rerenders, 0)}, 100%, 50%)`,
					}}>
					<CardHeader>
						<CardTitle>{data()?.createdBy}</CardTitle>
						<CardDescription class="flex space-x-1">
							<span>{data()?.createdAt.toDateString()}</span>
							<span>&middot;</span>
							<span class="inline-flex items-center space-x-1">
								<span>{data()?.likes}</span>
								<span>
									<AiFillStar />
								</span>
							</span>
						</CardDescription>
					</CardHeader>
					<CardContent>
						<P>{data()?.content}</P>
					</CardContent>
					<CardFooter>
						<Button class="w-full">View whole thread</Button>
					</CardFooter>
				</As>
			</DialogTrigger>
			<DialogContent>
				<DialogHeader>
					<DialogTitle>View whole thread</DialogTitle>
					<DialogDescription>
						{currentThread()?.content}
					</DialogDescription>
				</DialogHeader>
				{currentThread()?.children && (
					<div class="max-h-[50dvh] overflow-scroll flex-col space-y-8">
						<For each={currentThread().children}>
							{child => (
								<ThreadChild
									child={child}
									onClickExpand={makeOnClickExpandThread}
									onClickReply={makeOnClickReply}
								/>
							)}
						</For>
					</div>
				)}
				<div class="flex-col space-y-2">
					<Input
						value={content()}
						onInput={onChangeNewThread}
						onKeyDown={onKeyDownNewThread}
						placeholder={
							replyTo()
								? `Reply to ${replyTo().createdBy}`
								: "Share a thought...?"
						}
						type="text"
					/>
					{replyTo() !== null && (
						<Button
							variant="ghost"
							size="sm"
							onClick={replyToMainThread}>
							Reply to main thread
						</Button>
					)}
				</div>
				<DialogFooter>
					{currentThread().uuid !== props.initialValue.uuid && (
						<Button
							onClick={onClickReturnToMainThread}
							variant="secondary"
							type="reset">
							View main thread
						</Button>
					)}
					<Button
						disabled={!content()}
						onClick={onSubmitNewThread}
						type="submit">
						Submit
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
};

export const NewThread: Component<{ dispatch: any }> = props => {
	const name = faker.person.fullName();
	const [content, setContent] = createSignal("");

	const onChangeNewThread: JSX.ChangeEventHandlerUnion<
		HTMLTextAreaElement,
		Event
	> = event => setContent(event.target.value);
	const onSubmitNewThread = () => {
		const newThread = {
			createdBy: name,
			content: content(),
			likes: 0,
		};

		// Dispatch and create a new `Thread`
		props.dispatch(allThreads => void allThreads.unshift(newThread));

		setContent("");
	};
	const onKeyDownNewThread: JSX.EventHandlerUnion<
		HTMLTextAreaElement,
		KeyboardEvent
	> = event => {
		if (event.key === "Enter") {
			event.preventDefault();
			return onSubmitNewThread();
		}
	};

	return (
		<Card class="w-[42rem] border-2">
			<CardHeader>
				<CardTitle>{name}</CardTitle>
			</CardHeader>
			<CardContent>
				<Textarea
					value={content()}
					onInput={onChangeNewThread}
					onKeyDown={onKeyDownNewThread}
					placeholder="Share a thought...?"
				/>
			</CardContent>
			<CardFooter>
				<Button
					onClick={onSubmitNewThread}
					disabled={!content}
					class="w-full">
					Submit
				</Button>
			</CardFooter>
		</Card>
	);
};

export const App = () => {
	const { connectionStatus } = useNetworkMode();
	const { isFetching, monitor } = useMonitoredFetch();

	// We have many main `Thread`s and each `Thread` can have zero or more
	// child `Thread`s
	const { data, dispatch } = useQwery({
		queryKey: "threads",
		initialValue: monitor(getAllThreads), // Get all main threads
		onChange: async next => {
			const newItemIdx = next.findIndex(thread => !thread.uuid);

			const result = await upsertThread(next[newItemIdx]);

			return result;
		},
		onSuccess: (next, _previous, result) =>
			next.map(thread => {
				if (!thread.uuid) {
					return {
						...thread,
						...result,
					};
				}

				return thread;
			}),
		broadcast: true,
	});

	const allThreads = () =>
		[...(data() ?? [])]?.sort(
			(a, b) => b.createdAt.getTime() - a.createdAt.getTime(),
		);

	return (
		<ThemeProvider>
			<div class="flex justify-center my-8 mx-4 sm:mx-0">
				<div class="flex-col space-y-8">
					<H1>My Feed</H1>
					<NewThread dispatch={dispatch} />
					<For each={allThreads()}>
						{thread => (
							<Thread initialValue={thread} dispatch={dispatch} />
						)}
					</For>
				</div>
			</div>
			<div class="absolute top-6 right-10">
				<div class="flex space-x-4">
					<div
						class={`px-4 py-3 rounded-full ${connectionStatus() ? "bg-emerald-700" : "bg-rose-700"}`}>
						<span
							class={`font-bold ${connectionStatus() ? "text-emerald-400" : "text-rose-400"}`}>
							{connectionStatus() ? "Online!" : "Offline!"}
						</span>
					</div>
					<div
						class={`px-4 py-3 rounded-full ${!isFetching() ? "bg-emerald-700" : "bg-rose-700"}`}>
						<span
							class={`font-bold ${!isFetching() ? "text-emerald-400" : "text-rose-400"}`}>
							{!isFetching() ? "Fetched!" : "Fetching!"}
						</span>
					</div>
				</div>
			</div>
		</ThemeProvider>
	);
};

const findDeep = (uuid: string, thread: Thread) => {
	if (thread.uuid === uuid) {
		return thread;
	}

	if (!thread.children) {
		return null;
	}

	for (let i = 0; i < thread.children.length; i++) {
		const result = findDeep(uuid, thread.children[i]);

		if (result) {
			return result;
		}
	}
};