43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import { Head } from "$fresh/runtime.ts";
|
||
|
import { Handlers, PageProps } from "$fresh/server.ts";
|
||
|
import { RepoData, getRepos, searchRepos } from "../api/repo.ts";
|
||
|
import { useState } from "preact/hooks";
|
||
|
import { SearchBar } from "../components/SearchBar.tsx";
|
||
|
import RepoViewer from "../islands/RepoViewer.tsx";
|
||
|
|
||
|
export const handler: Handlers<RepoData[] | null> = {
|
||
|
async GET(req, ctx) {
|
||
|
try {
|
||
|
const url = new URL(req.url);
|
||
|
const query = url.searchParams.get("q");
|
||
|
if (query) {
|
||
|
const repos = await searchRepos(query);
|
||
|
return ctx.render(repos);
|
||
|
}
|
||
|
else {
|
||
|
const repos = await getRepos();
|
||
|
return ctx.render(repos);
|
||
|
}
|
||
|
} catch (error) {
|
||
|
console.error(error);
|
||
|
return ctx.render(null);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default function Home({ data }: PageProps<RepoData[] | null>) {
|
||
|
const [searchValue, setSearchValue] = useState("");
|
||
|
return (
|
||
|
<>
|
||
|
<Head>
|
||
|
<title>Search Github Awesome App</title>
|
||
|
</Head>
|
||
|
<div class="p-4 mx-auto max-w-screen-md">
|
||
|
<h1 class="text-4xl font-bold">Search Github Awesome App</h1>
|
||
|
<SearchBar value={searchValue} onChange={() => { }} />
|
||
|
<RepoViewer repos={data || []} />
|
||
|
</div>
|
||
|
</>
|
||
|
);
|
||
|
}
|