regularVesselInfo.tsx

@ -0,0 +1,151 @@
import {
  BackHomeButton,
  CommandPalletteButton,
  If,
  Input,
  MinimalPage,
  PageHeading,
} from "ui";
import { BugReportButton, CommandInterface, Navigation } from "@/components";
import { useEffect, useState } from "react";
import wretch from "wretch";
import { AddRegularVesselForm } from "@/components/forms/addRegularVesselForm";
import {
  fieldsNameHelper,
  RegularVesselInfoForm,
  VesselInfo,
} from "@/components/forms/regularVesselInfoForm";

const RegularVesselInfo = () => {
  const [vesselInfo, setVesselInfo] = useState<VesselInfo | null>();
  const [identifier, setIdentifier] = useState<{
    vessel_id?: string;
    imo?: string;
  }>({
    vessel_id: "",
    imo: "",
  });
  const [newRegularVesselForm, setNewRegularVesselForm] = useState<any>();

  useEffect(() => {
    if (!identifier.vessel_id && !identifier.imo) {
      setVesselInfo(null);
    }
  }, [identifier]);

  useEffect(() => {
    const fetchData = async () => {
      if (identifier.vessel_id || identifier.imo) {
        setVesselInfo(null);
        try {
          const response = await wretch(
            `/api/form/regularVessel?vessel_id=${identifier.vessel_id}&imo=${identifier.imo}`,
          )
            .get()
            .res();
          if (response.ok) {
            const data: VesselInfo | null = await response.json();
            setVesselInfo(data);
          } else {
            console.error("Error:", response.statusText);
          }
        } catch (error) {
          console.error("Error:", error);
        }
      } else {
        setVesselInfo(null);
      }
    };
    fetchData();
  }, [identifier]);

  return (
    <MinimalPage
      pageTitle={"Regular Vessel Info | Email Interface"}
      pageDescription={"Spot Ship Email Interface | Regular Vessel Info"}
      commandPrompt
    >
      <div className="flex w-full flex-row justify-between pl-1 pt-1">
        <div>
          <BackHomeButton />
        </div>
        <Navigation />
        <div className="flex flex-row gap-4">
          <BugReportButton />
          <CommandPalletteButton />
          <CommandInterface />
        </div>
      </div>
      <PageHeading text="Regular Vessel Info" />
      <div className="mt-6 flex w-full flex-col gap-2 p-2 sm:w-1/2">
        <div className={"flex flex-row items-center"}>
          <div
            className={"w-28 text-2xl font-normal text-black dark:text-white"}
          >
            IMO or Vessel ID
          </div>
          <Input
            type={"text"}
            className={"text-md"}
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
              setIdentifier({
                vessel_id: event.target.value || "",
                imo: event.target.value || "",
              });
            }}
          />
        </div>
        <div className={"font-sans text-sm text-black dark:text-white"}>
          Enter either the Vessel ID or IMO number to fetch the vessel
          information.
        </div>
      </div>
      <If
        condition={
          !!(
            identifier.vessel_id ||
            (identifier.imo && vesselInfo?.["message"])
          )
        }
      >
        <div className={"mt-2 flex w-full flex-col gap-2 p-2 sm:w-1/2"}>
          <div
            className={"mb-6 text-center text-lg text-black dark:text-white"}
          >
            No information found for identifier:{" "}
            {identifier.vessel_id || identifier.imo}. Add new regular vessel
          </div>
          <div>
            <AddRegularVesselForm
              fields={Object.keys(fieldsNameHelper)}
              vesselId={identifier.vessel_id}
              imo={identifier.imo}
              returnIdentifier={(identifier: {
                vessel_id: string;
                imo: string;
              }) => {
                setIdentifier(identifier);
              }}
            />
          </div>
        </div>
      </If>
      <If
        condition={
          !!(
            identifier.vessel_id ||
            (identifier.imo && vesselInfo && !vesselInfo?.["message"])
          )
        }
      >
        <RegularVesselInfoForm
          vesselInfo={vesselInfo as VesselInfo}
          vesselId={identifier.vessel_id}
          imo={identifier.imo}
        />
      </If>
    </MinimalPage>
  );
};

export default RegularVesselInfo;