AppState context add

2023-10-01 22:47:09 +02:00
parent 82db33d047
commit f9c35ceaa4
14 changed files with 406 additions and 220 deletions
--- a/pkgs/ui/src/components/background.tsx
+++ b/pkgs/ui/src/components/background.tsx
@@ -0,0 +1,51 @@
+import Image from "next/image";
+import clanLight from "../../public/clan-dark.png";
+import clanDark from "../../public/clan-dark.png";
+import { useAppState } from "./hooks/useAppContext";
+
+export default function Background() {
+  const { data, isLoading } = useAppState();
+
+  return (
+    <div
+      className={
+        "fixed -z-10 h-[100vh] w-[100vw] overflow-hidden opacity-10 blur-md dark:opacity-40"
+      }
+    >
+      {(isLoading || !data.isJoined) && (
+        <>
+          <Image
+            className="dark:hidden"
+            alt="clan"
+            src={clanLight}
+            placeholder="blur"
+            quality={100}
+            fill
+            sizes="100vw"
+            style={{
+              objectFit: "cover",
+            }}
+          />
+          <Image
+            className="hidden dark:block"
+            alt="clan"
+            src={clanDark}
+            placeholder="blur"
+            quality={100}
+            fill
+            sizes="100vw"
+            style={{
+              objectFit: "cover",
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+// position: fixed;
+// height: 100vh;
+// width: 100vw;
+// overflow: hidden;
+// z-index: -1;
--- a/pkgs/ui/src/components/flakeBadge/flakeBadge.tsx
+++ b/pkgs/ui/src/components/flakeBadge/flakeBadge.tsx
@@ -10,7 +10,10 @@ export const FlakeBadge = (props: FlakeBadgeProps) => (
    label={`${props.flakeUrl}#${props.flakeAttr}`}
    sx={{
      p: 2,
-      "& .MuiChip-label": {
+      "&.MuiChip-root": {
+        maxWidth: "unset",
+      },
+      "&.MuiChip-label": {
        overflow: "unset",
      },
    }}
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -0,0 +1,61 @@
+import { useListMachines } from "@/api/default/default";
+import { Machine, MachinesResponse } from "@/api/model";
+import { AxiosError, AxiosResponse } from "axios";
+import React, {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from "react";
+import { KeyedMutator } from "swr";
+
+type AppContextType = {
+  //   data: AxiosResponse<{}, any> | undefined;
+  data: AppState;
+
+  isLoading: boolean;
+  error: AxiosError<any> | undefined;
+
+  setAppState: Dispatch<SetStateAction<AppState>>;
+  mutate: KeyedMutator<AxiosResponse<MachinesResponse, any>>;
+  swrKey: string | false | Record<any, any>;
+};
+
+const initialState = {
+  isLoading: true,
+} as const;
+
+export const AppContext = createContext<AppContextType>({} as AppContextType);
+
+type AppState = {
+  isJoined?: boolean;
+  clanName?: string;
+};
+
+interface AppContextProviderProps {
+  children: ReactNode;
+}
+export const WithAppState = (props: AppContextProviderProps) => {
+  const { children } = props;
+  const { data: rawData, isLoading, error, mutate, swrKey } = useListMachines();
+
+  const [data, setAppState] = useState<AppState>({ isJoined: false });
+
+  return (
+    <AppContext.Provider
+      value={{
+        data,
+        setAppState,
+        isLoading,
+        error,
+        swrKey,
+        mutate,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useAppState = () => React.useContext(AppContext);
--- a/pkgs/ui/src/components/hooks/useVms.tsx
+++ b/pkgs/ui/src/components/hooks/useVms.tsx
@@ -33,7 +33,9 @@ export const useVms = (options: UseVmsOptions) => {
      } catch (e) {
        const err = e as AxiosError<HTTPValidationError>;
        setError(err);
-        toast.error(err.message);
+        toast(
+          "Could not find default configuration. Please select a machine preset",
+        );
        return undefined;
      } finally {
        setIsLoading(false);
--- a/pkgs/ui/src/components/join/configureVM.tsx
+++ b/pkgs/ui/src/components/join/configureVM.tsx
@@ -10,10 +10,15 @@ import {
 } from "@mui/material";
 import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
 import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import { createVm, useGetVmLogs } from "@/api/default/default";
+import {
+  createVm,
+  useGetVmLogs,
+  useInspectFlakeAttrs,
+} from "@/api/default/default";
 import { VmConfig } from "@/api/model";
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { useAppState } from "../hooks/useAppContext";

 interface VmPropLabelProps {
  children: React.ReactNode;
@@ -28,20 +33,26 @@ interface VmPropContentProps {
  children: React.ReactNode;
 }
 const VmPropContent = (props: VmPropContentProps) => (
-  <div className="col-span-4 font-bold sm:col-span-3">{props.children}</div>
+  <div className="col-span-4 sm:col-span-3">{props.children}</div>
 );

 interface VmDetailsProps {
-  vmConfig: VmConfig;
  formHooks: UseFormReturn<VmConfig, any, undefined>;
  setVmUuid: Dispatch<SetStateAction<string | null>>;
 }

 export const ConfigureVM = (props: VmDetailsProps) => {
-  const { vmConfig, formHooks, setVmUuid } = props;
-  const { control, handleSubmit } = formHooks;
-  const { cores, flake_attr, flake_url, graphics, memory_size } = vmConfig;
+  const { formHooks, setVmUuid } = props;
+  const { control, handleSubmit, watch, setValue } = formHooks;
  const [isStarting, setStarting] = useState(false);
+  const { setAppState } = useAppState();
+  const { isLoading, data } = useInspectFlakeAttrs({ url: watch("flake_url") });
+
+  useEffect(() => {
+    if (!isLoading && data?.data) {
+      setValue("flake_attr", data.data.flake_attrs[0] || "");
+    }
+  }, [isLoading, setValue, data]);

  const onSubmit: SubmitHandler<VmConfig> = async (data) => {
    setStarting(true);
@@ -53,6 +64,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
    setStarting(false);
    if (response.statusText === "OK") {
      toast.success(("Joined @ " + uuid) as string);
+      setAppState((s) => ({ ...s, isJoined: true }));
    } else {
      toast.error("Could not join");
    }
@@ -64,30 +76,40 @@ export const ConfigureVM = (props: VmDetailsProps) => {
      className="grid grid-cols-4 gap-y-10"
    >
      <div className="col-span-4">
-        <ListSubheader>General</ListSubheader>
+        <ListSubheader sx={{ bgcolor: "inherit" }}>General</ListSubheader>
      </div>
      <VmPropLabel>Flake</VmPropLabel>
      <VmPropContent>
-        <FlakeBadge flakeAttr={flake_attr} flakeUrl={flake_url} />
+        <FlakeBadge
+          flakeAttr={watch("flake_attr")}
+          flakeUrl={watch("flake_url")}
+        />
      </VmPropContent>
      <VmPropLabel>Machine</VmPropLabel>
      <VmPropContent>
-        <Controller
-          name="flake_attr"
-          control={control}
-          render={({ field }) => (
-            <Select {...field} variant="standard" fullWidth>
-              {["default", "vm1"].map((attr) => (
-                <MenuItem value={attr} key={attr}>
-                  {attr}
-                </MenuItem>
-              ))}
-            </Select>
-          )}
-        />
+        {!isLoading && (
+          <Controller
+            name="flake_attr"
+            control={control}
+            render={({ field }) => (
+              <Select
+                {...field}
+                variant="standard"
+                fullWidth
+                disabled={isLoading}
+              >
+                {data?.data.flake_attrs.map((attr) => (
+                  <MenuItem value={attr} key={attr}>
+                    {attr}
+                  </MenuItem>
+                ))}
+              </Select>
+            )}
+          />
+        )}
      </VmPropContent>
      <div className="col-span-4">
-        <ListSubheader>VM</ListSubheader>
+        <ListSubheader sx={{ bgcolor: "inherit" }}>VM</ListSubheader>
      </div>
      <VmPropLabel>CPU Cores</VmPropLabel>
      <VmPropContent>
@@ -103,7 +125,7 @@ export const ConfigureVM = (props: VmDetailsProps) => {
          name="graphics"
          control={control}
          render={({ field }) => (
-            <Switch {...field} defaultChecked={vmConfig.graphics} />
+            <Switch {...field} defaultChecked={watch("graphics")} />
          )}
        />
      </VmPropContent>
@@ -129,7 +151,12 @@ export const ConfigureVM = (props: VmDetailsProps) => {

      <div className="col-span-4 grid items-center">
        {isStarting && <LinearProgress />}
-        <Button type="submit" disabled={isStarting} variant="contained">
+        <Button
+          autoFocus
+          type="submit"
+          disabled={isStarting}
+          variant="contained"
+        >
          Join Clan
        </Button>
      </div>
--- a/pkgs/ui/src/components/join/confirm.tsx
+++ b/pkgs/ui/src/components/join/confirm.tsx
@@ -22,7 +22,7 @@ export const Confirm = (props: ConfirmProps) => {
  return userConfirmed ? (
    <ConfirmVM url={flakeUrl} handleBack={handleBack} />
  ) : (
-    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
+    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2 ">
      {isLoading && (
        <LoadingOverlay
          title={"Loading Flake"}
--- a/pkgs/ui/src/components/join/confirmVM.tsx
+++ b/pkgs/ui/src/components/join/confirmVM.tsx
@@ -26,10 +26,10 @@ export function ConfirmVM(props: ConfirmVMProps) {
  const formHooks = useForm<VmConfig>({
    defaultValues: {
      flake_url: url,
-      flake_attr: "vm1",
-      cores: 1,
+      flake_attr: "default",
+      cores: 4,
      graphics: true,
-      memory_size: 1024,
+      memory_size: 2048,
    },
  });
  const [vmUuid, setVmUuid] = useState<string | null>(null);
@@ -37,7 +37,6 @@ export function ConfirmVM(props: ConfirmVMProps) {
  const { setValue, watch, formState, handleSubmit } = formHooks;
  const { config, error, isLoading } = useVms({
    url,
-    // TODO: FIXME
    attr: watch("flake_attr"),
  });
  useEffect(() => {
@@ -52,12 +51,12 @@ export function ConfirmVM(props: ConfirmVMProps) {
    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
      {!formState.isSubmitted && (
        <>
-          {error && (
+          {/* {error && (
            <Alert severity="error" className="w-full max-w-2xl">
              <AlertTitle>Error</AlertTitle>
              An Error occurred - See details below
            </Alert>
-          )}
+          )} */}
          <div className="mb-2 w-full max-w-2xl">
            {isLoading && (
              <LoadingOverlay
@@ -65,14 +64,10 @@ export function ConfirmVM(props: ConfirmVMProps) {
                subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
              />
            )}
-            {config && (
-              <ConfigureVM
-                vmConfig={config}
-                formHooks={formHooks}
-                setVmUuid={setVmUuid}
-              />
-            )}
-            {error && (
+
+            <ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
+
+            {/* {error && (
              <>
                <Button
                  color="error"
@@ -93,7 +88,7 @@ export function ConfirmVM(props: ConfirmVMProps) {
                  }
                />
              </>
-            )}
+            )} */}
          </div>
        </>
      )}