Basic search

bknoles · bknoles · commit a84b1aea98ab · 2025-11-19T09:20:16.000-08:00
diff --git a/app/controllers/search_controller.rb b/app/controllers/search_controller.rb
@@ -0,0 +1,14 @@
+class SearchController < ApplicationController
+  def index
+    query = params[:query].to_s
+
+    topics = Topic.search(query)
+                  .as_json(include: [
+                    :user,
+                    :category,
+                    messages: { include: :user }
+                  ])
+
+    render inertia: { topics:, query: }
+  end
+end
diff --git a/app/frontend/layouts/AppLayout.tsx b/app/frontend/layouts/AppLayout.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react'
-import { Link, usePage, router } from '@inertiajs/react'
+import { Link, usePage, router, Form } from '@inertiajs/react'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
 import {
   Bars3Icon,
@@ -25,24 +25,27 @@ export default function AppLayout({ children }: AppLayoutProps) {
 
       <div className="flex-1 flex flex-col overflow-hidden">
         <header className="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-4 flex-1">
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
               className="p-2 rounded-md hover:bg-gray-100 text-gray-600 hover:text-gray-900"
             >
               <Bars3Icon className="h-6 w-6" />
             </button>
             <div className="flex-1 max-w-lg">
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+              <Form action="/search" method="get">
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                  </div>
+                  <input
+                    type="text"
+                    name="query"
+                    placeholder="Search"
+                    className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
+                  />
                 </div>
-                <input
-                  type="text"
-                  placeholder="Search"
-                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
-                />
-              </div>
+              </Form>
             </div>
           </div>
 
diff --git a/app/frontend/pages/search/index.tsx b/app/frontend/pages/search/index.tsx
@@ -0,0 +1,21 @@
+import { Head } from '@inertiajs/react'
+import AppLayout from '../../layouts/AppLayout'
+import { Topic } from '../../types'
+import TopicsTable from '../../components/TopicsTable'
+
+function TopicsIndex({ topics, query }: { topics: Topic[], query: string }) {
+  return (
+    <AppLayout>
+      <Head title={`Search results for "${query}" - Pups & Pourovers`} />
+
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-2xl font-bold mb-4">Search results for "{query}"</h1>
+        <div className="bg-white shadow-sm rounded-lg overflow-hidden">
+          <TopicsTable topics={topics} />
+        </div>
+      </div>
+    </AppLayout>
+  )
+}
+
+export default TopicsIndex
diff --git a/app/models/topic.rb b/app/models/topic.rb
@@ -4,4 +4,12 @@ class Topic < ApplicationRecord
   belongs_to :category, counter_cache: true
 
   validates :title, presence: true
+
+  scope :search, ->(query) {
+    includes(:user, :category, messages: :user)
+      .left_joins(:messages)
+      .where("lower(topics.title) LIKE :query OR lower(messages.body) LIKE :query", query: "%#{query.downcase}%")
+      .order(created_at: :desc)
+      .distinct
+  }
 end
diff --git a/config/routes.rb b/config/routes.rb
@@ -22,4 +22,5 @@
   resources :categories, only: [ :show ]
 
   resources :my_topics, only: [ :index ]
+  get "search", to: "search#index"
 end
