migrate file tree paths to rest apis

Author: brendan-kellam

packages/web/src/app/[domain]/browse/[...path]/components/pureTreePreviewPanel.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useRef } from "react";
-import { FileTreeItem } from "@/features/fileTree/actions";
 import { FileTreeItemComponent } from "@/features/fileTree/components/fileTreeItemComponent";
 import { getBrowsePath } from "../../hooks/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useBrowseParams } from "../../hooks/useBrowseParams";
 import { useDomain } from "@/hooks/useDomain";
+import { FileTreeItem } from "@/features/fileTree/types";
 
 interface PureTreePreviewPanelProps {
     items: FileTreeItem[];

packages/web/src/app/[domain]/browse/[...path]/components/treePreviewPanel.tsx

@@ -2,7 +2,7 @@
 import { Separator } from "@/components/ui/separator";
 import { getRepoInfoByName } from "@/actions";
 import { PathHeader } from "@/app/[domain]/components/pathHeader";
-import { getFolderContents } from "@/features/fileTree/actions";
+import { getFolderContents } from "@/features/fileTree/api";
 import { isServiceError } from "@/lib/utils";
 import { PureTreePreviewPanel } from "./pureTreePreviewPanel";
 

packages/web/src/app/[domain]/browse/components/fileSearchCommandDialog.tsx

@@ -5,14 +5,15 @@ import { useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useQuery } from "@tanstack/react-query";
 import { unwrapServiceError } from "@/lib/utils";
-import { FileTreeItem, getFiles } from "@/features/fileTree/actions";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
 import { useBrowseNavigation } from "../hooks/useBrowseNavigation";
 import { useBrowseState } from "../hooks/useBrowseState";
 import { useBrowseParams } from "../hooks/useBrowseParams";
 import { FileTreeItemIcon } from "@/features/fileTree/components/fileTreeItemIcon";
 import { useLocalStorage } from "usehooks-ts";
 import { Skeleton } from "@/components/ui/skeleton";
+import { FileTreeItem } from "@/features/fileTree/types";
+import { getFiles } from "@/app/api/(client)/client";
 
 const MAX_RESULTS = 100;
 

packages/web/src/app/[domain]/search/components/codePreviewPanel/index.tsx

@@ -6,7 +6,7 @@ import { SearchResultFile } from "@/features/search/types";
 import { SymbolIcon } from "@radix-ui/react-icons";
 import { SetStateAction, Dispatch, useMemo } from "react";
 import { unwrapServiceError } from "@/lib/utils";
-import { fetchFileSource } from "@/app/api/(client)/client";
+import { getFileSource } from "@/app/api/(client)/client";
 
 interface CodePreviewPanelProps {
     previewedFile: SearchResultFile;
@@ -31,7 +31,7 @@ export const CodePreviewPanel = ({
     const { data: file, isLoading, isPending, isError } = useQuery({
         queryKey: ["source", previewedFile, branch],
         queryFn: () => unwrapServiceError(
-            fetchFileSource({
+            getFileSource({
                 fileName: previewedFile.fileName.text,
                 repository: previewedFile.repository,
                 branch,

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

@@ -9,7 +9,16 @@ import {
     SearchRequest,
     SearchResponse,
 } from "@/features/search/types";
-import { FindRelatedSymbolsRequest, FindRelatedSymbolsResponse } from "@/features/codeNav/types";
+import {
+    FindRelatedSymbolsRequest,
+    FindRelatedSymbolsResponse,
+} from "@/features/codeNav/types";
+import {
+    GetFilesRequest,
+    GetFilesResponse,
+    GetTreeRequest,
+    GetTreeResponse,
+} from "@/features/fileTree/types";
 
 export const search = async (body: SearchRequest): Promise<SearchResponse | ServiceError> => {
     const result = await fetch("/api/search", {
@@ -27,7 +36,7 @@ export const search = async (body: SearchRequest): Promise<SearchResponse | Serv
     return result as SearchResponse | ServiceError;
 }
 
-export const fetchFileSource = async (body: FileSourceRequest): Promise<FileSourceResponse | ServiceError> => {
+export const getFileSource = async (body: FileSourceRequest): Promise<FileSourceResponse | ServiceError> => {
     const result = await fetch("/api/source", {
         method: "POST",
         headers: {
@@ -74,4 +83,20 @@ export const findSearchBasedSymbolDefinitions = async (body: FindRelatedSymbolsR
         body: JSON.stringify(body),
     }).then(response => response.json());
     return result as FindRelatedSymbolsResponse | ServiceError;
+}
+
+export const getTree = async (body: GetTreeRequest): Promise<GetTreeResponse | ServiceError> => {
+    const result = await fetch("/api/tree", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as GetTreeResponse | ServiceError;
+}
+
+export const getFiles = async (body: GetFilesRequest): Promise<GetFilesResponse | ServiceError> => {
+    const result = await fetch("/api/files", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as GetFilesResponse | ServiceError;
 }

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

@@ -0,0 +1,23 @@
+'use server';
+
+import { getFiles } from "@/features/fileTree/api";
+import { getFilesRequestSchema } from "@/features/fileTree/types";
+import { schemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
+import { isServiceError } from "@/lib/utils";
+import { NextRequest } from "next/server";
+
+export const POST = async (request: NextRequest) => {
+    const body = await request.json();
+    const parsed = await getFilesRequestSchema.safeParseAsync(body);
+    if (!parsed.success) {
+        return serviceErrorResponse(schemaValidationError(parsed.error));
+    }
+
+    const response = await getFiles(parsed.data);
+    if (isServiceError(response)) {
+        return serviceErrorResponse(response);
+    }
+
+    return Response.json(response);
+}
+

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

@@ -0,0 +1,23 @@
+'use server';
+
+import { getTree } from "@/features/fileTree/api";
+import { getTreeRequestSchema } from "@/features/fileTree/types";
+import { schemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
+import { isServiceError } from "@/lib/utils";
+import { NextRequest } from "next/server";
+
+export const POST = async (request: NextRequest) => {
+    const body = await request.json();
+    const parsed = await getTreeRequestSchema.safeParseAsync(body);
+    if (!parsed.success) {
+        return serviceErrorResponse(schemaValidationError(parsed.error));
+    }
+
+    const response = await getTree(parsed.data);
+    if (isServiceError(response)) {
+        return serviceErrorResponse(response);
+    }
+
+    return Response.json(response);
+}
+

packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { fetchFileSource } from "@/app/api/(client)/client";
+import { getFileSource } from "@/app/api/(client)/client";
 import { VscodeFileIcon } from "@/app/components/vscodeFileIcon";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -99,11 +99,11 @@ export const ReferencedSourcesListView = ({
     const fileSourceQueries = useQueries({
         queries: referencedFileSources.map((file) => ({
             queryKey: ['fileSource', file.path, file.repo, file.revision, domain],
-            queryFn: () => unwrapServiceError(fetchFileSource({
+            queryFn: () => unwrapServiceError(getFileSource({
                 fileName: file.path,
                 repository: file.repo,
                 branch: file.revision,
-            }, domain)),
+            })),
             staleTime: Infinity,
         })),
     });

…ges/web/src/features/fileTree/actions.ts packages/web/src/features/fileTree/api.tspackages/web/src/features/fileTree/actions.ts renamed to packages/web/src/features/fileTree/api.ts packages/web/src/features/fileTree/actions.ts renamed to packages/web/src/features/fileTree/api.ts

@@ -1,4 +1,4 @@
-'use server';
+import 'server-only';
 
 import { sew } from '@/actions';
 import { env } from '@sourcebot/shared';
@@ -8,19 +8,10 @@ import { Repo } from '@sourcebot/db';
 import { createLogger } from '@sourcebot/shared';
 import path from 'path';
 import { simpleGit } from 'simple-git';
+import { FileTreeItem, FileTreeNode } from './types';
 
 const logger = createLogger('file-tree');
 
-export type FileTreeItem = {
-    type: string;
-    path: string;
-    name: string;
-}
-
-export type FileTreeNode = FileTreeItem & {
-    children: FileTreeNode[];
-}
-
 /**
  * Returns the tree of files (blobs) and directories (trees) for a given repository,
  * at a given revision.
@@ -218,7 +209,7 @@ const buildFileTree = (flatList: { type: string, path: string }[]): FileTreeNode
             const part = parts[i];
             const isLeaf = i === parts.length - 1;
             const nodeType = isLeaf ? item.type : 'tree';
-            let next = current.children.find(child => child.name === part && child.type === nodeType);
+            let next = current.children.find((child: FileTreeNode) => child.name === part && child.type === nodeType);
 
             if (!next) {
                 next = {
@@ -240,7 +231,7 @@ const buildFileTree = (flatList: { type: string, path: string }[]): FileTreeNode
 
         const sortedChildren = node.children
             .map(sortTree)
-            .sort((a, b) => {
+            .sort((a: FileTreeNode, b: FileTreeNode) => {
                 if (a.type !== b.type) {
                     return a.type === 'tree' ? -1 : 1;
                 }

packages/web/src/features/fileTree/components/fileTreeItemComponent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FileTreeItem } from "../actions";
+import { FileTreeItem } from "../api";
 import { useEffect, useRef } from "react";
 import clsx from "clsx";
 import scrollIntoView from 'scroll-into-view-if-needed';