Merge pull request 'feat/configure-modules' (#490) from feat/configure-modules into main

pkgs/ui/src/app/layout.tsx

@@ -53,7 +53,7 @@ export default function RootLayout({
         <title>Clan.lol</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Clan.lol - build your own network" />
-        <link rel="icon" href="public/favicon.ico" sizes="any" />
+        <link rel="icon" href="./favicon.ico" sizes="any" />
       </head>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>

pkgs/ui/src/components/createMachineForm/clanModules.tsx

@@ -1,6 +1,13 @@
 import { getMachineSchema } from "@/api/machine/machine";
 import { useListClanModules } from "@/api/modules/modules";
-import { Alert, AlertTitle, FormHelperText, Typography } from "@mui/material";
+import {
+  Alert,
+  AlertTitle,
+  Divider,
+  FormHelperText,
+  Input,
+  Typography,
+} from "@mui/material";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import FormControl from "@mui/material/FormControl";
@@ -8,7 +15,8 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { Controller } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { CreateMachineForm, FormStepContentProps } from "./interfaces";
 
@@ -23,26 +31,85 @@ const MenuProps = {
   },
 };
 
+// interface IupdateSchema {
+//   clanName: string;
+//   modules: string[];
+//   formHooks: FormHooks;
+//   setSchemaError: Dispatch<SetStateAction<null | string>>;
+// }
+
+// const updateSchema = ({
+//   clanName,
+//   modules,
+//   formHooks,
+//   setSchemaError,
+// }: IupdateSchema) => {
+//   formHooks.setValue("isSchemaLoading", true);
+//   getMachineSchema(clanName, {
+//     clanImports: modules,
+//   })
+//     .then((response) => {
+//       if (response.statusText == "OK") {
+//         formHooks.setValue("schema", response.data.schema);
+//         setSchemaError(null);
+//       }
+//     })
+//     .catch((error) => {
+//       formHooks.setValue("schema", {});
+//       console.error({ error });
+//       setSchemaError(error.message);
+//       toast.error(`${error.message}`);
+//     })
+//     .finally(() => {
+//       formHooks.setValue("isSchemaLoading", false);
+//     });
+// };
+
 type ClanModulesProps = FormStepContentProps;
 
+const SchemaSuccessMsg = () => (
+  <Alert severity="success">
+    <AlertTitle>Success</AlertTitle>
+    <Typography variant="subtitle2" sx={{ mt: 2 }}>
+      Machine configuration schema successfully created.
+    </Typography>
+  </Alert>
+);
+
+interface SchemaErrorMsgProps {
+  msg: string | null;
+}
+
+const SchemaErrorMsg = (props: SchemaErrorMsgProps) => (
+  <Alert severity="error">
+    <AlertTitle>Error</AlertTitle>
+    <Typography variant="subtitle1" sx={{ mt: 2 }}>
+      Machine configuration schema could not be created.
+    </Typography>
+    <Typography variant="subtitle2" sx={{ mt: 2 }}>
+      {props.msg}
+    </Typography>
+  </Alert>
+);
+
 export default function ClanModules(props: ClanModulesProps) {
   const { clanName, formHooks } = props;
   const { data, isLoading } = useListClanModules(clanName);
-
+  const [schemaError] = useState<string | null>(null);
   const selectedModules = formHooks.watch("modules");
-
   useEffect(() => {
     getMachineSchema(clanName, {
-      imports: [],
+      clanImports: [],
     }).then((response) => {
       if (response.statusText == "OK") {
         formHooks.setValue("schema", response.data.schema);
       }
     });
-    formHooks.setValue("modules", []);
+
     // Only re-run if global clanName has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clanName]);
+  const isSchemaLoading = formHooks.watch("isSchemaLoading");
 
   const handleChange = (
     event: SelectChangeEvent<CreateMachineForm["modules"]>,
@@ -53,7 +120,7 @@ export default function ClanModules(props: ClanModulesProps) {
     const newValue = typeof value === "string" ? value.split(",") : value;
     formHooks.setValue("modules", newValue);
     getMachineSchema(clanName, {
-      imports: newValue,
+      clanImports: newValue,
     })
       .then((response) => {
         if (response.statusText == "OK") {
@@ -66,8 +133,19 @@ export default function ClanModules(props: ClanModulesProps) {
         toast.error(`${error.message}`);
       });
   };
+
   return (
     <div className="my-4 flex w-full flex-col justify-center px-2">
+      <FormControl sx={{ my: 4 }} disabled={isLoading} required>
+        <InputLabel>Machine name</InputLabel>
+        <Controller
+          name="name"
+          control={formHooks.control}
+          render={({ field }) => <Input {...field} />}
+        />
+        <FormHelperText>Choose a unique name for the machine.</FormHelperText>
+      </FormControl>
+
       <Alert severity="info">
         <AlertTitle>Info</AlertTitle>
         Optionally select some modules —{" "}
@@ -106,6 +184,14 @@ export default function ClanModules(props: ClanModulesProps) {
           (Optional) Select clan modules to be added.
         </FormHelperText>
       </FormControl>
+
+      {!isSchemaLoading && <Divider flexItem sx={{ my: 4 }} />}
+      {!isSchemaLoading &&
+        (!schemaError ? (
+          <SchemaSuccessMsg />
+        ) : (
+          <SchemaErrorMsg msg={schemaError} />
+        ))}
     </div>
   );
 }

pkgs/ui/src/components/createMachineForm/customConfig.tsx

@@ -114,7 +114,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
       );
     } else {
       formHooks.clearErrors("config");
-      toast.success("Config seems valid");
+      toast.success("Configuration is valid");
     }
   };
 
@@ -139,7 +139,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
                 variant="outlined"
                 color="secondary"
               >
-                Validate
+                Validate configuration
               </Button>
             </div>
           ),

pkgs/ui/src/components/createMachineForm/index.tsx

@@ -1,6 +1,8 @@
+import { createMachine, setMachineConfig } from "@/api/machine/machine";
 import {
   Box,
   Button,
+  CircularProgress,
   LinearProgress,
   MobileStepper,
   Step,
@@ -11,6 +13,7 @@ import {
 } from "@mui/material";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
 import { useAppState } from "../hooks/useAppContext";
 import ClanModules from "./clanModules";
 import { CustomConfig } from "./customConfig";
@@ -22,22 +25,19 @@ export function CreateMachineForm() {
   } = useAppState();
   const formHooks = useForm<CreateMachineForm>({
     defaultValues: {
+      isSchemaLoading: false,
       name: "",
       config: {},
       modules: [],
     },
   });
-  const { handleSubmit, reset } = formHooks;
+
+  const { handleSubmit, watch } = formHooks;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const [activeStep, setActiveStep] = useState<number>(0);
 
   const steps: FormStep[] = [
-    {
-      id: "template",
-      label: "Template",
-      content: <div></div>,
-    },
     {
       id: "modules",
       label: "Modules",
@@ -56,11 +56,6 @@ export function CreateMachineForm() {
         <LinearProgress />
       ),
     },
-    {
-      id: "save",
-      label: "Save",
-      content: <div></div>,
-    },
   ];
 
   const handleNext = () => {
@@ -75,14 +70,23 @@ export function CreateMachineForm() {
     }
   };
 
-  const handleReset = () => {
-    setActiveStep(0);
-    reset();
-  };
   const currentStep = steps.at(activeStep);
 
-  async function onSubmit(data: any) {
+  async function onSubmit(data: CreateMachineForm) {
     console.log({ data }, "Aggregated Data; creating machine from");
+    if (clanName) {
+      if (!data.name) {
+        toast.error("Machine name should not be empty");
+        return;
+      }
+      await createMachine(clanName, {
+        name: data.name,
+      });
+      await setMachineConfig(clanName, data.name, {
+        clan: data.config.formData,
+        clanImports: data.modules,
+      });
+    }
   }
 
   const BackButton = () => (
@@ -102,17 +106,21 @@ export function CreateMachineForm() {
         <Button
           disabled={
             !formHooks.formState.isValid ||
-            (activeStep == 1 && !formHooks.watch("schema")?.type)
+            (activeStep == 0 && !watch("schema")?.type) ||
+            watch("isSchemaLoading")
           }
           onClick={handleNext}
           color="secondary"
+          startIcon={
+            watch("isSchemaLoading") ? <CircularProgress /> : undefined
+          }
         >
           {activeStep <= steps.length - 1 && "Next"}
         </Button>
       )}
       {activeStep === steps.length - 1 && (
-        <Button color="secondary" onClick={handleReset}>
+        <Button color="secondary" type="submit">
-          Reset
+          Save
         </Button>
       )}
     </>

pkgs/ui/src/components/createMachineForm/interfaces.ts

@@ -9,6 +9,7 @@ export type CreateMachineForm = {
   config: any;
   modules: string[];
   schema: JSONSchema7;
+  isSchemaLoading: boolean;
 };
 
 export type FormHooks = UseFormReturn<CreateMachineForm>;

pkgs/ui/src/components/hooks/useVms.tsx

@@ -1,5 +1,5 @@
-import { inspectVm } from "@/api/vm/vm";
 import { HTTPValidationError, VmConfig } from "@/api/model";
+import { inspectVm } from "@/api/vm/vm";
 import { AxiosError } from "axios";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";

pkgs/ui/src/components/join/configureVM.tsx

@@ -1,3 +1,5 @@
+import { useInspectFlakeAttrs } from "@/api/flake/flake";
+import { FormValues } from "@/views/joinPrequel";
 import {
   Button,
   InputAdornment,
@@ -8,14 +10,10 @@ import {
   Switch,
   TextField,
 } from "@mui/material";
-import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { useEffect } from "react";
-import { FlakeBadge } from "../flakeBadge/flakeBadge";
+import { Controller, UseFormReturn } from "react-hook-form";
-import { createVm } from "@/api/vm/vm";
-import { useInspectFlakeAttrs } from "@/api/flake/flake";
-import { VmConfig } from "@/api/model";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useAppState } from "../hooks/useAppContext";
+import { FlakeBadge } from "../flakeBadge/flakeBadge";
 
 interface VmPropLabelProps {
   children: React.ReactNode;
@@ -34,44 +32,41 @@ const VmPropContent = (props: VmPropContentProps) => (
 );
 
 interface VmDetailsProps {
-  formHooks: UseFormReturn<VmConfig, any, undefined>;
+  formHooks: UseFormReturn<FormValues, any, undefined>;
-  setVmUuid: Dispatch<SetStateAction<string | null>>;
 }
 
+type ClanError = {
+  detail: {
+    msg: string;
+    loc: [];
+  }[];
+};
+
 export const ConfigureVM = (props: VmDetailsProps) => {
-  const { formHooks, setVmUuid } = props;
+  const { formHooks } = props;
-  const { control, handleSubmit, watch, setValue } = formHooks;
+  const { control, watch, setValue, formState } = formHooks;
-  const [isStarting, setStarting] = useState(false);
+
-  const { setAppState } = useAppState();
+  const { isLoading, data, error } = useInspectFlakeAttrs({
-  const { isLoading, data } = useInspectFlakeAttrs({ url: watch("flake_url") });
+    url: watch("flakeUrl"),
+  });
 
   useEffect(() => {
     if (!isLoading && data?.data) {
       setValue("flake_attr", data.data.flake_attrs[0] || "");
     }
   }, [isLoading, setValue, data]);
+  if (error) {
+    const msg =
+      (error?.response?.data as unknown as ClanError)?.detail?.[0]?.msg ||
+      error.message;
 
-  const onSubmit: SubmitHandler<VmConfig> = async (data) => {
+    toast.error(msg, {
-    setStarting(true);
+      id: error.name,
-    console.log(data);
+    });
-    const response = await createVm(data);
+    return <div>{msg}</div>;
-    const { uuid } = response?.data || null;
-
-    setVmUuid(() => uuid);
-    setStarting(false);
-    if (response.statusText === "OK") {
-      toast.success(("Joined @ " + uuid) as string);
-      setAppState((s) => ({ ...s, isJoined: true }));
-    } else {
-      toast.error("Could not join");
   }
-  };
-
   return (
-    <form
+    <div className="grid grid-cols-4 gap-y-10">
-      onSubmit={handleSubmit(onSubmit)}
-      className="grid grid-cols-4 gap-y-10"
-    >
       <div className="col-span-4">
         <ListSubheader sx={{ bgcolor: "inherit" }}>General</ListSubheader>
       </div>
@@ -79,7 +74,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
       <VmPropContent>
         <FlakeBadge
           flakeAttr={watch("flake_attr")}
-          flakeUrl={watch("flake_url")}
+          flakeUrl={watch("flakeUrl")}
         />
       </VmPropContent>
       <VmPropLabel>Machine</VmPropLabel>
@@ -88,6 +83,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
           <Controller
             name="flake_attr"
             control={control}
+            defaultValue={data?.data.flake_attrs?.[0]}
             render={({ field }) => (
               <Select
                 {...field}
@@ -96,9 +92,6 @@ export const ConfigureVM = (props: VmDetailsProps) => {
                 fullWidth
                 disabled={isLoading}
               >
-                {!data?.data.flake_attrs.includes("default") && (
-                  <MenuItem value={"default"}>default</MenuItem>
-                )}
                 {data?.data.flake_attrs.map((attr) => (
                   <MenuItem value={attr} key={attr}>
                     {attr}
@@ -151,16 +144,16 @@ export const ConfigureVM = (props: VmDetailsProps) => {
       </VmPropContent>
 
       <div className="col-span-4 grid items-center">
-        {isStarting && <LinearProgress />}
+        {formState.isSubmitting && <LinearProgress />}
         <Button
           autoFocus
           type="submit"
-          disabled={isStarting}
+          disabled={formState.isSubmitting}
           variant="contained"
         >
           Join Clan
         </Button>
       </div>
-    </form>
+    </div>
   );
 };

pkgs/ui/src/components/join/confirmVM.tsx

@@ -1,12 +1,11 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { VmConfig } from "@/api/model";
 import { useVms } from "@/components/hooks/useVms";
+import { useEffect } from "react";
 
-import { LoadingOverlay } from "./loadingOverlay";
+import { FormValues } from "@/views/joinPrequel";
-import { useForm } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import { ConfigureVM } from "./configureVM";
-import { VmBuildLogs } from "./vmBuildLogs";
+import { LoadingOverlay } from "./loadingOverlay";
 
 interface ConfirmVMProps {
   url: string;
@@ -15,22 +14,16 @@ interface ConfirmVMProps {
 }
 
 export function ConfirmVM(props: ConfirmVMProps) {
-  const { url, defaultFlakeAttr } = props;
+  const formHooks = useFormContext<FormValues>();
-  const formHooks = useForm<VmConfig>({
+
-    defaultValues: {
+  const { setValue, watch } = formHooks;
-      flake_url: url,
+
-      flake_attr: defaultFlakeAttr,
+  const url = watch("flakeUrl");
-      cores: 4,
+  const attr = watch("flake_attr");
-      graphics: true,
-      memory_size: 2048,
-    },
-  });
-  const [vmUuid, setVmUuid] = useState<string | null>(null);
 
-  const { setValue, watch, formState } = formHooks;
   const { config, isLoading } = useVms({
     url,
-    attr: watch("flake_attr") || defaultFlakeAttr,
+    attr,
   });
 
   useEffect(() => {
@@ -43,19 +36,13 @@ export function ConfirmVM(props: ConfirmVMProps) {
 
   return (
     <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
-      {!formState.isSubmitted && (
-        <>
       <div className="mb-2 w-full max-w-2xl">
         {isLoading && (
           <LoadingOverlay title={"Loading VM Configuration"} subtitle="" />
         )}
 
-            <ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
+        <ConfigureVM formHooks={formHooks} />
       </div>
-        </>
-      )}
-
-      {formState.isSubmitted && vmUuid && <VmBuildLogs vmUuid={vmUuid} />}
     </div>
   );
 }

pkgs/ui/src/components/join/layout.tsx

@@ -1,19 +1,14 @@
 "use client";
-import { Typography } from "@mui/material";
 import { ReactNode } from "react";
 
 interface LayoutProps {
   children: ReactNode;
+  header: ReactNode;
 }
 export const Layout = (props: LayoutProps) => {
   return (
     <div className="grid h-[70vh] w-full grid-cols-1 justify-center gap-y-4">
-      <Typography variant="h4" className="w-full text-center">
+      {props.header}
-        Join{" "}
-        <Typography variant="h4" className="font-bold" component={"span"}>
-          Clan.lol
-        </Typography>
-      </Typography>
       {props.children}
     </div>
   );

pkgs/ui/src/components/join/log.tsx

@@ -1,12 +1,21 @@
 "use client";
+
+import { Button } from "@mui/material";
+
 interface LogOptions {
   lines: string[];
   title?: string;
+  handleClose?: () => void;
 }
 export const Log = (props: LogOptions) => {
-  const { lines, title } = props;
+  const { lines, title, handleClose } = props;
   return (
     <div className="max-h-[70vh] min-h-[9rem] w-full overflow-scroll bg-neutral-20 p-4 text-white shadow-inner shadow-black">
+      {handleClose && (
+        <Button onClick={handleClose} sx={{ float: "right" }}>
+          Close
+        </Button>
+      )}
       <div className="mb-1 text-neutral-70">{title}</div>
       <pre className="max-w-[90vw] text-xs">
         {lines.map((item, idx) => (

pkgs/ui/src/components/join/vmBuildLogs.tsx

@@ -1,29 +1,63 @@
 "use client";
-import { useGetVmLogs } from "@/api/vm/vm";
+
+import { getGetVmLogsKey } from "@/api/vm/vm";
+import axios from "axios";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { Log } from "./log";
-import { LoadingOverlay } from "./loadingOverlay";
 
 interface VmBuildLogsProps {
   vmUuid: string;
+  handleClose: () => void;
 }
-export const VmBuildLogs = (props: VmBuildLogsProps) => {
-  const { vmUuid } = props;
 
-  const { data: logs, isLoading } = useGetVmLogs(vmUuid as string, {
+const streamLogs = async (
-    swr: {
+  uuid: string,
-      enabled: vmUuid !== null,
+  setter: Dispatch<SetStateAction<string>>,
-    },
+  onFinish: () => void,
-    axios: {
+) => {
-      responseType: "stream",
+  const apiPath = getGetVmLogsKey(uuid);
-    },
+  const baseUrl = axios.defaults.baseURL;
-  });
+
+  const response = await fetch(`${baseUrl}${apiPath}`);
+  const reader = response?.body?.getReader();
+  if (!reader) {
+    console.log("could not get reader");
+  }
+  while (true) {
+    const stream = await reader?.read();
+    if (!stream || stream.done) {
+      console.log("stream done");
+      onFinish();
+      break;
+    }
+
+    const text = new TextDecoder().decode(stream.value);
+    setter((s) => `${s}${text}`);
+    console.log("Received", stream.value);
+    console.log("String:", text);
+  }
+};
+
+export const VmBuildLogs = (props: VmBuildLogsProps) => {
+  const { vmUuid, handleClose } = props;
+  const [logs, setLogs] = useState<string>("");
+  const [done, setDone] = useState<boolean>(false);
+
+  // Reset the logs if uuid changes
+  useEffect(() => {
+    setLogs("");
+    setDone(false);
+  }, [vmUuid]);
+
+  !done && streamLogs(vmUuid, setLogs, () => setDone(true));
 
   return (
     <div className="w-full">
-      {isLoading && <LoadingOverlay title="Initializing" subtitle="" />}
+      {/* {isLoading && <LoadingOverlay title="Initializing" subtitle="" />} */}
       <Log
-        lines={(logs?.data as string)?.split("\n") || ["..."]}
+        lines={logs?.split("\n") || ["..."]}
         title="Building..."
+        handleClose={handleClose}
       />
     </div>
   );

pkgs/ui/src/views/createForm.tsx

@@ -0,0 +1,56 @@
+import { Input, InputAdornment, LinearProgress } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+
+interface CreateFormProps {
+  confirmAdornment?: React.ReactNode;
+}
+
+export const CreateForm = (props: CreateFormProps) => {
+  const { confirmAdornment } = props;
+  const {
+    control,
+    formState: { isSubmitting },
+  } = useFormContext();
+  return (
+    <div>
+      <Controller
+        name="flakeUrl"
+        control={control}
+        render={({ field }) => (
+          <Input
+            disableUnderline
+            placeholder="url"
+            color="secondary"
+            aria-required="true"
+            {...field}
+            required
+            fullWidth
+            startAdornment={
+              <InputAdornment position="start">Clan</InputAdornment>
+            }
+          />
+        )}
+      />
+      <Controller
+        name="dest"
+        control={control}
+        render={({ field }) => (
+          <Input
+            sx={{ my: 2 }}
+            placeholder="Location"
+            color="secondary"
+            aria-required="true"
+            {...field}
+            required
+            fullWidth
+            startAdornment={
+              <InputAdornment position="start">Name</InputAdornment>
+            }
+            endAdornment={confirmAdornment}
+          />
+        )}
+      />
+      {isSubmitting && <LinearProgress />}
+    </div>
+  );
+};

pkgs/ui/src/views/joinForm.tsx

@@ -0,0 +1,51 @@
+import { Confirm } from "@/components/join/confirm";
+import { Input, InputAdornment } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+
+interface JoinFormProps {
+  confirmAdornment?: React.ReactNode;
+  initialParams: {
+    flakeUrl: string;
+    flakeAttr: string;
+  };
+}
+export const JoinForm = (props: JoinFormProps) => {
+  const { initialParams, confirmAdornment } = props;
+  const { control, formState, reset, getValues, watch } = useFormContext();
+
+  return (
+    <div>
+      {watch("flakeUrl") || initialParams.flakeUrl ? (
+        <Confirm
+          handleBack={() => reset()}
+          flakeUrl={
+            formState.isSubmitted
+              ? getValues("flakeUrl")
+              : initialParams.flakeUrl
+          }
+          flakeAttr={initialParams.flakeAttr}
+        />
+      ) : (
+        <Controller
+          name="flakeUrl"
+          control={control}
+          render={({ field }) => (
+            <Input
+              disableUnderline
+              placeholder="url"
+              color="secondary"
+              aria-required="true"
+              {...field}
+              required
+              fullWidth
+              startAdornment={
+                <InputAdornment position="start">Clan</InputAdornment>
+              }
+              endAdornment={confirmAdornment}
+            />
+          )}
+        />
+      )}
+    </div>
+  );
+};

pkgs/ui/src/views/joinPrequel.tsx

@@ -1,23 +1,28 @@
 "use client";
 import {
   IconButton,
-  Input,
   InputAdornment,
-  LinearProgress,
   MenuItem,
   Select,
+  Typography,
 } from "@mui/material";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 
 import { createFlake } from "@/api/flake/flake";
+import { VmConfig } from "@/api/model";
+import { createVm } from "@/api/vm/vm";
 import { useAppState } from "@/components/hooks/useAppContext";
-import { Confirm } from "@/components/join/confirm";
 import { Layout } from "@/components/join/layout";
+import { VmBuildLogs } from "@/components/join/vmBuildLogs";
 import { ChevronRight } from "@mui/icons-material";
-import { Controller, useForm } from "react-hook-form";
+import { AxiosError } from "axios";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { CreateForm } from "./createForm";
+import { JoinForm } from "./joinForm";
 
-type FormValues = {
+export type FormValues = VmConfig & {
   workflow: "join" | "create";
   flakeUrl: string;
   dest?: string;
@@ -27,14 +32,26 @@ export default function JoinPrequel() {
   const queryParams = useSearchParams();
   const flakeUrl = queryParams.get("flake") || "";
   const flakeAttr = queryParams.get("attr") || "default";
-  const [, setForkInProgress] = useState(false);
+  const initialParams = { flakeUrl, flakeAttr };
+
   const { setAppState } = useAppState();
 
-  const { control, formState, getValues, reset, watch, handleSubmit } =
+  const methods = useForm<FormValues>({
-    useForm<FormValues>({
+    defaultValues: {
-      defaultValues: { flakeUrl: "", dest: undefined, workflow: "join" },
+      flakeUrl: "",
+      dest: undefined,
+      workflow: "join",
+      cores: 4,
+      graphics: true,
+      memory_size: 2048,
+    },
   });
 
+  const { control, watch, handleSubmit } = methods;
+
+  const [vmUuid, setVmUuid] = useState<string | null>(null);
+  const [showLogs, setShowLogs] = useState<boolean>(false);
+
   const workflow = watch("workflow");
 
   const WorkflowAdornment = (
@@ -54,88 +71,85 @@ export default function JoinPrequel() {
           </Select>
         )}
       />
-      <IconButton type="submit">
+      <IconButton type={"submit"}>
         <ChevronRight />
       </IconButton>
     </InputAdornment>
   );
   return (
-    <Layout>
+    <Layout
+      header={
+        <Typography
+          variant="h4"
+          className="w-full text-center"
+          sx={{ textTransform: "capitalize" }}
+        >
+          {workflow}{" "}
+          <Typography variant="h4" className="font-bold" component={"span"}>
+            Clan.lol
+          </Typography>
+        </Typography>
+      }
+    >
       <Suspense fallback="Loading">
-        {!formState.isSubmitted && !flakeUrl && (
+        {vmUuid && showLogs ? (
+          <VmBuildLogs vmUuid={vmUuid} handleClose={() => setShowLogs(false)} />
+        ) : (
+          <FormProvider {...methods}>
             <form
-            onSubmit={handleSubmit((values) => {
+              onSubmit={handleSubmit(async (values) => {
-              console.log("submitted", { values });
                 if (workflow === "create") {
-                setForkInProgress(true);
+                  try {
-                createFlake({
+                    await createFlake({
                       flake_name: values.dest || "default",
                       url: values.flakeUrl,
-                }).then(() => {
-                  setForkInProgress(false);
-                  setAppState((s) => ({ ...s, isJoined: true }));
                     });
+                    setAppState((s) => ({ ...s, isJoined: true }));
+                  } catch (error) {
+                    toast.error(
+                      `Error: ${(error as AxiosError).message || ""}`,
+                    );
+                  }
+                }
+                if (workflow === "join") {
+                  console.log("JOINING");
+                  console.log(values);
+                  try {
+                    const response = await createVm({
+                      cores: values.cores,
+                      flake_attr: values.flake_attr,
+                      flake_url: values.flakeUrl,
+                      graphics: values.graphics,
+                      memory_size: values.memory_size,
+                    });
+                    const { uuid } = response?.data || null;
+                    setShowLogs(true);
+                    setVmUuid(() => uuid);
+                    if (response.statusText === "OK") {
+                      toast.success(("Joined @ " + uuid) as string);
+                    } else {
+                      toast.error("Could not join");
+                    }
+                  } catch (error) {
+                    toast.error(
+                      `Error: ${(error as AxiosError).message || ""}`,
+                    );
+                  }
                 }
               })}
               className="w-full max-w-2xl justify-self-center"
             >
-            <Controller
+              {workflow == "join" && (
-              name="flakeUrl"
+                <JoinForm
-              control={control}
+                  initialParams={initialParams}
-              render={({ field }) => (
+                  confirmAdornment={WorkflowAdornment}
-                <Input
-                  disableUnderline
-                  placeholder="url"
-                  color="secondary"
-                  aria-required="true"
-                  {...field}
-                  required
-                  fullWidth
-                  startAdornment={
-                    <InputAdornment position="start">Clan</InputAdornment>
-                  }
-                  endAdornment={
-                    workflow == "join" ? WorkflowAdornment : undefined
-                  }
                 />
               )}
-            />
+              {workflow == "create" && (
-            {workflow === "create" && (
+                <CreateForm confirmAdornment={WorkflowAdornment} />
-              <Controller
-                name="dest"
-                control={control}
-                render={({ field }) => (
-                  <Input
-                    sx={{ my: 2 }}
-                    placeholder="Location"
-                    color="secondary"
-                    aria-required="true"
-                    {...field}
-                    required
-                    fullWidth
-                    startAdornment={
-                      <InputAdornment position="start">Name</InputAdornment>
-                    }
-                    endAdornment={
-                      workflow == "create" ? WorkflowAdornment : undefined
-                    }
-                  />
-                )}
-              />
               )}
             </form>
-        )}
+          </FormProvider>
-        {formState.isSubmitted && workflow == "create" && (
-          <div>
-            <LinearProgress />
-          </div>
-        )}
-        {(formState.isSubmitted || flakeUrl) && workflow == "join" && (
-          <Confirm
-            handleBack={() => reset()}
-            flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
-            flakeAttr={flakeAttr}
-          />
         )}
       </Suspense>
     </Layout>