puerto 0.18.0

Puerto — Rust full-stack DDD framework CLI. Scaffolds Clean Architecture projects with auto-wired DI, SQLx support, and zero manual wiring. Formerly puerto-framework.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

import { useState } from "react";
import { Link, useLocation } from "wouter";
import type { {{ pascal }} } from "../../../../domain/{{ kebab }}/model";
import { useDependencies } from "../../../core/dependencies";
import { useAsync } from "../../../core/hooks/use-async";
import { toProblem } from "../../../../domain/{{ kebab }}/messages";
import { ErrorAlert, errorCode } from "../../../shared/ui/error-alert";
import { {{ pascal }}FormView, to{{ pascal }}Draft, to{{ pascal }}Form } from "../views/{{ kebab }}-form-view";

/** Creates {{ a_words }}, or edits the one with `id`. */
export function {{ pascal }}FormContainer({ id }: { id?: string }) {
  const { {{ camel }}Repository } = useDependencies();
  const existing = useAsync(
    () => (id === undefined ? Promise.resolve(null) : {{ camel }}Repository.get(id)),
    [{{ camel }}Repository, id],
  );
  const title = id === undefined ? "New {{ words }}" : "Edit {{ words }}";

  return (
    <section className="space-y-4">
      <h1 className="text-2xl font-bold">{title}</h1>
      {existing.status === "loading" && <span className="loading loading-spinner" />}
      {existing.status === "error" && <ErrorAlert error={existing.error} />}
      {existing.status === "ok" && <{{ pascal }}Form existing={existing.data} />}
      <Link href={id === undefined ? "/{{ plural }}" : `/{{ plural }}/${id}`} className="link">
        Cancel
      </Link>
    </section>
  );
}

function {{ pascal }}Form({ existing }: { existing: {{ pascal }} | null }) {
  const { {{ camel }}Repository } = useDependencies();
  const [, navigate] = useLocation();
  const [values, setValues] = useState(to{{ pascal }}Form(existing));
  const [saving, setSaving] = useState(false);
  const [failure, setFailure] = useState<unknown>(null);
  const problem = failure === null ? null : toProblem(errorCode(failure));

  const save = async () => {
    setSaving(true);
    setFailure(null);
    try {
      const draft = to{{ pascal }}Draft(values);
      const saved =
        existing === null
          ? await {{ camel }}Repository.create(draft)
          : await {{ camel }}Repository.update(existing.id, draft);
      navigate(`/{{ plural }}/${saved.id}`);
    } catch (error) {
      setFailure(error);
      setSaving(false);
    }
  };

  return (
    <div className="card bg-base-100">
      <div className="card-body">
        {problem?.field === null && <ErrorAlert error={failure} message={problem.text} />}
        <{{ pascal }}FormView
          values={values}
          saving={saving}
          problem={problem}
          onChange={setValues}
          onSubmit={save}
        />
      </div>
    </div>
  );
}