bknd/app/src/ui/routes/data/data.$entity.create.tsx

import { Type } from "core/utils";
import type { EntityData } from "data";
import { useState } from "react";
import { useEntityMutate } from "ui/client";
import { useBknd } from "ui/client/BkndProvider";
import { Button } from "ui/components/buttons/Button";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import { useSearch } from "ui/hooks/use-search";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
import { routes } from "ui/lib/routes";
import { EntityForm } from "ui/modules/data/components/EntityForm";
import { useEntityForm } from "ui/modules/data/hooks/useEntityForm";

export function DataEntityCreate({ params }) {
   const { app } = useBknd();
   const entity = app.entity(params.entity as string)!;
   const [error, setError] = useState<string | null>(null);
   useBrowserTitle(["Data", entity.label, "Create"]);

   const $q = useEntityMutate(entity.name);

   // @todo: use entity schema for prefilling
   const search = useSearch(Type.Object({}), {});

   function goBack() {
      window.history.go(-1);
   }

   async function onSubmitted(changeSet?: EntityData) {
      console.log("create:changeSet", changeSet);
      if (!changeSet) return;

      try {
         await $q.create(changeSet);
         if (error) setError(null);
         // @todo: navigate to created?
         goBack();
      } catch (e) {
         setError(e instanceof Error ? e.message : "Failed to create");
      }
   }

   const { Form, handleSubmit } = useEntityForm({
      action: "create",
      entity,
      initialData: search.value,
      onSubmitted
   });

   const fieldsDisabled = $q.isLoading || $q.isValidating || Form.state.isSubmitting;

   return (
      <>
         <AppShell.SectionHeader
            right={
               <>
                  <Button onClick={goBack}>Cancel</Button>
                  <Form.Subscribe
                     selector={(state) => [state.canSubmit, state.isSubmitting]}
                     children={([canSubmit, isSubmitting]) => (
                        <Button
                           type="button"
                           onClick={Form.handleSubmit}
                           variant="primary"
                           tabIndex={entity.fields.length}
                           disabled={!canSubmit || isSubmitting}
                        >
                           Create
                        </Button>
                     )}
                  />
               </>
            }
         >
            <Breadcrumbs2
               path={[
                  { label: entity.label, href: routes.data.entity.list(entity.name) },
                  { label: "Create" }
               ]}
            />
         </AppShell.SectionHeader>
         <AppShell.Scrollable key={entity.name}>
            {error && (
               <div className="flex flex-row dark:bg-red-950 bg-red-100 p-4">
                  <b className="mr-2">Create failed: </b> {error}
               </div>
            )}
            <EntityForm
               entity={entity}
               handleSubmit={handleSubmit}
               fieldsDisabled={fieldsDisabled}
               data={search.value}
               Form={Form}
               action="create"
               className="flex flex-grow flex-col gap-3 p-3"
            />
         </AppShell.Scrollable>
      </>
   );
}