From e5455f98fcc2c0a7e0ccdcc39d33bda494289dba Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Sat, 28 Oct 2023 18:31:39 +0200
Subject: [PATCH] fix frontend

---
 pkgs/ui/nix/pdefs.nix                         |  2 +-
 pkgs/ui/src/app/machines/layout.tsx           |  7 ++++-
 pkgs/ui/src/app/machines/page.tsx             |  5 +---
 .../createMachineForm/customConfig.tsx        | 11 +++++---
 .../components/createMachineForm/index.tsx    |  2 +-
 .../ui/src/components/hooks/useAppContext.tsx |  4 +--
 pkgs/ui/src/components/hooks/useDebounce.tsx  |  6 ++---
 pkgs/ui/src/components/hooks/useMachines.tsx  |  4 +--
 pkgs/ui/src/components/table/nodeTable.tsx    |  2 +-
 pkgs/ui/src/components/table/searchBar.tsx    | 12 ++++-----
 pkgs/ui/src/data/nodeData.tsx                 | 26 +++++++++++--------
 pkgs/ui/src/views/joinPrequel.tsx             |  7 ++---
 12 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/pkgs/ui/nix/pdefs.nix b/pkgs/ui/nix/pdefs.nix
index 9bae9397d..c7a2b7481 100644
--- a/pkgs/ui/nix/pdefs.nix
+++ b/pkgs/ui/nix/pdefs.nix
@@ -18438,4 +18438,4 @@
       };
     };
   };
-}
\ No newline at end of file
+}
diff --git a/pkgs/ui/src/app/machines/layout.tsx b/pkgs/ui/src/app/machines/layout.tsx
index eace0be37..e9db5e3fe 100644
--- a/pkgs/ui/src/app/machines/layout.tsx
+++ b/pkgs/ui/src/app/machines/layout.tsx
@@ -1,5 +1,10 @@
 import { MachineContextProvider } from "@/components/hooks/useMachines";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <MachineContextProvider>{children}</MachineContextProvider>;
+  return (
+    // TODO: select flake?
+    <MachineContextProvider flakeName="defaultFlake">
+      {children}
+    </MachineContextProvider>
+  );
 }
diff --git a/pkgs/ui/src/app/machines/page.tsx b/pkgs/ui/src/app/machines/page.tsx
index 9c89d605e..b1d7b4429 100644
--- a/pkgs/ui/src/app/machines/page.tsx
+++ b/pkgs/ui/src/app/machines/page.tsx
@@ -2,9 +2,6 @@
 
 import { NodeTable } from "@/components/table";
 
-
 export default function Page() {
-  return (
-    <NodeTable />
-  );
+  return <NodeTable />;
 }
diff --git a/pkgs/ui/src/components/createMachineForm/customConfig.tsx b/pkgs/ui/src/components/createMachineForm/customConfig.tsx
index acd9441d9..cc14a9537 100644
--- a/pkgs/ui/src/components/createMachineForm/customConfig.tsx
+++ b/pkgs/ui/src/components/createMachineForm/customConfig.tsx
@@ -33,7 +33,10 @@ interface PureCustomConfigProps extends FormStepContentProps {
 }
 export function CustomConfig(props: FormStepContentProps) {
   const { formHooks } = props;
-  const { data, isLoading, error } = useGetMachineSchema("mama");
+  const { data, isLoading, error } = useGetMachineSchema(
+    "defaultFlake",
+    "mama",
+  );
   // const { data, isLoading, error } = { data: {data:{schema: {
   //   title: 'Test form',
   //   type: 'object',
@@ -53,11 +56,11 @@ export function CustomConfig(props: FormStepContentProps) {
     return {};
   }, [data, isLoading, error]);
 
