2022-11-29 01:52:44 +09:00
|
|
|
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";
|
2022-12-01 19:40:03 +09:00
|
|
|
import Search from "../islands/Search.tsx";
|
|
|
|
|
import MySearch from "../islands/MySearchBar.tsx";
|
2022-11-29 01:52:44 +09:00
|
|
|
|
2022-12-01 19:40:03 +09:00
|
|
|
export const handler: Handlers = {
|
|
|
|
|
GET: async(req, ctx) => {
|
|
|
|
|
const url = new URL(req.url);
|
|
|
|
|
const searchParams = url.searchParams;
|
|
|
|
|
const query = searchParams.get("q");
|
|
|
|
|
if(query){
|
|
|
|
|
const data = await searchRepos(query);
|
|
|
|
|
return ctx.render({repos:data, query})
|
2022-11-29 01:52:44 +09:00
|
|
|
}
|
2022-12-01 19:40:03 +09:00
|
|
|
else{
|
|
|
|
|
const data = await getRepos();
|
|
|
|
|
return ctx.render({repos:data, query: ""})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
2022-11-29 01:52:44 +09:00
|
|
|
|
2022-12-01 19:40:03 +09:00
|
|
|
export default function Home({ data }: PageProps<{repos: RepoData[], query: string}>) {
|
|
|
|
|
|
2022-11-29 01:52:44 +09:00
|
|
|
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>
|
2022-12-01 19:40:03 +09:00
|
|
|
<MySearch query={data.query}></MySearch>
|
|
|
|
|
<RepoViewer repos={data.repos ?? []} />
|
2022-11-29 01:52:44 +09:00
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
