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 skills = [ "ABAP", "ABC", "ActionScript", "Ada", "Amazon Echo", "Amazon Web Services (AWS)", "Android", "Angular", "AppleScript", "Arduino", "Assembly", "Automator", "Awk", "Bash/Shell", "Basic", "Blockchain", "Bourne Shell", "Bro", "C", "C#", "C++", "CAD Design", "Cassandra", "Chatbots", "Clojure", "COBOL", "CoffeeScript", "Common Lisp", "Computer Vision", "Coq", "Cordova", "Cryptography", "C Shell", "CSS", "CUDA", "D", "Dart", "Data Analytics", "Data Modeling", "Data Warehousing", "Deep Learning", "Device Drivers", "Distributed Systems", "Django", "Docker", "DynamoDB", "Eclipse", "Elasticsearch", "Elastic Stack (ELK)", "Elixir", "Emacs Lisp", "Embedded Linux", "Erlang", "Ethereum", "ETL", "Express", "F#", "Firebase", "Firmware", "Flask", "Flutter", "Fortran", "FoxPro", "Git", "GNU Octave", "Go", "Google App Engine", "Google Cloud", "Google Home", "Google Web Toolkit", "GPU Programming", "GraphQL", "Groovy", "gRPC", "Hack", "Hadoop", "Haskell", "HBase", "Heroku", "Hibernate", "Hive", "HTML", "Hyperledger", "IBM Cloud/Watson", "IBM Db2", "Idris", "IIS", "Image Processing", "Information Security", "Internet of Things (IoT)", "iOS", "Java", "JavaScript", "Jenkins", "jQuery", "Julia", "JUnit", "Kafka", "Keras", "Kibana", "Korn Shell", "Kotlin", "Kubernetes", "Less", "Linux", "Lisp", "Logstash", "Lua", "Lucene", "M4", "Machine Learning", "MacOS", "Maple", "MariaDB", "Mathematica", "MATLAB", "Maven", "Memcached", "Mercurial", "Microcontrollers", "Microservices", "Microsoft Azure", "ML", "MongoDB", "MS SQL", "MUMPS", "MySQL", "Natural Language Processing", "Neo4j", ".NET Core", "Next.js", "Nginx", "Node.js", "Objective-C", "OCaml", "Oculus", "OpenCL", "OpenCV", "OpenGL", "Oracle", "Pascal", "Perl", "PHP", "PL/SQL", "PostgreSQL", "PowerScript", "PowerShell", "Processing", "Protobuf", "Puppet", "Python", "R", "RabbitMQ", "Racket", "Raspberry Pi", "RDS/Aurora", "React", "React Native", "Redis", "Redshift", "Reinforcement learning (RL)", "Riak", "Ruby", "Ruby on Rails", "Rust", "SAS", "SASS", "Scala", "Scheme", "Scratch", "SCSS", "Search", "sed", "Serverless", "Smalltalk", "Smarty", "Software Architecture", "Software Security", "Solidity", "Solr", "Spark", "Spring", "Spring Framework", "SQL", "SQLite", "SQL Server", "Standard ML", "Stellar", "Svelte", "Swift", "Tcl", "TCP/IP", "TensorFlow", "Tex", "Theano", "Tomcat", "Torch/PyTorch", "TypeScript", "Unity", "Unix", "Unreal Engine", "VBScript", "Verilog", "VHDL", "Visual Basic", "Vue.js", "WebLogic", "WebVR", "Windows", "Xamarin", "XML", "XQuery", "XSLT", "yacc", "Z shell"]; const toggleFilter = (filter: string) => { setSelectedFilters(prev => prev.includes(filter) ? prev.filter(f => f !== filter) : [...prev, filter] ); dispatch({ type: "page", value: 1 }); }; return (

: 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, }; return new Response( JSON.stringify(paginatedResponse), { headers: { "Content-Type": "application/json" }, }, ); } return new Response( renderToString(), { headers: { "content-type": "text/html", }, }, ); }

Work Style:

Locations:

Skills: