Live search results

Author: bknoles

app/controllers/application_controller.rb

@@ -1,6 +1,6 @@
 class ApplicationController < ActionController::Base
   include Pagy::Method
-
+  include Searchable
   # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
   allow_browser versions: :modern
   layout :set_layout

app/controllers/concerns/searchable.rb

@@ -0,0 +1,29 @@
+module Searchable
+  extend ActiveSupport::Concern
+
+  included do
+    inertia_share search_results: -> {
+      return {
+        topics: [],
+        query: params[:q]
+      } unless params[:q].present?
+
+      topics = Topic
+        .includes(:user, :category, messages: :user)
+        .left_joins(:messages)
+        .where("topics.title LIKE :q OR messages.body LIKE :q", q: "%#{params[:q]}%")
+        .order(created_at: :desc)
+        .distinct
+        .as_json(include: [
+          :user,
+          :category,
+          messages: { include: :user }
+        ])
+
+      {
+        topics: topics,
+        q: params[:q].to_s
+      }
+    }
+  end
+end

app/frontend/layouts/AppLayout.tsx

@@ -1,23 +1,51 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, useCallback, useRef } from 'react'
 import { Link, usePage, router, Form } from '@inertiajs/react'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
 import {
   Bars3Icon,
   MagnifyingGlassIcon,
   ChevronDownIcon
 } from '@heroicons/react/24/outline'
-import { User } from '@/types'
+
+import { Topic } from '../types'
 import Sidebar from "@/components/Sidebar";
+import { debounce } from '../utils/debounce'
 
 interface AppLayoutProps {
   children: ReactNode
 }
 
 export default function AppLayout({ children }: AppLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
-  const {props: {current_user: currentUser}} = usePage()
+  const {
+    props: {
+      current_user: currentUser,
+      search_results: searchResults
+    },
+  } = usePage()
+
+  const { topics, q } = searchResults
+  const { username } = currentUser || {}
+
+  const debouncedSearch = useCallback(
+    debounce((q: string) => {
+      router.reload({ only: ['search_results'], data: { q }, preserveUrl: true })
+    }, 500),
+    []
+  )
 
-  const {username} = currentUser || {} as User
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    debouncedSearch(value)
+  }
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleEscapeKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      inputRef.current?.blur()
+    }
+  }
 
   return (
     <div className="flex h-screen bg-gray-50">
@@ -32,8 +60,12 @@ export default function AppLayout({ children }: AppLayoutProps) {
             >
               <Bars3Icon className="h-6 w-6" />
             </button>
-            <div className="flex-1 max-w-lg">
-              <Form action="/search" method="get">
+            <div className="group flex-1 max-w-lg relative">
+              <Form
+                action="/search"
+                method="get"
+                resetOnSuccess
+              >
                 <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" />
@@ -42,10 +74,38 @@ export default function AppLayout({ children }: AppLayoutProps) {
                     type="text"
                     name="query"
                     placeholder="Search"
+                    onChange={handleSearchChange}
+                    onKeyDown={handleEscapeKey}
+                    ref={inputRef}
+                    defaultValue={q}
                     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 className="absolute z-50 mt-1 w-full rounded-md bg-white shadow-lg ring-1 ring-black/5 max-h-96 overflow-y-auto hidden group-focus-within:block">
+                <div className="py-1">
+                  {topics && topics.map((topic: Topic) => (
+                    <Link
+                      key={topic.id}
+                      href={`/topics/${topic.id}`}
+                      className="block px-4 py-3 hover:bg-gray-50 transition-colors"
+                    >
+                      <div className="text-sm font-medium text-sky-700">
+                        {topic.title}
+                      </div>
+                      <div className="text-xs text-gray-500 mt-1">
+                        {topic.category.name}
+                      </div>
+                    </Link>
+                  ))}
+                  {topics.length === 0 && (
+                    <div className="block px-4 py-3 text-sm text-gray-500">
+                      No results found
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
 

app/frontend/types.ts

@@ -52,4 +52,4 @@ export interface Meta {
   head_key?: string,
   inner_content?: string | object,
   [key: string]: any
-}
+}