feat: add react types to codeeditor

pages/project/@slug/components/file-viewer.tsx

@@ -4,8 +4,9 @@ import { Data } from "../+data";
 import Spinner from "~/components/ui/spinner";
 import { previewStore } from "../stores/web-preview";
 import { useProjectContext } from "../context/project";
-import { Suspense, lazy } from "react";
+import { Suspense, lazy, useMemo } from "react";
 import CodeEditor from "~/components/ui/code-editor";
+import { getFileExt } from "~/lib/utils";
 // const CodeEditor = lazy(() => import("~/components/ui/code-editor"));
 
 type Props = {
@@ -14,7 +15,7 @@ type Props = {
 
 const FileViewer = ({ id }: Props) => {
   const { project } = useProjectContext();
-  const { initialFiles } = useData<Data>();
+  const { initialFiles, files } = useData<Data>();
   const initialData = initialFiles.find((i) => i.id === id) as any;
 
   const { data, isLoading } = trpc.file.getById.useQuery(id, {
@@ -32,6 +33,18 @@ const FileViewer = ({ id }: Props) => {
     },
   });
 
+  const projectJsFiles = useMemo(() => {
+    return files
+      .filter((i) => {
+        const ext = getFileExt(i.filename);
+        return ["js", "jsx", "ts", "tsx"].includes(ext) && !i.isFile;
+      })
+      .map((i) => ({
+        path: i.path,
+        value: i.content || "",
+      }));
+  }, [files]);
+
   if (isLoading) {
     return <LoadingLayout />;
   }
@@ -49,6 +62,7 @@ const FileViewer = ({ id }: Props) => {
           value={data.content || ""}
           isReadOnly={!project.isMutable}
           formatOnSave
+          initialFiles={projectJsFiles}
           onChange={(val) => {
             if (!project.isMutable) {
               return;