From dcb6ce3c2abed4fd6fbff82a0646d5b7b93d127e Mon Sep 17 00:00:00 2001
From: april <aprl.petersen@gmail.com>
Date: Fri, 5 Jan 2024 15:05:01 -0600
Subject: [PATCH] Move flight creation form to separate file

---
 web/app/routes/logbook.flights.$id/route.tsx |   1 -
 web/app/routes/logbook.flights.new/route.tsx | 328 +------------------
 web/app/ui/form/flight-form.tsx              | 298 +++++++++++++++++
 3 files changed, 305 insertions(+), 322 deletions(-)
 create mode 100644 web/app/ui/form/flight-form.tsx

diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx
index 539fe76..d6961e9 100644
--- a/web/app/routes/logbook.flights.$id/route.tsx
+++ b/web/app/routes/logbook.flights.$id/route.tsx
@@ -17,7 +17,6 @@ import {
   Button,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { modals } from "@mantine/modals";
 import { useNavigate, useParams } from "@remix-run/react";
 import { IconPencil, IconTrash } from "@tabler/icons-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
diff --git a/web/app/routes/logbook.flights.new/route.tsx b/web/app/routes/logbook.flights.new/route.tsx
index 452c829..18531f0 100644
--- a/web/app/routes/logbook.flights.new/route.tsx
+++ b/web/app/routes/logbook.flights.new/route.tsx
@@ -1,82 +1,12 @@
-import {
-  Button,
-  CloseButton,
-  Container,
-  Fieldset,
-  Group,
-  NumberInput,
-  ScrollArea,
-  Stack,
-  Text,
-  TextInput,
-  Textarea,
-  Title,
-} from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { DatePickerInput } from "@mantine/dates";
-import dayjs from "dayjs";
-import { IconPencil } from "@tabler/icons-react";
-import TimeInput from "@/ui/form/time-input";
+import { Container, Stack, Title } from "@mantine/core";
 import { FlightFormSchema, flightCreateHelper } from "@/util/types";
-import { HourInput, ZeroHourInput } from "@/ui/form/hour-input";
-import { ZeroIntInput } from "@/ui/form/int-input";
-import ListInput from "@/ui/form/list-input";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useApi } from "@/util/api";
 import { useNavigate } from "@remix-run/react";
 import { AxiosError } from "axios";
