mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
refactor(core): move app para src e padroniza estrutura
This commit is contained in:
Felipe Coutinho
413
src/features/notes/components/note-dialog.tsx
Normal file
413
src/features/notes/components/note-dialog.tsx
Normal file
@@ -0,0 +1,413 @@
|
||||
"use client";
|
||||
|
||||
import { RiAddLine, RiDeleteBinLine } from "@remixicon/react";
|
||||
import {
|
||||
type ReactNode,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
useTransition,
|
||||
} from "react";
|
||||
import { toast } from "sonner";
|
||||
import { createNoteAction, updateNoteAction } from "@/features/notes/actions";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Checkbox } from "@/shared/components/ui/checkbox";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/components/ui/dialog";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import { Label } from "@/shared/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/shared/components/ui/radio-group";
|
||||
import { Textarea } from "@/shared/components/ui/textarea";
|
||||
import { useControlledState } from "@/shared/hooks/use-controlled-state";
|
||||
import { useFormState } from "@/shared/hooks/use-form-state";
|
||||
import {
|
||||
type Note,
|
||||
type NoteFormValues,
|
||||
sortTasksByStatus,
|
||||
type Task,
|
||||
} from "./types";
|
||||
|
||||
type NoteDialogMode = "create" | "update";
|
||||
interface NoteDialogProps {
|
||||
mode: NoteDialogMode;
|
||||
trigger?: ReactNode;
|
||||
note?: Note;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const MAX_TITLE = 30;
|
||||
const MAX_DESC = 350;
|
||||
const normalize = (s: string) => s.replace(/\s+/g, " ").trim();
|
||||
|
||||
const buildInitialValues = (note?: Note): NoteFormValues => ({
|
||||
title: note?.title ?? "",
|
||||
description: note?.description ?? "",
|
||||
type: note?.type ?? "nota",
|
||||
tasks: note?.tasks ?? [],
|
||||
});
|
||||
|
||||
const generateTaskId = () => {
|
||||
return `task-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||
};
|
||||
|
||||
export function NoteDialog({
|
||||
mode,
|
||||
trigger,
|
||||
note,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: NoteDialogProps) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [newTaskText, setNewTaskText] = useState("");
|
||||
|
||||
const titleRef = useRef<HTMLInputElement>(null);
|
||||
const descRef = useRef<HTMLTextAreaElement>(null);
|
||||
const newTaskRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useControlledState(
|
||||
open,
|
||||
false,
|
||||
onOpenChange,
|
||||
);
|
||||
|
||||
const initialState = buildInitialValues(note);
|
||||
|
||||
const { formState, resetForm, updateField } =
|
||||
useFormState<NoteFormValues>(initialState);
|
||||
|
||||
useEffect(() => {
|
||||
if (dialogOpen) {
|
||||
resetForm(buildInitialValues(note));
|
||||
setErrorMessage(null);
|
||||
setNewTaskText("");
|
||||
requestAnimationFrame(() => titleRef.current?.focus());
|
||||
}
|
||||
}, [dialogOpen, note, resetForm]);
|
||||
|
||||
const dialogTitle = mode === "create" ? "Nova anotação" : "Editar anotação";
|
||||
const description =
|
||||
mode === "create"
|
||||
? "Crie uma nota simples ou uma lista de tarefas."
|
||||
: "Altere o conteúdo desta anotação.";
|
||||
const submitLabel = mode === "create" ? "Salvar" : "Atualizar";
|
||||
|
||||
const titleCount = formState.title.length;
|
||||
const descCount = formState.description.length;
|
||||
const isNote = formState.type === "nota";
|
||||
|
||||
const sortedTasks = useMemo(
|
||||
() => sortTasksByStatus(formState.tasks || []),
|
||||
[formState.tasks],
|
||||
);
|
||||
|
||||
const onlySpaces =
|
||||
normalize(formState.title).length === 0 ||
|
||||
(isNote && formState.description.trim().length === 0) ||
|
||||
(!isNote && (!formState.tasks || formState.tasks.length === 0));
|
||||
|
||||
const invalidLen = titleCount > MAX_TITLE || descCount > MAX_DESC;
|
||||
|
||||
const unchanged =
|
||||
mode === "update" &&
|
||||
normalize(formState.title) === normalize(note?.title ?? "") &&
|
||||
formState.description.trim() === (note?.description ?? "").trim() &&
|
||||
JSON.stringify(formState.tasks) === JSON.stringify(note?.tasks);
|
||||
|
||||
const disableSubmit = isPending || onlySpaces || unchanged || invalidLen;
|
||||
|
||||
const handleOpenChange = (v: boolean) => {
|
||||
setDialogOpen(v);
|
||||
if (!v) setErrorMessage(null);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "Enter")
|
||||
(e.currentTarget as HTMLFormElement).requestSubmit();
|
||||
if (e.key === "Escape") handleOpenChange(false);
|
||||
};
|
||||
|
||||
const handleAddTask = () => {
|
||||
const text = normalize(newTaskText);
|
||||
if (!text) return;
|
||||
|
||||
const newTask: Task = {
|
||||
id: generateTaskId(),
|
||||
text,
|
||||
completed: false,
|
||||
};
|
||||
|
||||
updateField("tasks", [...(formState.tasks || []), newTask]);
|
||||
setNewTaskText("");
|
||||
requestAnimationFrame(() => newTaskRef.current?.focus());
|
||||
};
|
||||
|
||||
const handleRemoveTask = (taskId: string) => {
|
||||
updateField(
|
||||
"tasks",
|
||||
(formState.tasks || []).filter((t) => t.id !== taskId),
|
||||
);
|
||||
};
|
||||
|
||||
const handleToggleTask = (taskId: string) => {
|
||||
updateField(
|
||||
"tasks",
|
||||
(formState.tasks || []).map((t) =>
|
||||
t.id === taskId ? { ...t, completed: !t.completed } : t,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setErrorMessage(null);
|
||||
|
||||
const payload = {
|
||||
title: normalize(formState.title),
|
||||
description: formState.description.trim(),
|
||||
type: formState.type,
|
||||
tasks: formState.tasks,
|
||||
};
|
||||
|
||||
if (onlySpaces || invalidLen) {
|
||||
setErrorMessage("Preencha os campos respeitando os limites.");
|
||||
titleRef.current?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === "update" && !note?.id) {
|
||||
const msg = "Não foi possível identificar a anotação a ser editada.";
|
||||
setErrorMessage(msg);
|
||||
toast.error(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
if (unchanged) {
|
||||
toast.info("Nada para atualizar.");
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
let result: { success: boolean; message?: string; error?: string };
|
||||
if (mode === "create") {
|
||||
result = await createNoteAction(payload);
|
||||
} else {
|
||||
if (!note?.id) {
|
||||
const msg = "ID da anotação não encontrado.";
|
||||
setErrorMessage(msg);
|
||||
toast.error(msg);
|
||||
return;
|
||||
}
|
||||
result = await updateNoteAction({ id: note.id, ...payload });
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
setDialogOpen(false);
|
||||
return;
|
||||
}
|
||||
setErrorMessage(result.error);
|
||||
toast.error(result.error);
|
||||
titleRef.current?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
|
||||
{trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{dialogTitle}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form
|
||||
className="space-y-3 -mx-6 max-h-[80vh] overflow-y-auto px-6 pb-1"
|
||||
onSubmit={handleSubmit}
|
||||
onKeyDown={handleKeyDown}
|
||||
noValidate
|
||||
>
|
||||
{mode === "create" && (
|
||||
<div className="space-y-1">
|
||||
<Label>Tipo de anotação</Label>
|
||||
<RadioGroup
|
||||
value={formState.type}
|
||||
onValueChange={(value) =>
|
||||
updateField("type", value as "nota" | "tarefa")
|
||||
}
|
||||
disabled={isPending}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="nota" id="tipo-nota" />
|
||||
<Label
|
||||
htmlFor="tipo-nota"
|
||||
className="font-normal cursor-pointer"
|
||||
>
|
||||
Nota
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="tarefa" id="tipo-tarefa" />
|
||||
<Label
|
||||
htmlFor="tipo-tarefa"
|
||||
className="font-normal cursor-pointer"
|
||||
>
|
||||
Tarefas
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="note-title">Título</Label>
|
||||
<Input
|
||||
id="note-title"
|
||||
ref={titleRef}
|
||||
value={formState.title}
|
||||
onChange={(e) => updateField("title", e.target.value)}
|
||||
placeholder={
|
||||
isNote ? "Ex.: Revisar metas do mês" : "Ex.: Tarefas da semana"
|
||||
}
|
||||
maxLength={MAX_TITLE}
|
||||
disabled={isPending}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isNote && (
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="note-description">Conteúdo</Label>
|
||||
<Textarea
|
||||
id="note-description"
|
||||
className="field-sizing-fixed"
|
||||
ref={descRef}
|
||||
value={formState.description}
|
||||
onChange={(e) => updateField("description", e.target.value)}
|
||||
placeholder="Detalhe sua anotação..."
|
||||
rows={5}
|
||||
maxLength={MAX_DESC}
|
||||
disabled={isPending}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isNote && (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="new-task-input">Adicionar tarefa</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="new-task-input"
|
||||
ref={newTaskRef}
|
||||
value={newTaskText}
|
||||
onChange={(e) => setNewTaskText(e.target.value)}
|
||||
placeholder="Nova tarefa..."
|
||||
disabled={isPending}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleAddTask();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleAddTask}
|
||||
disabled={isPending || !normalize(newTaskText)}
|
||||
className="shrink-0"
|
||||
>
|
||||
<RiAddLine className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sortedTasks.length > 0 && (
|
||||
<div className="space-y-1 max-h-[300px] overflow-y-auto pr-1 mt-4 rounded-md p-2 bg-card ">
|
||||
{sortedTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-3 px-3 py-1.5 rounded-md hover:bg-muted/50"
|
||||
>
|
||||
<Checkbox
|
||||
className="data-[state=checked]:bg-success data-[state=checked]:border-success"
|
||||
checked={task.completed}
|
||||
onCheckedChange={() => handleToggleTask(task.id)}
|
||||
disabled={isPending}
|
||||
aria-label={`Marcar "${task.text}" como ${
|
||||
task.completed ? "não concluída" : "concluída"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`flex-1 text-sm wrap-break-word ${
|
||||
task.completed
|
||||
? "text-muted-foreground line-through"
|
||||
: "text-foreground"
|
||||
}`}
|
||||
>
|
||||
{task.text}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveTask(task.id)}
|
||||
disabled={isPending}
|
||||
className="shrink-0 text-muted-foreground/50 hover:text-destructive transition-colors"
|
||||
aria-label={`Remover "${task.text}"`}
|
||||
>
|
||||
<RiDeleteBinLine className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-destructive" role="alert">
|
||||
{errorMessage}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => handleOpenChange(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={disableSubmit}
|
||||
onClick={(e) => {
|
||||
const form = (
|
||||
e.currentTarget.closest("[role=dialog]") as HTMLElement
|
||||
)?.querySelector("form");
|
||||
if (form) {
|
||||
e.preventDefault();
|
||||
form.requestSubmit();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isPending ? "Salvando..." : submitLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user