Fixed breadcrumb links in the tags page

app/components/breadcrumbs.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe } from "vitest";
+import { Breadcrumbs } from "~/components/breadcrumbs";
+
+describe("<Breadcrumbs/>", () => {
+    it("should render children within <ul> and wrapped by <li></li>", () => {
+        const view = render(
+            <Breadcrumbs>
+                <span id="1">one</span>
+                <span id="2">two</span>
+                <span id="3">three</span>
+            </Breadcrumbs>
+        );
+        expect(screen.getByText(/one/)).toBeDefined();
+        expect(screen.getByText(/two/)).toBeDefined();
+        expect(screen.getByText(/three/)).toBeDefined();
+        expect(view.container).toMatchSnapshot();
+    });
+});

app/models/station.server.ts

@@ -40,10 +40,14 @@ export function getStations(reliability: number = 80) {
 /**
  * Fetch stations tagged with `tags` and a reliability score GTE to the `reliability` parameter.
  */
-export function findStationsByTags(tags: string[], reliability: number = 80) {
+export function findStationsByTags(tags: string[], q: string | null, reliability: number = 80) {
+    const nameCondition = q ? {
+        contains: q
+    } : {};
     return prisma.station.findMany({
         where: {
             reliability: { gte: reliability },
+            name: nameCondition,
             tags: {
                 some: {
                     tag: {

app/routes/listen.tag.$tag.tsx

@@ -2,6 +2,7 @@ import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, Outlet, useLoaderData } from "@remix-run/react";
 import { Breadcrumbs } from "~/components/breadcrumbs";
+import { ListenLink } from "~/components/page-layout";
 import { StationsGallery } from "~/components/stations-gallery";
 import type { StationWithTags } from "~/models/station.server";
 import { findStationsByTags } from "~/models/station.server";
@@ -9,7 +10,7 @@ import { findTagBySlug } from "~/models/tag.server";
 import { notFound } from "~/utils";
 
 
-export async function loader({ params }: LoaderArgs) {
+export async function loader({ params, request }: LoaderArgs) {
     if (!params.tag) {
         throw notFound();
     }
@@ -19,7 +20,10 @@ export async function loader({ params }: LoaderArgs) {
         throw notFound();
     }
 
-    const stations: StationWithTags[] = await findStationsByTags([tag.name]);
+    const url = new URL(request.url);
+    const q = url.searchParams.get("q");
+
+    const stations: StationWithTags[] = await findStationsByTags([tag.name], q);
 
     return json({ tag, stations });
 
@@ -31,8 +35,8 @@ export default function ListenTag() {
     return (
         <>
             <Breadcrumbs>
-                <Link to="/listen">Home</Link>
+                <ListenLink to="/listen">Home</ListenLink>
-                <Link to={`/listen/${tag.slug}`} className="capitalize">{tag.name}</Link>
+                <ListenLink to={`/listen/${tag.slug}`} className="capitalize">{tag.name}</ListenLink>
             </Breadcrumbs>
             <StationsGallery stations={stations} tag={tag} />
             <Outlet />