fix: new routes for k8s and dc projects

services/frontend/src/App.tsx

@@ -82,7 +82,7 @@ export default function App() {
                   }
                 }
               })
-              .catch(() => {
+              .catch((err) => {
                 localStorage.removeItem(LOCAL_STORAGE);
                 navigate("/login");
               });

services/frontend/src/components/Project/index.tsx

@@ -1,72 +0,0 @@
-import { useParams } from "react-router-dom";
-import Spinner from "../global/Spinner";
-import { useProject } from "../../hooks/useProject";
-import KubernetesProject from "./kubernetes";
-import DockerComposeProject from "./docker-compose";
-import { useTitle } from "../../hooks";
-
-interface IProjectProps {
-  isAuthenticated: boolean;
-}
-
-const Project = (props: IProjectProps) => {
-  const { isAuthenticated } = props;
-  const { uuid } = useParams<{ uuid: string }>();
-  const { data, error, isFetching } = useProject(uuid);
-
-  useTitle(
-    [
-      isFetching ? "" : data ? data.name : "New project",
-      "Container Toolkit"
-    ].join(" | ")
-  );
-
-  if (!isFetching && !error) {
-    if (data.project_type === 0) {
-      return (
-        <DockerComposeProject isAuthenticated={isAuthenticated} data={data} />
-      );
-    }
-
-    if (data.project_type === 1) {
-      return (
-        <KubernetesProject isAuthenticated={isAuthenticated} data={data} />
-      );
-    }
-  }
-
-  if (error) {
-    return (
-      <div
-        className="text-center"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          minHeight: "calc(60vh - 120px)"
-        }}
-      >
-        <h3 className="text-2xl font-medium text-gray-900">
-          {(error as any)?.response.status === 404 ? <>404</> : <>Oops...</>}
-        </h3>
-        <p className="mt-1 text-sm text-gray-500">
-          Either this project does not exist, it is private or the link is
-          wrong.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {isFetching && (
-        <div className="flex items-center justify-center items-stretch min-h-screen align-middle">
-          <Spinner className="w-4 h-4 m-auto dark:text-blue-400 text-blue-600"></Spinner>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Project;

services/frontend/src/components/Project/kubernetes/index.tsx

@@ -142,6 +142,14 @@ export default function KubernetesProject(props: IProjectProps) {
     setCanvasPosition(canvasData.canvas.position);
   }, [data]);
 
+  const debouncedOnCodeChange = useMemo(
+    () =>
+      debounce((code: string) => {
+        //formik.setFieldValue("code", e, false);
+      }, 700),
+    []
+  );
+
   const debouncedOnGraphUpdate = useMemo(
     () =>
       debounce((payload) => {
@@ -163,6 +171,10 @@ export default function KubernetesProject(props: IProjectProps) {
     []
   );
 
+  const onCodeUpdate = (code: string) => {
+    debouncedOnCodeChange(code);
+  };
+
   const onGraphUpdate = (graphData: any) => {
     const data = { ...graphData };
     const payload = generateKubernetesPayload(data);
@@ -496,8 +508,8 @@ export default function KubernetesProject(props: IProjectProps) {
             <CodeEditor
               data={formattedCode}
               language={language}
-              onChange={() => {
-                return;
+              onChange={(e: any) => {
+                onCodeUpdate(e);
               }}
               disabled={true}
               lineWrapping={false}

services/frontend/src/components/Projects/PreviewBlock.tsx

@@ -25,8 +25,14 @@ const PreviewBlock = (props: IPreviewBlockProps) => {
     setIsHovering(false);
   };
 
-  const handleClick = () => {
-    navigate(`/projects/${project.uuid}`);
+  const handleClick = (e: any) => {
+    if (project.project_type === 0) {
+      navigate(`/projects/docker-compose/${project.uuid}`);
+    }
+
+    if (project.project_type === 1) {
+      navigate(`/projects/kubernetes/${project.uuid}`);
+    }
   };
 
   const onDelete = (e: any) => {