voltpad/routes/search.tsx

import { h } from "../jsx.ts";
import watt, { watt as originalWatt } from "../wattpad.ts";
import Base from "../templates/Base.tsx";

function search() {
    console.log(document.getElementById("query"));
}

export default async (params: URLSearchParams) => {
    const res = [];
    if (params.get("query") && params.get("type")) {
        const search = originalWatt[
            params.get("type") === "tag" ? "tagSearch" : "search"
        ]({
            tags: (params.get("query") as string).split(","),
            query: params.get("query") as string,
            isTitle: params.get("type") === "title",
            limit: 20
        });
        await search.update(Number(params.get("page") ?? 0));
        for (let i = 0; i < search.results.length; i++) {
            const rizz = await watt.getStory(search.results[i].id, false);
            res.push(
                <a href={"/story?id=" + rizz.id} class="story">
                    <img src={rizz.storyJSON.cover} />
                    <div>
                        <h3>{rizz.name}</h3>
                        <p>{rizz.storyJSON.description}</p>
                    </div>
                </a>
            );
        }
    }
    return (
        <Base
            title="Search"
            description="The homepage."
            stylepath="css/index.scss"
        >
            {/* TODO: impl autocomplete for tags? */}
            <form
                method="GET"
                style="display:flex;flex-direction:column;align-items:center;justify-content:center;"
            >
                <div>
                    <input
                        id="query"
                        type="text"
                        name="query"
                        placeholder="Query"
                        style="margin-top: 0.5em;"
                        value={params.get("query") ?? ""}
                        autocomplete="off"
                    />
                    <input
                        type="radio"
                        id="normal"
                        name="type"
                        value="text"
                        checked={
                            params.get("type") === "text" || !params.get("type")
                        }
                    />
                    <label for="id">Text search</label>
                    <input
                        type="radio"
                        id="title"
                        name="type"
                        value="title"
                        checked={params.get("type") === "title"}
                    />
                    <label for="title">Title search</label>
                    <input
                        type="radio"
                        id="tag"
                        name="type"
                        value="tag"
                        checked={params.get("type") === "tag"}
                    />
                    <label for="tag">Tag search</label>
                </div>
                <input
                    style="margin-top:0.25em;"
                    type="submit"
                    value="Submit"
                />
            </form>

            <div id="stories" class="stories">
                {res.join("")}
                <div class="pagenav">
                    {Number(params.get("page") ?? 0) === 0 ? undefined : (
                        <a
                            href={(() => {
                                // total and utter jank
                                params.set(
                                    "page",
                                    (Number(params.get("page")) - 1).toString()
                                );
                                const strParams = params.toString();
                                params.set(
                                    "page",
                                    (Number(params.get("page")) + 1).toString()
                                );
                                return "/search?" + strParams.toString();
                            })()}
                        >
                            &lt;
                        </a>
                    )}
                    {params.get("query") && params.get("type") ? (
                        <div>&nbsp;|&nbsp;</div>
                    ) : undefined}
                    {res.length !== 20 &&
                    (res.length as number) !== 19 ? undefined : (
                        <a
                            href={(() => {
                                const tmpParams = params;
                                tmpParams.set(
                                    "page",
                                    (Number(params.get("page")) + 1).toString()
                                );
                                return "/search?" + tmpParams.toString();
                            })()}
                        >
                            &gt;
                        </a>
                    )}
                </div>
            </div>
        </Base>
    );
};