Improved UX when trying to find reminder value

This commit is contained in:
Daniel Hougaard
2024-02-15 01:12:48 +01:00
parent b82d1b6a5d
commit 242d770098
@@ -115,6 +115,9 @@ export const SecretItem = memo(
const hasComment = Boolean(watch("comment")); const hasComment = Boolean(watch("comment"));
const hasReminder = Boolean(watch("reminderRepeatDays")); const hasReminder = Boolean(watch("reminderRepeatDays"));
const secretReminderRepeatDays = watch("reminderRepeatDays");
const secretReminderNote = watch("reminderNote");
const selectedTags = watch("tags", []); const selectedTags = watch("tags", []);
const selectedTagsGroupById = selectedTags.reduce<Record<string, boolean>>( const selectedTagsGroupById = selectedTags.reduce<Record<string, boolean>>(
(prev, curr) => ({ ...prev, [curr.id]: true }), (prev, curr) => ({ ...prev, [curr.id]: true }),
@@ -191,6 +194,8 @@ export const SecretItem = memo(
return ( return (
<> <>
<CreateReminderForm <CreateReminderForm
repeatDays={secretReminderRepeatDays}
note={secretReminderNote}
isOpen={createReminderFormOpen} isOpen={createReminderFormOpen}
onOpenChange={(_, data) => { onOpenChange={(_, data) => {
setCreateReminderFormOpen.toggle(); setCreateReminderFormOpen.toggle();
@@ -386,16 +391,18 @@ export const SecretItem = memo(
size="md" size="md"
ariaLabel="add-reminder" ariaLabel="add-reminder"
> >
<Tooltip content="Reminder"> <Tooltip
content={
hasReminder
? `Every ${secretReminderRepeatDays} day${
Number(secretReminderRepeatDays) > 1 ? "s" : ""
}
`
: "Reminder"
}
>
<FontAwesomeIcon <FontAwesomeIcon
onClick={() => { onClick={() => setCreateReminderFormOpen.on()}
if (!hasReminder) {
setCreateReminderFormOpen.on();
} else {
setValue("reminderRepeatDays", null, { shouldDirty: true });
setValue("reminderNote", null, { shouldDirty: true });
}
}}
icon={faClock} icon={faClock}
/> />
</Tooltip> </Tooltip>