finish brewery feature set

web/frontend/app/lib/breweries.server.ts

@@ -0,0 +1,55 @@
+const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
+
+interface ApiResponse<T> {
+   message: string;
+   payload: T;
+}
+
+export interface BreweryLocation {
+   breweryPostLocationId: string;
+   breweryPostId: string;
+   cityId: string;
+   addressLine1: string;
+   addressLine2: string | null;
+   postalCode: string;
+}
+
+export interface Brewery {
+   breweryPostId: string;
+   postedById: string;
+   breweryName: string;
+   description: string;
+   createdAt: string;
+   updatedAt: string | null;
+   location: BreweryLocation | null;
+}
+
+export async function getBreweries(limit?: number, offset?: number): Promise<Brewery[]> {
+   const params = new URLSearchParams();
+   if (limit !== undefined) params.set('limit', String(limit));
+   if (offset !== undefined) params.set('offset', String(offset));
+
+   const res = await fetch(`${API_BASE_URL}/api/brewery?${params}`);
+
+   if (!res.ok) {
+      throw new Error(`Failed to load breweries (${res.status})`);
+   }
+
+   const data: ApiResponse<Brewery[]> = await res.json();
+   return data.payload;
+}
+
+export async function getBreweryById(id: string): Promise<Brewery | null> {
+   const res = await fetch(`${API_BASE_URL}/api/brewery/${encodeURIComponent(id)}`);
+
+   if (res.status === 404) {
+      return null;
+   }
+
+   if (!res.ok) {
+      throw new Error(`Failed to load brewery (${res.status})`);
+   }
+
+   const data: ApiResponse<Brewery> = await res.json();
+   return data.payload;
+}

web/frontend/app/routes/breweries.tsx

@@ -1,15 +1,55 @@
+import { Link } from 'react-router';
+import { getBreweries } from '../lib/breweries.server';
 import type { Route } from './+types/breweries';
 
 export function meta({}: Route.MetaArgs) {
    return [{ title: 'Breweries | The Biergarten App' }];
 }
 
-export default function Breweries() {
+export async function loader() {
+   const breweries = await getBreweries();
+   return { breweries };
+}
+
+export default function Breweries({ loaderData }: Route.ComponentProps) {
+   const { breweries } = loaderData;
+
    return (
       <div className="min-h-screen bg-base-200">
          <div className="container mx-auto p-4">
             <h1 className="text-4xl font-bold mb-4">Breweries</h1>
-            <p className="text-base-content/70">Discover our partner breweries.</p>
+            <p className="text-base-content/70 mb-6">Discover our partner breweries.</p>
+
+            {breweries.length === 0 ? (
+               <div className="alert alert-info alert-soft">
+                  <span>No breweries have been posted yet.</span>
+               </div>
+            ) : (
+               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {breweries.map((brewery) => (
+                     <Link
+                        key={brewery.breweryPostId}
+                        to={`/breweries/${brewery.breweryPostId}`}
+                        className="card bg-base-100 shadow hover:shadow-lg transition-shadow"
+                     >
+                        <div className="card-body">
+                           <h2 className="card-title">{brewery.breweryName}</h2>
+                           <p className="text-base-content/70 line-clamp-3">
+                              {brewery.description}
+                           </p>
+                           {brewery.location && (
+                              <p className="text-sm text-base-content/50 mt-2">
+                                 {brewery.location.addressLine1}
+                                 {brewery.location.addressLine2
+                                    ? `, ${brewery.location.addressLine2}`
+                                    : ''}
+                              </p>
+                           )}
+                        </div>
+                     </Link>
+                  ))}
+               </div>
+            )}
          </div>
       </div>
    );

web/frontend/app/routes/brewery-detail.tsx

@@ -0,0 +1,57 @@
+import { Link, data } from 'react-router';
+import { getBreweryById } from '../lib/breweries.server';
+import type { Route } from './+types/brewery-detail';
+
+export function meta({ data }: Route.MetaArgs) {
+   return [{ title: `${data?.brewery.breweryName ?? 'Brewery'} | The Biergarten App` }];
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+   const brewery = await getBreweryById(params.id);
+   if (!brewery) {
+      throw data('Brewery not found.', { status: 404 });
+   }
+
+   return { brewery };
+}
+
+export default function BreweryDetail({ loaderData }: Route.ComponentProps) {
+   const { brewery } = loaderData;
+
+   return (
+      <div className="min-h-screen bg-base-200">
+         <div className="container mx-auto p-4 max-w-2xl">
+            <Link
+               to="/breweries"
+               className="link link-hover text-sm text-base-content/60 mb-4 inline-block"
+            >
+               &larr; Back to Breweries
+            </Link>
+
+            <div className="card bg-base-100 shadow">
+               <div className="card-body">
+                  <h1 className="card-title text-3xl">{brewery.breweryName}</h1>
+                  <p className="text-base-content/70 whitespace-pre-line">{brewery.description}</p>
+
+                  {brewery.location && (
+                     <div className="bg-base-200 rounded-box p-4 mt-4">
+                        <p className="text-xs font-semibold uppercase tracking-widest text-base-content/50 mb-2">
+                           Location
+                        </p>
+                        <p>{brewery.location.addressLine1}</p>
+                        {brewery.location.addressLine2 && <p>{brewery.location.addressLine2}</p>}
+                        <p>{brewery.location.postalCode}</p>
+                     </div>
+                  )}
+
+                  <p className="text-xs text-base-content/40 mt-4">
+                     Posted {new Date(brewery.createdAt).toLocaleDateString()}
+                     {brewery.updatedAt &&
+                        ` · Updated ${new Date(brewery.updatedAt).toLocaleDateString()}`}
+                  </p>
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+}