Who's Hiring

/** @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 [selectedFilters, setSelectedFilters] = useState([]); 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; created_at: 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) => { const filtersQuery = selectedFilters.length > 0 ? "(\"" + `${selectedFilters.join("\" \"")}` + "\")" : ""; const fullQuery = `${filtersQuery} ${newQuery}`; setComments([]); dispatch({ type: "page", value: 1 }); dispatch({ type: "loading", value: true }); dispatch({ type: "hasMore", value: true }); dispatch({ type: "query", value: newQuery }); fetchComments(fullQuery, 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 { const filtersQuery = selectedFilters.length > 0 ? "(\"" + `${selectedFilters.join("\" \"")}` + "\")" : ""; const fullQuery = `${filtersQuery} ${state.query}`; fetchComments(fullQuery, state.story, state.page); } } }, [state.story, state.page, selectedFilters]); const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; const formatCommentText = (html: string) => { return html .replace(/<[p]+>/g, (match) => `${match}
`) .replace( //g, "") .replace(/ { const date = new Date(dateString); const now = new Date(); const secondsPast = (now.getTime() - date.getTime()) / 1000; if (secondsPast < 60) { return `${Math.round(secondsPast)}s ago`; } if (secondsPast < 3600) { return `${Math.round(secondsPast / 60)}m ago`; } if (secondsPast <= 86400) { return `${Math.round(secondsPast / 3600)}h ago`; } return `${Math.round(secondsPast / 86400)}d ago`; }; const FilterPanel = () => { const workStyles = ["Remote", "Hybrid", "Onsite"]; const locations = [ "San Francisco", "New York", "Seattle", "Austin", "California", "Chicago", "Los Angeles", "Boston", "Colorado", "Toronto", "London", "Berlin", "Paris", "Sydney", "Singapore", "Tokyo", "Amsterdam", "Vancouver", ]; const toggleFilter = (filter: string) => { setSelectedFilters(prev => prev.includes(filter) ? prev.filter(f => f !== filter) : [...prev, filter] ); dispatch({ type: "page", value: 1 }); }; return (

Work Style:

{workStyles.map(style => ( ))}

Locations:

{locations.map(location => ( ))}

); }; return ( <>

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

Who's Hiring

: title} ))}

View Source Code

{activeTab == "/" ? (

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

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

{comment.author} {getRelativeTime(comment.created_at)}

))}

{state.loading && (

)} {showScrollTop && ( )}

) : } ); } function ServerApp() { return ( Who's Hiring

); } 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: 0, hitsPerPage: 100, // Fetch a moderate number of comments }); // Filter out sub-comments and paginate manually const topLevelComments = commentSearch.hits.filter(comment => comment.parent_id === commentSearch.hits[0].story_id); const paginatedComments = topLevelComments.slice((page - 1) * 30, page * 30); const paginatedResponse = { ...commentSearch, hits: paginatedComments, nbHits: topLevelComments.length, page: page, }; console.log(topLevelComments); console.log(paginatedComments); console.log(paginatedResponse); return new Response( JSON.stringify(paginatedResponse), { headers: { "Content-Type": "application/json" }, }, ); } return new Response( renderToString(), { headers: { "content-type": "text/html", }, }, ); }