bug fix

golemcloud · Feb 5, 2025 · 034ee49 · 034ee49
1 parent 4fad6d9
commit 034ee49
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 31 deletions.
diff --git a/crates/app/src/pages/components/create/index.tsx b/crates/app/src/pages/components/create/index.tsx
@@ -116,16 +116,14 @@ const CreateComponent = () => {
     formData.append("component", file!);
     formData.append("componentType", values.type!);
     // file system to zip
-    if (fileSystem.length > 0) {
-      const zip = new JSZip();
-      await addFilesToZip(zip, null);
-      const blob = await zip.generateAsync({ type: "blob" });
-      formData.append(
-        "filesPermissions",
-        JSON.stringify(captureFileMetadata(fileSystem))
-      );
-      formData.append("files", blob, "temp.zip");
-    }
+    const zip = new JSZip();
+    await addFilesToZip(zip, null);
+    const blob = await zip.generateAsync({ type: "blob" });
+    formData.append(
+      "filesPermissions",
+      JSON.stringify(captureFileMetadata(fileSystem))
+    );
+    formData.append("files", blob, "temp.zip");
     API.createComponent(formData).then((res) => {
       if (res?.versionedComponentId?.componentId) {
         navigate(`/components/${res.versionedComponentId.componentId}`);

diff --git a/crates/app/src/pages/components/details/file.tsx b/crates/app/src/pages/components/details/file.tsx
@@ -2,23 +2,72 @@ import { FolderStructure } from "@/components/file-manager.tsx";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { API } from "@/service";
-import { Component } from "@/types/component.ts";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ComponentList } from "@/types/component.ts";
 
 export default function FileManager() {
   const { componentId = "" } = useParams();
-  const [component, setComponent] = useState({} as Component);
+  const [componentList, setComponentList] = useState<{
+    [key: string]: ComponentList;
+  }>({});
+  const [versionList, setVersionList] = useState([] as number[]);
+  const [versionChange, setVersionChange] = useState(0 as number);
 
   useEffect(() => {
-    if (!componentId) return;
-    // Fetch entire list of components by ID
-    API.getComponentById(componentId).then((response) => {
-      if (!response) return;
-      setComponent(response[0]);
-    });
+    if (componentId) {
+      API.getComponentByIdAsKey().then((response) => {
+        const componentData = response[componentId];
+        const versionList = componentData?.versionList || [];
+        setVersionList(versionList);
+        setComponentList(response);
+        if (versionList.length > 0) {
+          setVersionChange(versionList[versionList.length - 1]);
+        }
+      });
+    }
   }, [componentId]);
+
+  const handleVersionChange = (version: number) => {
+    setVersionChange(version);
+  };
+
+  const componentDetails =
+    componentList[componentId]?.versions?.[versionChange] || {};
+
   return (
-    <div className="container mx-auto p-4">
-      <FolderStructure data={component.files || []} />
+    <div className="container mx-auto p-4 gap-4 flex flex-col">
+      <div className="flex justify-between">
+        <div className="relative flex-1 max-full">
+          <h1 className="text-2xl font-bold">Files Systems</h1>
+        </div>
+        <div>
+          {versionList.length > 0 && (
+            <Select
+              defaultValue={versionChange.toString()}
+              onValueChange={(version) => handleVersionChange(+version)}
+            >
+              <SelectTrigger className="w-[80px]">
+                <SelectValue> v{versionChange}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {versionList.map((version: number) => (
+                  <SelectItem key={version} value={String(version)}>
+                    v{version}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      </div>
+
+      <FolderStructure data={componentDetails.files || []} />
     </div>
   );
 }
diff --git a/crates/app/src/pages/components/details/update.tsx b/crates/app/src/pages/components/details/update.tsx
@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useRef, useState } from "react";
 import { DndProvider } from "react-dnd";
 import JSZip from "jszip";
@@ -45,6 +45,7 @@ const formSchema = z.object({
 
 export default function ComponentUpdate() {
   const { componentId } = useParams();
+  const navigate = useNavigate();
   const [fileSystem, setFileSystem] = useState<FileItem[] | []>([]);
   const [file, setFile] = useState<File | null>(null);
 
@@ -114,25 +115,25 @@ export default function ComponentUpdate() {
     try {
       const formData = new FormData();
       formData.append("component", file);
-      if (fileSystem.length > 0) {
-        const zip = new JSZip();
-        await addFilesToZip(zip, null);
-        const blob = await zip.generateAsync({ type: "blob" });
-        formData.append(
-          "filesPermissions",
-          JSON.stringify(captureFileMetadata(fileSystem))
-        );
-        formData.append("files", blob, "temp.zip");
-      }
+      const zip = new JSZip();
+      await addFilesToZip(zip, null);
+      const blob = await zip.generateAsync({ type: "blob" });
+      formData.append(
+        "filesPermissions",
+        JSON.stringify(captureFileMetadata(fileSystem))
+      );
+      formData.append("files", blob, "temp.zip");
       await API.updateComponent(componentId!, formData);
 
       form.reset();
       setFile(null);
+      setFileSystem([]);
 
       toast({
         title: "Component was updated successfully",
         duration: 3000,
       });
+      navigate(`/components/${componentId}`);
     } catch (err) {
       console.error("Error updating component:", err);
       toast({