Move aircraft form to separate module

web/app/routes/logbook.aircraft/route.tsx

@@ -1,4 +1,5 @@
 import ErrorDisplay from "@/ui/error-display";
+import AircraftForm from "@/ui/form/aircraft-form";
 import { useApi } from "@/util/api";
 import { AircraftFormSchema, AircraftSchema } from "@/util/types";
 import {
@@ -125,54 +126,9 @@ function NewAircraftModal({
   opened: boolean;
   close: () => void;
 }) {
-  const newForm = useForm<AircraftFormSchema>({
-    initialValues: {
-      tail_no: "",
-      make: "",
-      model: "",
-      aircraft_category: "",
-      aircraft_class: "",
-      hobbs: 0.0,
-    },
-    validate: {
-      tail_no: (value) =>
-        value === null || value.trim() === ""
-          ? "Please enter a tail number"
-          : null,
-      make: (value) =>
-        value === null || value.trim() === "" ? "Please enter a make" : null,
-      model: (value) =>
-        value === null || value.trim() === "" ? "Please enter a model" : null,
-      aircraft_category: (value) =>
-        value === null || value.trim() === ""
-          ? "Please select a category"
-          : null,
-      aircraft_class: (value) =>
-        value === null || value.trim() === "" ? "Please select a class" : null,
-    },
-  });
-
   const client = useApi();
   const queryClient = useQueryClient();
 
-  const categories = useQuery({
-    queryKey: ["categories"],
-    queryFn: async () =>
-      await client.get(`/aircraft/categories`).then((res) => res.data),
-  });
-
-  const [category, setCategory] = useState("");
-  const [classSelection, setClassSelection] = useState("");
-
-  const classes = useQuery({
-    queryKey: ["classes", category],
-    queryFn: async () =>
-      await client
-        .get(`/aircraft/class?category=${category}`)
-        .then((res) => res.data),
-    enabled: !!category,
-  });
-
   const addAircraft = useMutation({
     mutationFn: async (values: AircraftFormSchema) => {
       const newAircraft = values;
@@ -190,84 +146,13 @@ function NewAircraftModal({
 
   return (
     <Modal opened={opened} onClose={close} title="New Aircraft" centered>
-      <form onSubmit={newForm.onSubmit((values) => addAircraft.mutate(values))}>
-        <Container>
-          <Stack>
-            <TextInput
-              label="Tail Number"
-              withAsterisk
-              {...newForm.getInputProps("tail_no")}
-            />
-            <TextInput
-              label="Make"
-              {...newForm.getInputProps("make")}
-              withAsterisk
-            />
-            <TextInput
-              label="Model"
-              {...newForm.getInputProps("model")}
-              withAsterisk
-            />
-            <Select
-              {...newForm.getInputProps("aircraft_category")}
-              label="Category"
-              placeholder="Pick a value"
-              name="aircraft_category"
-              withAsterisk
-              data={
-                categories.isFetched && !categories.isError
-                  ? categories.data.categories
-                  : []
-              }
-              onChange={(_value, option) => {
-                setCategory(option.value);
-                setClassSelection("");
-                queryClient.invalidateQueries({
-                  queryKey: ["classes", option.value],
-                });
-                newForm.setFieldValue("aircraft_category", option.value);
-              }}
-            />
-            <Select
-              label="Class"
-              placeholder="Pick a value"
-              withAsterisk
-              data={
-                classes.isFetched && !classes.isError && classes.data
-                  ? classes.data.classes
-                  : []
-              }
-              value={classSelection}
-              {...newForm.getInputProps("aircraft_class")}
-            />
-            <NumberInput
-              label="Hobbs"
-              min={0.0}
-              suffix=" hrs"
-              decimalScale={1}
-              fixedDecimalScale
-              {...newForm.getInputProps("hobbs")}
-            />
-            <Group justify="flex-end">
-              {addAircraft.isError ? (
-                <Text c="red">
-                  {(addAircraft.error as AxiosError)?.response?.data?.detail ??
-                    "Error adding aircraft"}
-                </Text>
-              ) : addAircraft.isPending ? (
-                <Text c="yellow">Adding aircraft...</Text>
-              ) : null}
-              <Button
-                type="submit"
-                leftSection={<IconPencil />}
-                onClick={() => null}
-              >
-                Create
-              </Button>
-            </Group>
-          </Stack>
-        </Container>
-      </form>
+      <AircraftForm
+        onSubmit={addAircraft.mutate}
+        isError={addAircraft.isError}
+        error={addAircraft.error}
+        isPending={addAircraft.isPending}
+        submitButtonLabel="Add"
+      />
     </Modal>
   );
 }