[questions][ui] support search by query

apps/portal/src/components/questions/QuestionSearchBar.tsx

@@ -9,10 +9,14 @@ import SortOptionsSelect from './SortOptionsSelect';
 
 export type QuestionSearchBarProps = SortOptionsSelectProps & {
   onFilterOptionsToggle: () => void;
+  onQueryChange: (query: string) => void;
+  query: string;
 };
 
 export default function QuestionSearchBar({
   onFilterOptionsToggle,
+  onQueryChange,
+  query,
   ...sortOptionsSelectProps
 }: QuestionSearchBarProps) {
   return (
@@ -24,6 +28,10 @@ export default function QuestionSearchBar({
           placeholder="Search by content"
           startAddOn={MagnifyingGlassIcon}
           startAddOnType="icon"
+          value={query}
+          onChange={(value) => {
+            onQueryChange(value);
+          }}
         />
       </div>
       <div className="flex items-end justify-end gap-4">

apps/portal/src/pages/questions/browse.tsx

@@ -47,6 +47,8 @@ function locationToSlug(value: Location & TypeaheadOption): string {
 export default function QuestionsBrowsePage() {
   const router = useRouter();
 
+  const [query, setQuery] = useState('');
+
   const [
     selectedCompanySlugs,
     setSelectedCompanySlugs,
@@ -170,13 +172,14 @@ export default function QuestionsBrowsePage() {
 
   const questionsInfiniteQuery = trpc.useInfiniteQuery(
     [
-      'questions.questions.getQuestionsByFilter',
+      'questions.questions.getQuestionsByFilterAndContent',
       {
         // TODO: Enable filtering by countryIds and stateIds
         cityIds: selectedLocations
           .map(({ cityId }) => cityId)
           .filter((id) => id !== undefined) as Array<string>,
         companyIds: selectedCompanySlugs.map((slug) => slug.split('_')[0]),
+        content: query,
         countryIds: [],
         endDate: today,
         limit: 10,
@@ -505,11 +508,15 @@ export default function QuestionsBrowsePage() {
               <div className="flex flex-col items-stretch gap-4">
                 <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
                   <QuestionSearchBar
+                    query={query}
                     sortOrderValue={sortOrder}
                     sortTypeValue={sortType}
                     onFilterOptionsToggle={() => {
                       setFilterDrawerOpen(!filterDrawerOpen);
                     }}
+                    onQueryChange={(newQuery) => {
+                      setQuery(newQuery);
+                    }}
                     onSortOrderChange={setSortOrder}
                     onSortTypeChange={setSortType}
                   />