/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useReducer, useRef, useState } from "https://esm.sh/react"; import { hydrateRoot } from "https://esm.sh/react-dom/client"; import { renderToString } from "https://esm.sh/react-dom/server"; import { hnSearch } from "https://esm.town/v/stevekrouse/hnSearch"; import About from "https://esm.town/v/vawogbemi/whoIsHiringAbout"; function App() { const tabs = { "/": "Home", "/about": "About" }; const [activeTab, setActiveTab] = useState("/"); const [showScrollTop, setShowScrollTop] = useState(false); const [selectedComment, setSelectedComment] = useState(null); const reducer = (state: { query: string; story: string; page: number; loading: boolean; hasMore: boolean; }, action: { type: string; value: string | boolean | number }) => { switch (action.type) { case "query": return { ...state, query: action.value as string, page: 1 }; case "story": return { ...state, story: action.value as string, page: 1 }; case "page": return { ...state, page: action.value as number }; case "loading": return { ...state, loading: action.value as boolean }; case "hasMore": return { ...state, hasMore: action.value as boolean }; default: return state; } }; const [state, dispatch] = useReducer(reducer, { query: "", story: "", page: 1, loading: true, hasMore: true, }); const [stories, setStories] = useState<{ date: string; objectID: string }[]>([]); const [comments, setComments] = useState<{ author: string; comment_text: string; objectID: string }[]>([]); const observer = useRef(); const lastCommentElementRef = useCallback((node: HTMLDivElement) => { if (state.loading) return; if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver(entries => { if (entries[0].isIntersecting && state.hasMore) { dispatch({ type: "page", value: state.page + 1 }); } }); if (node) observer.current.observe(node); }, [state.loading, state.hasMore]); const fetchStories = async () => { try { const response = await fetch("/api/stories"); if (!response.ok) throw new Error("Failed to fetch dates"); const data = await response.json(); setStories(data); dispatch({ type: "story", value: data[0].objectID }); } catch (err) { console.error("Error fetching stories:", err); } }; const fetchComments = async (query: string, story: string, page: number) => { try { dispatch({ type: "loading", value: true }); const response = await fetch(`/api/comments?query=${encodeURIComponent(query)}&story=${story}&page=${page}`); if (!response.ok) throw new Error("Failed to fetch comments"); const data = await response.json(); setComments(prevComments => page === 1 ? data.hits : [...prevComments, ...data.hits]); dispatch({ type: "hasMore", value: data.hits.length > 0 }); dispatch({ type: "loading", value: false }); } catch (err) { console.error("Error fetching comments:", err); dispatch({ type: "loading", value: false }); } }; const handleSearch = (newQuery = state.query) => { setComments([]); dispatch({ type: "page", value: 1 }); dispatch({ type: "loading", value: true }); dispatch({ type: "hasMore", value: true }); dispatch({ type: "query", value: newQuery }); fetchComments(newQuery, state.story, 1); }; useEffect(() => { fetchStories(); const handleScroll = () => { setShowScrollTop(window.pageYOffset > 300); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); useEffect(() => { if (state.story) { if (state.page === 1) { handleSearch(); } else { fetchComments(state.query, state.story, state.page); } } }, [state.story, state.page]); const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; const openModal = (comment) => { setSelectedComment(comment); }; const closeModal = () => { setSelectedComment(null); }; return ( <>

{Object.entries(tabs).map(([link, title]) => ( (e.preventDefault(), setActiveTab(link))} > {title === "Home" ?

: title} ))}

View Source Code

{activeTab == "/" ? (

<> Date <> Search dispatch({ type: "query", value: e.target.value })} onKeyPress={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleSearch(); } }} />

{comments.map((comment, index) => (

openModal(comment)} className="cursor-pointer" >

{comment.author}

))}

{state.loading && (

)} {showScrollTop && ( )} {selectedComment && (

{selectedComment.author}

)}

) : } ); } function ServerApp() { return (

); } if (typeof document !== "undefined") { hydrateRoot(document.getElementById("root"), ); } export default async function(req: Request): Promise { const url = new URL(req.url); if (url.pathname === "/api/stories") { const storySearch = await hnSearch({ search_by_date: true, query: "", numericFilters: `created_at_i>${Math.floor(Date.now() / 1000) - 60 * 60 * 24 * 7 * 52}`, tags: "story,author_whoishiring", }); return new Response( JSON.stringify( storySearch.hits.filter((story) => story.title.startsWith("Ask HN: Who is hiring?")).map((story) => ({ date: story.title.slice(24, -1), objectID: story.objectID, })), ), { headers: { "Content-Type": "application/json" }, }, ); } if (url.pathname === "/api/comments") { const params = url.searchParams; const query = params.get("query") || ""; const story = params.get("story") || ""; const page = parseInt(params.get("page") || "1"); const commentSearch = await hnSearch({ query: query, tags: `comment, story_${story}`, page: page - 1, }); return new Response( JSON.stringify(commentSearch), { headers: { "Content-Type": "application/json" }, }, ); } return new Response( renderToString(), { headers: { "content-type": "text/html", }, }, ); }