| 1 | "use client"; |
| 2 | |
| 3 | import { Pencil } from "lucide-react"; |
| 4 | import { useRouter } from "next/navigation"; |
| 5 | import { useAction } from "next-safe-action/hooks"; |
| 6 | import { type ReactNode, useState } from "react"; |
| 7 | import { toast } from "sonner"; |
| 8 | |
| 9 | import { updateIssue } from "@/components/issues/actions"; |
| 10 | import { updatePullRequest } from "@/components/pull-requests/actions"; |
| 11 | import { Button } from "@/components/ui/button"; |
| 12 | import { Input } from "@/components/ui/input"; |
| 13 | import { Spinner } from "@/components/ui/spinner"; |
| 14 | import { Textarea } from "@/components/ui/textarea"; |
| 15 | |
| 16 | /** Read view until Edit is clicked, then a single field editing the title or description of an issue or pull request. With a `header`, the field renders as a card and Edit sits in its top bar. */ |
| 17 | export function EditableField({ |
| 18 | username, |
| 19 | repo, |
| 20 | number, |
| 21 | noun, |
| 22 | field, |
| 23 | value, |
| 24 | canEdit, |
| 25 | header, |
| 26 | children, |
| 27 | }: { |
| 28 | username: string; |
| 29 | repo: string; |
| 30 | number: number; |
| 31 | noun: "issue" | "pull request"; |
| 32 | field: "title" | "body"; |
| 33 | value: string; |
| 34 | canEdit: boolean; |
| 35 | header?: ReactNode; |
| 36 | children: ReactNode; |
| 37 | }) { |
| 38 | const router = useRouter(); |
| 39 | const [editing, setEditing] = useState(false); |
| 40 | const [draft, setDraft] = useState(value); |
| 41 | |
| 42 | const update = useAction(noun === "issue" ? updateIssue : updatePullRequest, { |
| 43 | onSuccess: () => { |
| 44 | setEditing(false); |
| 45 | router.refresh(); |
| 46 | }, |
| 47 | onError: ({ error }) => |
| 48 | toast.error( |
| 49 | error.validationErrors?.[field]?._errors?.[0] ?? |
| 50 | error.serverError ?? |
| 51 | "Could not save this change.", |
| 52 | ), |
| 53 | }); |
| 54 | |
| 55 | const edit = canEdit && !editing && ( |
| 56 | <Button |
| 57 | variant="ghost" |
| 58 | size="sm" |
| 59 | className="shrink-0" |
| 60 | onClick={() => { |
| 61 | setDraft(value); |
| 62 | setEditing(true); |
| 63 | }} |
| 64 | > |
| 65 | <Pencil data-icon="inline-start" /> |
| 66 | Edit |
| 67 | </Button> |
| 68 | ); |
| 69 | |
| 70 | const content = editing ? ( |
| 71 | <form |
| 72 | className="flex flex-col gap-2" |
| 73 | onSubmit={(event) => { |
| 74 | event.preventDefault(); |
| 75 | update.execute( |
| 76 | field === "title" |
| 77 | ? { username, repo, number, title: draft } |
| 78 | : { username, repo, number, body: draft.trim() ? draft : null }, |
| 79 | ); |
| 80 | }} |
| 81 | > |
| 82 | {field === "title" ? ( |
| 83 | <Input |
| 84 | value={draft} |
| 85 | onChange={(event) => setDraft(event.target.value)} |
| 86 | maxLength={200} |
| 87 | autoFocus |
| 88 | disabled={update.isExecuting} |
| 89 | /> |
| 90 | ) : ( |
| 91 | <Textarea |
| 92 | value={draft} |
| 93 | onChange={(event) => setDraft(event.target.value)} |
| 94 | rows={6} |
| 95 | maxLength={20000} |
| 96 | placeholder={`Describe this ${noun}. Markdown is supported.`} |
| 97 | autoFocus |
| 98 | disabled={update.isExecuting} |
| 99 | /> |
| 100 | )} |
| 101 | |
| 102 | <div className="flex justify-end gap-2"> |
| 103 | <Button |
| 104 | type="button" |
| 105 | variant="outline" |
| 106 | size="sm" |
| 107 | disabled={update.isExecuting} |
| 108 | onClick={() => setEditing(false)} |
| 109 | > |
| 110 | Cancel |
| 111 | </Button> |
| 112 | <Button |
| 113 | type="submit" |
| 114 | size="sm" |
| 115 | disabled={update.isExecuting || (field === "title" && !draft.trim())} |
| 116 | > |
| 117 | {update.isExecuting && <Spinner />} |
| 118 | Save |
| 119 | </Button> |
| 120 | </div> |
| 121 | </form> |
| 122 | ) : ( |
| 123 | children |
| 124 | ); |
| 125 | |
| 126 | if (header) { |
| 127 | return ( |
| 128 | <div className="rounded-lg border"> |
| 129 | <div className="flex min-h-11 items-center gap-1.5 border-b bg-muted/40 px-4 py-1.5 text-sm text-muted-foreground"> |
| 130 | {header} |
| 131 | {edit && <div className="ml-auto">{edit}</div>} |
| 132 | </div> |
| 133 | <div className="px-4 py-3 text-sm">{content}</div> |
| 134 | </div> |
| 135 | ); |
| 136 | } |
| 137 | |
| 138 | if (!edit) return content; |
| 139 | return ( |
| 140 | <div className="flex items-start gap-2"> |
| 141 | <div className="min-w-0 flex-1">{content}</div> |
| 142 | {edit} |
| 143 | </div> |
| 144 | ); |
| 145 | } |