Add a basic search page

app/components/app_card.tsx

@@ -1,13 +1,13 @@
 import { NavLink } from 'react-router';
 import Heart from "../icons/heart.svg?react";
-import type { ApplicationInfo } from "~/types/Application";
+import type { Application } from '~/types/AppstoreApi';
 
-export default function AppCard({ info }: { info: ApplicationInfo }) {
+export default function AppCard({ info, horizontal }: { info: Application, horizontal?: true }) {
   const applicationLink = (applicationId: string) => {
     return `/application/${applicationId}`;
   };
   return (
-    <div className="app-card">
+    <div className={`app-card ${horizontal ? 'horizontal' : ''}`}>
       <NavLink to={applicationLink(info.id)}>
         <img src={info.type == 'watchapp' ? info.list_image['144x144'] : info.screenshot_images[0]['144x168']} />
         <div className="info">
@@ -35,7 +35,8 @@ export default function AppCard({ info }: { info: ApplicationInfo }) {
         }
         .app-card a .info {
           text-align: center;
-          max-width: 100%
+          max-width: 100%;
+          flex-grow: 999;
         }
         .app-card a .info .title {
           font-weight: 600;
@@ -48,6 +49,14 @@ export default function AppCard({ info }: { info: ApplicationInfo }) {
         .app-card a .info .hearts {
           color: var(--as-fg-muted)
         }
+
+        .app-card.horizontal a {
+          flex-direction: row;
+        }
+
+        .app-card.horizontal a .info {
+          text-align: left;
+        }
       `}</style>
     </div>
   );

app/routes/search.tsx

@@ -0,0 +1,93 @@
+import { useState, type ChangeEventHandler, type KeyboardEventHandler } from "react";
+import AppCard from "~/components/app_card";
+import type { Application, CollectionOverview } from "~/types/AppstoreApi";
+import type { Route } from "../routes/+types/search";
+
+export default function Search({ params }: Route.ComponentProps) {
+  const searchTagFilters = params.type === "watchapps" ? "(watchapp,companion-app)" : "watchface";
+
+  const [searchText, setSearchText] = useState<string>();
+  const [searchResults, setSearchResults] = useState<Application[]>([]);
+
+  const [searchDebounceTimeout, setSearchDebounceTimeout] = useState<NodeJS.Timeout>();
+
+  const searchTextChangeHandler: ChangeEventHandler<HTMLInputElement> = (event) => {
+    clearTimeout(searchDebounceTimeout);
+    setSearchText(event.target.value);
+
+    setSearchDebounceTimeout(setTimeout(sendSearchRequest, 200));
+  };
+
+  const searchTextKeydownHandler: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    switch (event.key) {
+      case "Enter":
+        forceStartSearch();
+        break;
+    }
+  };
+
+  const forceStartSearch = () => {
+    clearTimeout(searchDebounceTimeout);
+    sendSearchRequest();
+  };
+
+  const sendSearchRequest = () => {
+    if (!searchText) return;
+
+    fetch(`https://7683ow76eq-dsn.algolia.net/1/indexes/rebble-appstore-production/query`, {
+      method: "POST",
+      headers: {
+        "x-algolia-api-key": "252f4938082b8693a8a9fc0157d1d24f",
+        "x-algolia-application-id": "7683OW76EQ",
+      },
+      body: JSON.stringify({
+        params: new URLSearchParams({
+          query: searchText,
+          tagFilters: searchTagFilters,
+          hitsPerPage: "999",
+          page: "0",
+        }).toString(),
+      }),
+    }).then(async (res) => {
+      if (!res.ok) console.error(await res.text());
+      const results = await res.json();
+      setSearchResults(results.hits);
+    });
+  };
+
+  return (
+    <div className="search-page">
+      <input
+        className="search-bar"
+        value={searchText}
+        onChange={searchTextChangeHandler}
+        onBlur={forceStartSearch}
+        onKeyDown={searchTextKeydownHandler}
+        placeholder="Search..."
+      ></input>
+
+      <div className="search-results">
+        {searchResults.map((application) => {
+          return <AppCard info={application} key={application.id}></AppCard>;
+        })}
+      </div>
+
+      <style>
+        {`.search-page {
+          display: flex;
+          flex-direction: column;
+        }
+        .search-bar {
+          flex-grow: 999;
+        }
+
+        .search-results {
+          display: grid;
+          gap: 2rem;
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+        `}
+      </style>
+    </div>
+  );
+}

app/routes/watchapps.tsx

@@ -5,6 +5,9 @@ import { mergeMeta } from "../utils/meta"
 import type { Route } from './+types/watchapps';
 import type { CollectionOverview } from '~/types/AppstoreApi';
 
+/**
+ * Runs before page load and populates loaderData
+ */
 export async function loader({ params }: Route.LoaderArgs) {
   const res = await fetch(`https://appstore-api.rebble.io/api/v1/home/apps`);
   const watchapps = await res.json();
@@ -65,6 +68,10 @@ export default function Watchapps({
             <div className="apps">
               {collection.application_ids.slice(0, 6).map((applicationId) => {
                 const application = applicationById(applicationId);
+                if(!application) {
+                  console.warn(`Application ${applicationId} was in collection.application_ids but as not found in known applications!`)
+                  return <></>
+                }
                 return <AppCard info={application} key={applicationId} />
               })}
             </div>