+import FlightForm from "@/ui/form/flight-form";
 
 export default function NewFlight() {
-  const form = useForm<FlightFormSchema>({
-    initialValues: {
-      date: dayjs(),
-      aircraft: "",
-      waypoint_from: "",
-      waypoint_to: "",
-      route: "",
-
-      hobbs_start: null,
-      hobbs_end: null,
-      tach_start: null,
-      tach_end: null,
-
-      time_start: null,
-      time_off: null,
-      time_down: null,
-      time_stop: null,
-
-      time_total: 0.0,
-      time_pic: 0.0,
-      time_sic: 0.0,
-      time_night: 0.0,
-      time_solo: 0.0,
-
-      time_xc: 0.0,
-      dist_xc: 0.0,
-
-      takeoffs_day: 0,
-      landings_day: 0,
-      takeoffs_night: 0,
-      landings_night: 0,
-
-      time_instrument: 0.0,
-      time_sim_instrument: 0.0,
-      holds_instrument: 0,
-
-      dual_given: 0.0,
-      dual_recvd: 0.0,
-      time_sim: 0.0,
-      time_ground: 0.0,
-
-      tags: [],
-
-      pax: [],
-      crew: [],
-
-      comments: "",
-    },
-  });
-
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -105,255 +35,11 @@ export default function NewFlight() {
       <Stack>
         <Title order={2}>New Flight</Title>
 
-        <form onSubmit={form.onSubmit((values) => createFlight.mutate(values))}>
-          <ScrollArea.Autosize mah="calc(100vh - 95px - 110px)">
-            <Container>
-              {/* Date and Aircraft */}
-
-              <Fieldset>
-                <Group justify="center" grow>
-                  <DatePickerInput
-                    label="Date"
-                    {...form.getInputProps("date")}
-                  />
-                  <TextInput
-                    label="Aircraft"
-                    {...form.getInputProps("aircraft")}
-                  />
-                </Group>
-              </Fieldset>
-
-              {/* Route */}
-
-              <Fieldset legend="Route" mt="lg">
-                <Group justify="center" grow>
-                  <TextInput
-                    label="Waypoint From"
-                    {...form.getInputProps("waypoint_from")}
-                  />
-                  <TextInput
-                    label="Waypoint To"
-                    {...form.getInputProps("waypoint_to")}
-                  />
-                </Group>
-                <TextInput
-                  label="Route"
-                  {...form.getInputProps("route")}
-                  mt="md"
-                />
-              </Fieldset>
-
-              {/* Times */}
-
-              <Fieldset legend="Times" mt="md">
-                <Group justify="center" grow>
-                  <HourInput
-                    form={form}
-                    field="hobbs_start"
-                    label="Hobbs Start"
-                  />
-                  <HourInput form={form} field="hobbs_end" label="Hobbs End" />
-                </Group>
-                <Group justify="center" grow mt="md">
-                  <HourInput
-                    form={form}
-                    field="tach_start"
-                    label="Tach Start"
-                  />
-                  <HourInput form={form} field="tach_end" label="Tach End" />
-                </Group>
-              </Fieldset>
-
-              {/* Start/Stop */}
-
-              <Fieldset legend="Start/Stop" mt="md">
-                <Group justify="center" grow>
-                  <TimeInput
-                    form={form}
-                    field="time_start"
-                    label="Start Time"
-                  />
-                  <TimeInput form={form} field="time_off" label="Time Off" />
-                </Group>
-                <Group justify="center" grow mt="md">
-                  <TimeInput form={form} field="time_down" label="Time Down" />
-                  <TimeInput form={form} field="time_stop" label="Stop Time" />
-                </Group>
-              </Fieldset>
-
-              {/* Hours */}
-
-              <Fieldset legend="Hours" mt="md">
-                <Group justify="center" grow>
-                  <ZeroHourInput
-                    form={form}
-                    field="time_total"
-                    label="Time Total"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="time_pic"
-                    label="Time PIC"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="time_sic"
-                    label="Time SIC"
-                  />
-                </Group>
-                <Group justify="center" grow mt="md">
-                  <ZeroHourInput
-                    form={form}
-                    field="time_night"
-                    label="Time Night"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="time_solo"
-                    label="Time Solo"
-                  />
-                </Group>
-              </Fieldset>
-
-              {/* Cross-Country */}
-
-              <Fieldset legend="Cross-Country" mt="md">
-                <Group justify="center" grow>
-                  <ZeroHourInput
-                    form={form}
-                    field="time_xc"
-                    label="Time Cross-Country"
-                  />
-                  <NumberInput
-                    label="Distance Cross-Country"
-                    decimalScale={1}
-                    min={0}
-                    fixedDecimalScale
-                    leftSection={
-                      <CloseButton
-                        aria-label="Clear input"
-                        onClick={() => form.setFieldValue("dist_xc", 0)}
-                        style={{
-                          display:
-                            form.getTransformedValues().dist_xc == 0
-                              ? "none"
-                              : undefined,
-                        }}
-                      />
-                    }
-                    {...form.getInputProps("dist_xc")}
-                  />
-                </Group>
-              </Fieldset>
-
-              {/* Takeoffs and Landings */}
-
-              <Fieldset legend="Takeoffs and Landings" mt="md">
-                <Group justify="center" grow>
-                  <ZeroIntInput
-                    form={form}
-                    field="takeoffs_day"
-                    label="Day Takeoffs"
-                  />
-                  <ZeroIntInput
-                    form={form}
-                    field="landings_day"
-                    label="Day Landings"
-                  />
-                </Group>
-                <Group justify="center" grow mt="md">
-                  <ZeroIntInput
-                    form={form}
-                    field="takeoffs_night"
-                    label="Night Takeoffs"
-                  />
-                  <ZeroIntInput
-                    form={form}
-                    field="landings_night"
-                    label="Night Landings"
-                  />
-                </Group>
-              </Fieldset>
-
-              {/* Instrument */}
-
-              <Fieldset legend="Instrument" mt="md">
-                <Group justify="center" grow>
-                  <ZeroHourInput
-                    form={form}
-                    field="time_instrument"
-                    label="Time Instrument"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="time_sim_instrument"
-                    label="Time Sim Instrument"
-                  />
-                  <ZeroIntInput
-                    form={form}
-                    field="holds_instrument"
-                    label="Instrument Holds"
-                  />
-                </Group>
-              </Fieldset>
-
-              {/* Instruction */}
-
-              <Fieldset legend="Instruction" mt="md">
-                <Group justify="center" grow>
-                  <ZeroHourInput
-                    form={form}
-                    field="dual_given"
-                    label="Dual Given"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="dual_recvd"
-                    label="Dual Received"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="time_sim"
-                    label="Sim Time"
-                  />
-                  <ZeroHourInput
-                    form={form}
-                    field="time_ground"
-                    label="Ground Time"
-                  />
-                </Group>
-              </Fieldset>
-
-              {/* About the Flight */}
-
-              <Fieldset legend="About" mt="md">
-                <ListInput form={form} field="tags" label="Tags" />
-                <Group justify="center" grow mt="md">
-                  <ListInput form={form} field="pax" label="Pax" />
-                  <ListInput form={form} field="crew" label="Crew" />
-                </Group>
-                <Textarea
-                  label="Comments"
-                  mt="md"
-                  autosize
-                  minRows={4}
-                  {...form.getInputProps("comments")}
-                />
-              </Fieldset>
-            </Container>
-          </ScrollArea.Autosize>
-
-          <Group justify="flex-end" mt="md">
-            {createFlight.isError ? (
-              <Text c="red" fw={700}>
-                {createFlight.error.message}
-              </Text>
-            ) : null}
-            <Button type="submit" leftSection={<IconPencil />}>
-              Create
-            </Button>
-          </Group>
-        </form>
+        <FlightForm
+          onSubmit={createFlight.mutate}
+          isError={createFlight.isError}
+          error={createFlight.error}
+        />
       </Stack>
     </Container>
   );
diff --git a/web/app/ui/form/flight-form.tsx b/web/app/ui/form/flight-form.tsx
new file mode 100644
index 0000000..253cc12
--- /dev/null
+++ b/web/app/ui/form/flight-form.tsx
@@ -0,0 +1,298 @@
+import { FlightFormSchema } from "@/util/types";
+import {
+  Button,
+  CloseButton,
+  Container,
+  Fieldset,
+  Group,
+  NumberInput,
+  ScrollArea,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
+import { useForm } from "@mantine/form";
+import dayjs from "dayjs";
+import { HourInput, ZeroHourInput } from "./hour-input";
+import TimeInput from "./time-input";
+import { ZeroIntInput } from "./int-input";
+import ListInput from "./list-input";
+import { IconPencil } from "@tabler/icons-react";
+import { AxiosError } from "axios";
+
+export default function FlightForm({
+  onSubmit,
+  isError,
+  error,
+  initialValues,
+}: {
+  onSubmit: (values: FlightFormSchema) => void;
+  isError: boolean;
+  error: AxiosError | null;
+  initialValues?: FlightFormSchema;
+}) {
+  const form = useForm<FlightFormSchema>({
+    initialValues: initialValues ?? {
+      date: dayjs(),
+      aircraft: "",
+      waypoint_from: "",
+      waypoint_to: "",
+      route: "",
+
+      hobbs_start: null,
+      hobbs_end: null,
+      tach_start: null,
+      tach_end: null,
+
+      time_start: null,
+      time_off: null,
+      time_down: null,
+      time_stop: null,
+
+      time_total: 0.0,
+      time_pic: 0.0,
+      time_sic: 0.0,
+      time_night: 0.0,
+      time_solo: 0.0,
+
+      time_xc: 0.0,
+      dist_xc: 0.0,
+
+      takeoffs_day: 0,
+      landings_day: 0,
+      takeoffs_night: 0,
+      landings_night: 0,
+
+      time_instrument: 0.0,
+      time_sim_instrument: 0.0,
+      holds_instrument: 0,
+
+      dual_given: 0.0,
+      dual_recvd: 0.0,
+      time_sim: 0.0,
+      time_ground: 0.0,
+
+      tags: [],
+
+      pax: [],
+      crew: [],
+
+      comments: "",
+    },
+  });
+
+  return (
+    <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
+      <ScrollArea.Autosize mah="calc(100vh - 95px - 110px)">
+        <Container>
+          {/* Date and Aircraft */}
+
+          <Fieldset>
+            <Group justify="center" grow>
+              <DatePickerInput label="Date" {...form.getInputProps("date")} />
+              <TextInput label="Aircraft" {...form.getInputProps("aircraft")} />
+            </Group>
+          </Fieldset>
+
+          {/* Route */}
+
+          <Fieldset legend="Route" mt="lg">
+            <Group justify="center" grow>
+              <TextInput
+                label="Waypoint From"
+                {...form.getInputProps("waypoint_from")}
+              />
+              <TextInput
+                label="Waypoint To"
+                {...form.getInputProps("waypoint_to")}
+              />
+            </Group>
+            <TextInput label="Route" {...form.getInputProps("route")} mt="md" />
+          </Fieldset>
+
+          {/* Times */}
+
+          <Fieldset legend="Times" mt="md">
+            <Group justify="center" grow>
+              <HourInput form={form} field="hobbs_start" label="Hobbs Start" />
+              <HourInput form={form} field="hobbs_end" label="Hobbs End" />
+            </Group>
+            <Group justify="center" grow mt="md">
+              <HourInput form={form} field="tach_start" label="Tach Start" />
+              <HourInput form={form} field="tach_end" label="Tach End" />
+            </Group>
+          </Fieldset>
+
+          {/* Start/Stop */}
+
+          <Fieldset legend="Start/Stop" mt="md">
+            <Group justify="center" grow>
+              <TimeInput form={form} field="time_start" label="Start Time" />
+              <TimeInput form={form} field="time_off" label="Time Off" />
+            </Group>
+            <Group justify="center" grow mt="md">
+              <TimeInput form={form} field="time_down" label="Time Down" />
+              <TimeInput form={form} field="time_stop" label="Stop Time" />
+            </Group>
+          </Fieldset>
+
+          {/* Hours */}
+
+          <Fieldset legend="Hours" mt="md">
+            <Group justify="center" grow>
+              <ZeroHourInput
+                form={form}
+                field="time_total"
+                label="Time Total"
+              />
+              <ZeroHourInput form={form} field="time_pic" label="Time PIC" />
+              <ZeroHourInput form={form} field="time_sic" label="Time SIC" />
+            </Group>
+            <Group justify="center" grow mt="md">
+              <ZeroHourInput
+                form={form}
+                field="time_night"
+                label="Time Night"
+              />
+              <ZeroHourInput form={form} field="time_solo" label="Time Solo" />
+            </Group>
+          </Fieldset>
+
+          {/* Cross-Country */}
+
+          <Fieldset legend="Cross-Country" mt="md">
+            <Group justify="center" grow>
+              <ZeroHourInput
+                form={form}
+                field="time_xc"
+                label="Time Cross-Country"
+              />
+              <NumberInput
+                label="Distance Cross-Country"
+                decimalScale={1}
+                min={0}
+                fixedDecimalScale
+                leftSection={
+                  <CloseButton
+                    aria-label="Clear input"
+                    onClick={() => form.setFieldValue("dist_xc", 0)}
+                    style={{
+                      display:
+                        form.getTransformedValues().dist_xc == 0
+                          ? "none"
+                          : undefined,
+                    }}
+                  />
+                }
+                {...form.getInputProps("dist_xc")}
+              />
+            </Group>
+          </Fieldset>
+
+          {/* Takeoffs and Landings */}
+
+          <Fieldset legend="Takeoffs and Landings" mt="md">
+            <Group justify="center" grow>
+              <ZeroIntInput
+                form={form}
+                field="takeoffs_day"
+                label="Day Takeoffs"
+              />
+              <ZeroIntInput
+                form={form}
+                field="landings_day"
+                label="Day Landings"
+              />
+            </Group>
+            <Group justify="center" grow mt="md">
+              <ZeroIntInput
+                form={form}
+                field="takeoffs_night"
+                label="Night Takeoffs"
+              />
+              <ZeroIntInput
+                form={form}
+                field="landings_night"
+                label="Night Landings"
+              />
+            </Group>
+          </Fieldset>
+
+          {/* Instrument */}
+
+          <Fieldset legend="Instrument" mt="md">
+            <Group justify="center" grow>
+              <ZeroHourInput
+                form={form}
+                field="time_instrument"
+                label="Time Instrument"
+              />
+              <ZeroHourInput
+                form={form}
+                field="time_sim_instrument"
+                label="Time Sim Instrument"
+              />
+              <ZeroIntInput
+                form={form}
+                field="holds_instrument"
+                label="Instrument Holds"
+              />
+            </Group>
+          </Fieldset>
+
+          {/* Instruction */}
+
+          <Fieldset legend="Instruction" mt="md">
+            <Group justify="center" grow>
+              <ZeroHourInput
+                form={form}
+                field="dual_given"
+                label="Dual Given"
+              />
+              <ZeroHourInput
+                form={form}
+                field="dual_recvd"
+                label="Dual Received"
+              />
+              <ZeroHourInput form={form} field="time_sim" label="Sim Time" />
+              <ZeroHourInput
+                form={form}
+                field="time_ground"
+                label="Ground Time"
+              />
+            </Group>
+          </Fieldset>
+
+          {/* About the Flight */}
+
+          <Fieldset legend="About" mt="md">
+            <ListInput form={form} field="tags" label="Tags" />
+            <Group justify="center" grow mt="md">
+              <ListInput form={form} field="pax" label="Pax" />
+              <ListInput form={form} field="crew" label="Crew" />
+            </Group>
+            <Textarea
+              label="Comments"
+              mt="md"
+              autosize
+              minRows={4}
+              {...form.getInputProps("comments")}
+            />
+          </Fieldset>
+        </Container>
+      </ScrollArea.Autosize>
+
+      <Group justify="flex-end" mt="md">
+        {isError ? (
+          <Text c="red" fw={700}>
+            {error?.message}
+          </Text>
+        ) : null}
+        <Button type="submit" leftSection={<IconPencil />}>
+          Create
+        </Button>
+      </Group>
+    </form>
+  );
+}