use paginated api for search suggestions

Author: brendan-kellam

packages/web/src/app/[domain]/components/searchBar/searchSuggestionsBox.tsx

@@ -155,6 +155,7 @@ const SearchSuggestionsBox = forwardRef(({
                         list: repoSuggestions,
                         DefaultIcon: VscRepo,
                         onSuggestionClicked: createOnSuggestionClickedHandler({ regexEscaped: true }),
+                        isClientSideSearchEnabled: false,
                     }
                 case "language": {
                     return {

packages/web/src/app/[domain]/components/searchBar/useSuggestionsData.ts

@@ -2,7 +2,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { Suggestion, SuggestionMode } from "./searchSuggestionsBox";
-import { getRepos, search } from "@/app/api/(client)/client";
+import { listRepos, search } from "@/app/api/(client)/client";
 import { getSearchContexts } from "@/actions";
 import { useMemo } from "react";
 import { SearchSymbol } from "@/features/search";
@@ -37,8 +37,14 @@ export const useSuggestionsData = ({
 }: Props) => {
     const domain = useDomain();
     const { data: repoSuggestions, isLoading: _isLoadingRepos } = useQuery({
-        queryKey: ["repoSuggestions"],
-        queryFn: () => unwrapServiceError(getRepos()),
+        queryKey: ["repoSuggestions", suggestionQuery],
+        queryFn: () => unwrapServiceError(listRepos({
+            page: 1,
+            direction: "asc",
+            sort: "name",
+            perPage: 15,
+            query: suggestionQuery,
+        })),
         select: (data): Suggestion[] => {
             return data
                 .map(r => ({

packages/web/src/app/api/(client)/client.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { ServiceError } from "@/lib/serviceError";
-import { GetVersionResponse, GetReposResponse } from "@/lib/types";
+import { GetVersionResponse, ListReposQueryParams, ListReposResponse } from "@/lib/types";
 import { isServiceError } from "@/lib/utils";
 import {
     SearchRequest,
@@ -38,12 +38,10 @@ export const search = async (body: SearchRequest): Promise<SearchResponse | Serv
     return result as SearchResponse | ServiceError;
 }
 
-export const getFileSource = async ({ fileName, repository, branch }: FileSourceRequest): Promise<FileSourceResponse | ServiceError> => {
+export const getFileSource = async (queryParams: FileSourceRequest): Promise<FileSourceResponse | ServiceError> => {
     const url = new URL("/api/source", window.location.origin);
-    url.searchParams.set("repo", repository);
-    url.searchParams.set("path", fileName);
-    if (branch) {
-        url.searchParams.set("ref", branch);
+    for (const [key, value] of Object.entries(queryParams)) {
+        url.searchParams.set(key, value.toString());
     }
 
     const result = await fetch(url, {
@@ -53,15 +51,20 @@ export const getFileSource = async ({ fileName, repository, branch }: FileSource
     return result as FileSourceResponse | ServiceError;
 }
 
-export const getRepos = async (): Promise<GetReposResponse> => {
-    const result = await fetch("/api/repos", {
+export const listRepos = async (queryParams: ListReposQueryParams): Promise<ListReposResponse | ServiceError> => {
+    const url = new URL("/api/repos", window.location.origin);
+    for (const [key, value] of Object.entries(queryParams)) {
+        url.searchParams.set(key, value.toString());
+    }
+
+    const result = await fetch(url, {
         method: "GET",
         headers: {
             "Content-Type": "application/json",
         },
     }).then(response => response.json());
 
-    return result as GetReposResponse | ServiceError;
+    return result as ListReposResponse | ServiceError;
 }
 
 export const getVersion = async (): Promise<GetVersionResponse> => {

packages/web/src/app/api/(server)/repos/route.ts

@@ -1,20 +1,11 @@
 import { NextRequest } from "next/server";
-import { z } from "zod";
 import { sew } from "@/actions";
 import { withOptionalAuthV2 } from "@/withAuthV2";
 import { queryParamsSchemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
 import { isServiceError } from "@/lib/utils";
-import { repositoryQuerySchema } from "@/lib/schemas";
+import { listReposQueryParamsSchema, repositoryQuerySchema } from "@/lib/schemas";
 import { buildLinkHeader, getBaseUrl } from "@/lib/pagination";
 
-const listReposQueryParamsSchema = z.object({
-    page: z.coerce.number().int().positive().default(1),
-    perPage: z.coerce.number().int().positive().max(100).default(30),
-    sort: z.enum(['name', 'pushed']).default('name'),
-    direction: z.enum(['asc', 'desc']).default('asc'),
-    query: z.string().optional(),
-});
-
 export const GET = async (request: NextRequest) => {
     const rawParams = Object.fromEntries(
         Object.keys(listReposQueryParamsSchema.shape).map(key => [

packages/web/src/lib/schemas.ts

@@ -1,7 +1,6 @@
 import { checkIfOrgDomainExists } from "@/actions";
 import { z } from "zod";
 import { isServiceError } from "./utils";
-import { serviceErrorSchema } from "./serviceError";
 import { CodeHostType } from "@sourcebot/db";
 
 export const secretCreateRequestSchema = z.object({
@@ -72,4 +71,12 @@ export const getVersionResponseSchema = z.object({
     version: z.string(),
 });
 
-export const getReposResponseSchema = z.union([repositoryQuerySchema.array(), serviceErrorSchema]);
+export const listReposQueryParamsSchema = z.object({
+    page: z.coerce.number().int().positive().default(1),
+    perPage: z.coerce.number().int().positive().max(100).default(30),
+    sort: z.enum(['name', 'pushed']).default('name'),
+    direction: z.enum(['asc', 'desc']).default('asc'),
+    query: z.string().optional(),
+});
+
+export const listReposResponseSchema = repositoryQuerySchema.array();

packages/web/src/lib/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { getReposResponseSchema, getVersionResponseSchema, repositoryQuerySchema, searchContextQuerySchema } from "./schemas";
+import { listReposResponseSchema, getVersionResponseSchema, repositoryQuerySchema, searchContextQuerySchema, listReposQueryParamsSchema } from "./schemas";
 import { tenancyModeSchema } from "@sourcebot/shared";
 
 export type KeymapType = "default" | "vim";
@@ -29,4 +29,5 @@ export type NewsItem = {
 export type TenancyMode = z.infer<typeof tenancyModeSchema>;
 export type RepositoryQuery = z.infer<typeof repositoryQuerySchema>;
 export type SearchContextQuery = z.infer<typeof searchContextQuerySchema>;
-export type GetReposResponse = z.infer<typeof getReposResponseSchema>;
+export type ListReposResponse = z.infer<typeof listReposResponseSchema>;
+export type ListReposQueryParams = z.infer<typeof listReposQueryParamsSchema>;