+  type ValueType = { default: any };
   const initialValues = useMemo(
     () =>
       Object.entries(schema?.properties || {}).reduce((acc, [key, value]) => {
-        /*@ts-ignore*/
-        const init: any = value?.default;
+        const init: any = (value as ValueType)?.default;
         if (init) {
           return {
             ...acc,
@@ -157,7 +160,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
         // ObjectFieldTemplate:
         ErrorListTemplate: ErrorList,
         ButtonTemplates: {
-          SubmitButton: (props) => (
+          SubmitButton: () => (
             <div className="flex w-full items-center justify-center">
               <Button
                 onClick={validate}
diff --git a/pkgs/ui/src/components/createMachineForm/index.tsx b/pkgs/ui/src/components/createMachineForm/index.tsx
index 7fbef8e2a..cf1515ff9 100644
--- a/pkgs/ui/src/components/createMachineForm/index.tsx
+++ b/pkgs/ui/src/components/createMachineForm/index.tsx
@@ -113,7 +113,7 @@ export function CreateMachineForm() {
         )}
         {!isMobile && (
           <Stepper activeStep={activeStep} color="secondary">
-            {steps.map(({ label }, index) => {
+            {steps.map(({ label }) => {
               const stepProps: { completed?: boolean } = {};
               const labelProps: {
                 optional?: React.ReactNode;
diff --git a/pkgs/ui/src/components/hooks/useAppContext.tsx b/pkgs/ui/src/components/hooks/useAppContext.tsx
index 6f221d6b9..f36376e20 100644
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@@ -2,10 +2,10 @@ import { useListMachines } from "@/api/default/default";
 import { MachinesResponse } from "@/api/model";
 import { AxiosError, AxiosResponse } from "axios";
 import React, {
-  createContext,
   Dispatch,
   ReactNode,
   SetStateAction,
+  createContext,
   useState,
 } from "react";
 import { KeyedMutator } from "swr";
@@ -38,7 +38,7 @@ interface AppContextProviderProps {
 }
 export const WithAppState = (props: AppContextProviderProps) => {
   const { children } = props;
-  const { isLoading, error, mutate, swrKey } = useListMachines();
+  const { isLoading, error, mutate, swrKey } = useListMachines("defaultFlake");
 
   const [data, setAppState] = useState<AppState>({ isJoined: false });
 
diff --git a/pkgs/ui/src/components/hooks/useDebounce.tsx b/pkgs/ui/src/components/hooks/useDebounce.tsx
index 59ecee161..8669d175a 100644
--- a/pkgs/ui/src/components/hooks/useDebounce.tsx
+++ b/pkgs/ui/src/components/hooks/useDebounce.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-export function useDebounce(value: any, delay: number) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
+export function useDebounce<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
     const handler = setTimeout(() => {
diff --git a/pkgs/ui/src/components/hooks/useMachines.tsx b/pkgs/ui/src/components/hooks/useMachines.tsx
index c4862bf1e..64f7aeb73 100644
--- a/pkgs/ui/src/components/hooks/useMachines.tsx
+++ b/pkgs/ui/src/components/hooks/useMachines.tsx
@@ -44,7 +44,6 @@ const initialState = {
   data: [],
 } as const;
 
-
 export function CreateMachineContext(flakeName: string) {
   return useMemo(() => {
     return createContext<MachineContextType>({
@@ -106,4 +105,5 @@ export const MachineContextProvider = (props: MachineContextProviderProps) => {
   );
 };
 
-export const useMachines = (flakeName: string) => React.useContext(CreateMachineContext(flakeName));
+export const useMachines = (flakeName: string) =>
+  React.useContext(CreateMachineContext(flakeName));
diff --git a/pkgs/ui/src/components/table/nodeTable.tsx b/pkgs/ui/src/components/table/nodeTable.tsx
index be7568afe..b51140f68 100644
--- a/pkgs/ui/src/components/table/nodeTable.tsx
+++ b/pkgs/ui/src/components/table/nodeTable.tsx
@@ -16,7 +16,7 @@ import { SearchBar } from "./searchBar";
 import { StickySpeedDial } from "./stickySpeedDial";
 
 export function NodeTable() {
-  const machines = useMachines();
+  const machines = useMachines("defaultFlake");
   const theme = useTheme();
   const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
 
diff --git a/pkgs/ui/src/components/table/searchBar.tsx b/pkgs/ui/src/components/table/searchBar.tsx
index 634b629b1..f9e3618ea 100644
--- a/pkgs/ui/src/components/table/searchBar.tsx
+++ b/pkgs/ui/src/components/table/searchBar.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { SetStateAction, Dispatch, useState, useEffect, useMemo } from "react";
-import IconButton from "@mui/material/IconButton";
-import SearchIcon from "@mui/icons-material/Search";
-import { useDebounce } from "../hooks/useDebounce";
-import { Autocomplete, InputAdornment, TextField } from "@mui/material";
 import { Machine } from "@/api/model/machine";
+import SearchIcon from "@mui/icons-material/Search";
+import { Autocomplete, InputAdornment, TextField } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import { useDebounce } from "../hooks/useDebounce";
 
 export interface SearchBarProps {
   tableData: readonly Machine[];
@@ -13,7 +13,7 @@ export interface SearchBarProps {
 }
 
 export function SearchBar(props: SearchBarProps) {
-  let { tableData, setFilteredList } = props;
+  const { tableData, setFilteredList } = props;
   const [search, setSearch] = useState<string>("");
   const debouncedSearch = useDebounce(search, 250);
   const [open, setOpen] = useState(false);
diff --git a/pkgs/ui/src/data/nodeData.tsx b/pkgs/ui/src/data/nodeData.tsx
index 729f338e5..cca490018 100644
--- a/pkgs/ui/src/data/nodeData.tsx
+++ b/pkgs/ui/src/data/nodeData.tsx
@@ -28,11 +28,11 @@ function createData(
   };
 }
 
-var nameNumber = 0;
+let nameNumber = 0;
 
 // A function to generate random names
 function getRandomName(): string {
-  let names = [
+  const names = [
     "Alice",
     "Bob",
     "Charlie",
@@ -53,7 +53,7 @@ function getRandomName(): string {
     "Wendy",
     "Zoe",
   ];
-  let index = Math.floor(Math.random() * names.length);
+  const index = Math.floor(Math.random() * names.length);
   return names[index] + nameNumber++;
 }
 
@@ -75,8 +75,12 @@ function getRandomName(): string {
 
 // A function to generate random status keys
 function getRandomStatus(): NodeStatusKeys {
-  let statusKeys = [NodeStatus.Online, NodeStatus.Offline, NodeStatus.Pending];
-  let index = Math.floor(Math.random() * statusKeys.length);
+  const statusKeys = [
+    NodeStatus.Online,
+    NodeStatus.Offline,
+    NodeStatus.Pending,
+  ];
+  const index = Math.floor(Math.random() * statusKeys.length);
   return statusKeys[index];
 }
 
@@ -85,8 +89,8 @@ function getRandomLastSeen(status: NodeStatusKeys): number {
   if (status === "online") {
     return 0;
   } else {
-    let min = 1; // One day ago
-    let max = 360; // One year ago
+    const min = 1; // One day ago
+    const max = 360; // One year ago
     return Math.floor(Math.random() * (max - min + 1) + min);
   }
 }
@@ -164,12 +168,12 @@ export const tableData = [
 
 // A function to execute the createData function with dummy data in a loop 100 times and return an array
 export function executeCreateData(): TableData[] {
-  let result: TableData[] = [];
+  const result: TableData[] = [];
   for (let i = 0; i < 100; i++) {
     // Generate dummy data
-    let name = getRandomName();
-    let status = getRandomStatus();
-    let last_seen = getRandomLastSeen(status);
+    const name = getRandomName();
+    const status = getRandomStatus();
+    const last_seen = getRandomLastSeen(status);
 
     // Call the createData function and push the result to the array
     result.push(createData(name, status, last_seen));
diff --git a/pkgs/ui/src/views/joinPrequel.tsx b/pkgs/ui/src/views/joinPrequel.tsx
index 4b87689bc..1beba84e9 100644
--- a/pkgs/ui/src/views/joinPrequel.tsx
+++ b/pkgs/ui/src/views/joinPrequel.tsx
@@ -16,15 +16,16 @@ export default function JoinPrequel() {
   const queryParams = useSearchParams();
   const flakeUrl = queryParams.get("flake") || "";
   const flakeAttr = queryParams.get("attr") || "default";
-  const { handleSubmit, control, formState, getValues, reset } =
-    useForm<FormValues>({ defaultValues: { flakeUrl: "" } });
+  const { control, formState, getValues, reset } = useForm<FormValues>({
+    defaultValues: { flakeUrl: "" },
+  });
 
   return (
     <Layout>
       <Suspense fallback="Loading">
         {!formState.isSubmitted && !flakeUrl && (
           <form
-            onSubmit={handleSubmit(() => {})}
+            // onSubmit={handleSubmit(() => {})}
             className="w-full max-w-2xl justify-self-center"
           >
             <Controller