refactor(search): extract search mutation logic into reusable hook

- Moved search API mutation logic from Search component into dedicated useSearchMutation hook
- Improves code reusability and separation of concerns
- Enables search functionality to be used across multiple components
- Reduces code duplication and improves maintainability

Author: denis-shvets

examples/ts-react-search/src/components/HeroSection/Search/Search.tsx

@@ -1,46 +1,21 @@
 'use client'
 
 import { useState } from 'react'
-import { useNavigate } from '@tanstack/react-router'
-import { useMutation } from '@tanstack/react-query'
 import QuickPrompts from './QuickPrompts'
 import SearchForm from './SearchForm'
 import type { FormEvent } from 'react'
+import useSearchMutation from '@/hooks/useSearchMutation.ts'
 
 function Search() {
-  const navigate = useNavigate()
   const [value, setValue] = useState('')
 
-  const { mutate, isPending, error } = useMutation({
-    mutationFn: async (content: string) => {
-      const response = await fetch('/api/search', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ content }),
-      })
-
-      if (!response.ok) {
-        throw new Error('Search request failed')
-      }
-
-      return response.json()
-    },
-    onSuccess: async (json) => {
-      const { name, parameters } = json?.data ?? {}
-
-      if (name && parameters) {
-        await navigate({ to: `/${name}`, search: parameters })
-      }
-    },
-  })
+  const { mutate: search, isPending, error } = useSearchMutation()
 
   function handleSubmit(event: FormEvent) {
     event.preventDefault()
 
     if (value.trim() && !isPending) {
-      mutate(value)
+      search(value)
       setValue('')
     }
   }

examples/ts-react-search/src/hooks/useSearchMutation.ts

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+
+function useSearchMutation() {
+  const navigate = useNavigate()
+
+  return useMutation({
+    mutationFn: async (content: string) => {
+      const response = await fetch('/api/search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Search request failed')
+      }
+
+      return response.json()
+    },
+    onSuccess: async (json) => {
+      const { name, parameters } = json?.data ?? {}
+
+      if (name && parameters) {
+        await navigate({ to: `/${name}`, search: parameters })
+      }
+    },
+  })
+}
+
+export default useSearchMutation