Refactoring

packages/ui/components/Select.tsx

@@ -1,31 +1,57 @@
-import { FC } from "react";
-import { Select as InternalSelect } from "@mui/material";
+import { FC, useState, useEffect } from "react";
+import { Select as InternalSelect, MenuItem } from "@mui/material";
+
+export type SelectOption = {
+  value: string;
+  label: string;
+};
 
 type SelectProps = {
   name: string;
   label: string;
   formState: Record<string, any>;
-  children: React.ReactNode;
+  required?: boolean;
+  getOptions?: (formState: any) => Promise<SelectOption[]>;
 };
 
 export const Select: FC<SelectProps> = ({
   name,
   label,
   formState,
-  children,
-}) => (
-  <InternalSelect
-    fullWidth
-    name={name}
-    label={label}
-    variant="outlined"
-    size="small"
-    inputProps={{ id: name }}
-    defaultValue={formState.values[name] || ""}
-    sx={{
-      backgroundColor: "#fff",
-    }}
-  >
-    {children}
-  </InternalSelect>
-);
+  required = false,
+  getOptions,
+}) => {
+  const [options, setOptions] = useState([] as SelectOption[]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (getOptions) {
+        const opts = await getOptions(formState);
+        setOptions(opts);
+      }
+    };
+    fetchData();
+  }, [getOptions, formState]);
+
+  return (
+    <InternalSelect
+      fullWidth
+      name={name}
+      label={label}
+      variant="outlined"
+      required={required}
+      size="small"
+      inputProps={{ id: name }}
+      defaultValue={formState.values[name] || ""}
+      sx={{
+        backgroundColor: "#fff",
+      }}
+    >
+      {options.map((option: SelectOption) => (
+        <MenuItem key={option.value} value={option.value}>
+          {option.label}
+        </MenuItem>
+      ))}
+    </InternalSelect>
+  );
+};