You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
6.5 KiB
167 lines
6.5 KiB
import { h } from "../jsx.ts";
|
|
import watt, { watt as originalWatt } from "../wattpad.ts";
|
|
import Base from "../templates/Base.tsx";
|
|
|
|
import Script from "../components/Script.tsx";
|
|
import FavoriteSearchButtonScript from "../scripts/FavoriteSearch.ts";
|
|
|
|
function search() {
|
|
console.log(document.getElementById("query"));
|
|
}
|
|
|
|
export default async (params: URLSearchParams) => {
|
|
const res = [];
|
|
if (params.get("query") && params.get("type")) {
|
|
const search = originalWatt.search({
|
|
query:
|
|
params.get("type") === "tag"
|
|
? (params.get("query") as string).split(",")
|
|
: (params.get("query") as string),
|
|
type: params.get("type") as "text" | "title" | "tag", //cannot go wrong, will not go wrong, has never gone wrong
|
|
limit: 20,
|
|
sort: (params.get("sort") as string) ?? "hot" // migration trol
|
|
});
|
|
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"
|
|
>
|
|
<Script function={FavoriteSearchButtonScript} />
|
|
<h1>Search</h1>
|
|
{/* TODO: impl autocomplete for tags? */}
|
|
<form method="GET" class="search-form">
|
|
<div>
|
|
<input
|
|
id="query"
|
|
type="text"
|
|
name="query"
|
|
placeholder="Query"
|
|
style="margin-top: 0.5em;"
|
|
value={
|
|
params.get("query")?.replaceAll('"', """) ?? ""
|
|
}
|
|
autocomplete="off"
|
|
/>
|
|
<div>
|
|
<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>
|
|
<select name="sort" id="sort">
|
|
<option
|
|
value="hot"
|
|
selected={params.get("sort") === "hot"}
|
|
>
|
|
Hot
|
|
</option>
|
|
<option
|
|
value="new"
|
|
selected={params.get("sort") === "new"}
|
|
>
|
|
New
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="flex-direction: row !important;">
|
|
<input
|
|
style="margin-top:0.25em;"
|
|
type="submit"
|
|
value="Submit"
|
|
/>
|
|
{params.get("query") && params.get("type") ? (
|
|
<button
|
|
type="button"
|
|
style="margin-left:0.5em;margin-top:0.25em;border-radius: 0.25em;"
|
|
id="favorite"
|
|
>
|
|
Favorite
|
|
</button>
|
|
) : undefined}
|
|
</div>
|
|
</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();
|
|
})()}
|
|
>
|
|
<
|
|
</a>
|
|
)}
|
|
{params.get("query") && params.get("type") ? (
|
|
<div> | </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();
|
|
})()}
|
|
>
|
|
>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Base>
|
|
);
|
|
};
|