Add location filter

islands/AddToList.tsx

@@ -1,26 +1,34 @@
 import { Button } from "../components/Button.tsx";
+import Search from "../types/Search.ts";
 
 interface Props {
-  addTerm: (newVal: string) => void;
+  addTerm: (newSearch: Search) => void;
 }
 
 export default function AddToList(props: Props) {
   function handleAdd(e) {
     e.preventDefault();
-    const newTerm = e.target.newTerm.value;
-    props.addTerm(newTerm);
-    e.target.newTerm.value = "";
+    const searchTerm = e.target.searchTerm.value;
+    const location = e.target.location.value;
+    const searchObject = { searchTerm, location };
+    props.addTerm(searchObject);
   }
 
   return (
-    <form onSubmit={(e) => handleAdd(e)}>
+    <form onSubmit={(e) => handleAdd(e)} class="flex flex-wrap gap-2">
       <input
         className="px-2 py-1 mr-2 border-black border-2 rounded bg-white hover:bg-gray-200 transition-colors text-[#E70279]"
         type="text"
-        name="newTerm"
+        name="searchTerm"
         required
         placeholder={"Software Developer"}
       />
+      <input
+        className="px-2 py-1 mr-2 border-black border-2 rounded bg-white hover:bg-gray-200 transition-colors text-[#E70279]"
+        type="text"
+        name="location"
+        placeholder={"All New Zealand"}
+      />
       <Button>Search</Button>
     </form>
   );

islands/App.tsx

@@ -2,22 +2,24 @@ import { useState } from "preact/hooks";
 
 import AddToList from "../islands/AddToList.tsx";
 import CountList from "../islands/CountList.tsx";
+import Search from "../types/Search.ts";
 
 export default function App() {
-  const [searchTerms, setSearchTerms] = useState([] as string[]);
+  const [searchList, setSearchList] = useState([] as Search[]);
 
-  function addTerm(newVal: string) {
-    setSearchTerms([...searchTerms, newVal]);
+  function addTerm(newSearch: Search) {
+    setSearchList([...searchList, newSearch]);
   }
 
   return (
     <>
       <h1 class="text-4xl font-bold pb-4 text-white">The Seeker</h1>
       <p class="text-white mb-2">
-        Find out how many jobs are available on Seek NZ for a specific term.
+        Find out how many jobs are available on Seek NZ for a specific search
+        term and location (optional).
       </p>
       <AddToList addTerm={addTerm} />
-      <CountList searchTerms={searchTerms} />
+      <CountList searchList={searchList} />
     </>
   );
 }

islands/Count.tsx

@@ -1,19 +1,17 @@
 import { useSignal } from "@preact/signals";
+import Search from "../types/Search.ts";
 
 interface CountProps {
-  searchTerm: string;
+  searchTerm: Search;
 }
 
-// Create a cache object to store the search results
-const cache: { [searchTerm: string]: number } = {};
-
 export default function Count(props: CountProps) {
   const count = useSignal("");
 
-  async function getCount(search: string) {
+  async function getCount(searchTerm: string, location: string) {
     try {
       const response = await fetch(
-        `/api/v1/scrape/${search}`,
+        `/api/v1/scrape/${searchTerm}/${location}`,
       );
       const result = await response.json();
       count.value = result.count;
@@ -22,15 +20,19 @@ export default function Count(props: CountProps) {
     }
   }
 
-  getCount(props.searchTerm);
+  getCount(props.searchTerm.searchTerm, props.searchTerm.location);
 
   return (
     <div class="my-2">
       <a
-        href={`https://www.seek.co.nz/${props.searchTerm}-jobs`}
+        href={`https://www.seek.co.nz/${props.searchTerm.searchTerm}-jobs/in-${props.searchTerm.location}`}
         target="_blank"
       >
-        {props.searchTerm}: {count.value === ""
+        {props.searchTerm.searchTerm} jobs
+        {props.searchTerm.location
+          ? ` in ${props.searchTerm.location}: `
+          : ` in NZ: `}
+        {count.value === ""
           ? <img class=" inline" src="/3-dots-bounce.svg" alt="loading..." />
           : count.value || 0}
       </a>

islands/CountList.tsx

@@ -1,9 +1,14 @@
+import Search from "../types/Search.ts";
 import Count from "./Count.tsx";
 
-export default function CountList(props) {
+interface Props {
+  searchList: Search[];
+}
+
+export default function CountList(props: Props) {
   return (
     <div class="text-white text-center">
-      {props.searchTerms.map((s) => <Count searchTerm={s} />)}
+      {props.searchList.map((s) => <Count searchTerm={s} />)}
     </div>
   );
 }

routes/api/v1/scrape/[searchTerm]/[location]/index.tsx

@@ -1,4 +1,4 @@
-import { Handlers, PageProps } from "$fresh/server.ts";
+import { Handlers } from "$fresh/server.ts";
 import scrape from "../../../../../../shared/scrape.ts";
 
 export const handler: Handlers = {

types/Search.ts

@@ -0,0 +1,5 @@
+export default interface Search {
+  searchTerm: string;
+  location: string;
+  count?: number;
+}