From 242d770098c1aec146d08b7f2db01391403ac70b Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 15 Feb 2024 01:12:48 +0100
Subject: [PATCH] Improved UX when trying to find reminder value

---
 .../components/SecretListView/SecretItem.tsx  | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index ecd35abf8..b175a0bca 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -115,6 +115,9 @@ export const SecretItem = memo(
     const hasComment = Boolean(watch("comment"));
     const hasReminder = Boolean(watch("reminderRepeatDays"));
 
+    const secretReminderRepeatDays = watch("reminderRepeatDays");
+    const secretReminderNote = watch("reminderNote");
+
     const selectedTags = watch("tags", []);
     const selectedTagsGroupById = selectedTags.reduce<Record<string, boolean>>(
       (prev, curr) => ({ ...prev, [curr.id]: true }),
@@ -191,6 +194,8 @@ export const SecretItem = memo(
     return (
       <>
         <CreateReminderForm
+          repeatDays={secretReminderRepeatDays}
+          note={secretReminderNote}
           isOpen={createReminderFormOpen}
           onOpenChange={(_, data) => {
             setCreateReminderFormOpen.toggle();
@@ -386,16 +391,18 @@ export const SecretItem = memo(
                       size="md"
                       ariaLabel="add-reminder"
                     >
-                      <Tooltip content="Reminder">
+                      <Tooltip
+                        content={
+                          hasReminder
+                            ? `Every ${secretReminderRepeatDays} day${
+                                Number(secretReminderRepeatDays) > 1 ? "s" : ""
+                              }
+                          `
+                            : "Reminder"
+                        }
+                      >
                         <FontAwesomeIcon
-                          onClick={() => {
-                            if (!hasReminder) {
-                              setCreateReminderFormOpen.on();
-                            } else {
-                              setValue("reminderRepeatDays", null, { shouldDirty: true });
-                              setValue("reminderNote", null, { shouldDirty: true });
-                            }
-                          }}
+                          onClick={() => setCreateReminderFormOpen.on()}
                           icon={faClock}
                         />
                       </Tooltip>