From 348377ddea9da31a02ae27f8cdc94e5f679f45e5 Mon Sep 17 00:00:00 2001
From: Ramon Rovirosa <ramon.rovirosa@gmail.com>
Date: Thu, 7 Sep 2023 13:04:53 -0700
Subject: [PATCH 1/2] add reminders to mentionable notes

---
 .tool-versions                       |  2 +-
 src/components/Note/Note.stories.js  |  1 +
 src/components/Note/NoteHeader.tsx   | 57 +++++++++++++++++++++++++++-
 src/components/Note/NoteMentions.tsx |  3 ++
 4 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/.tool-versions b/.tool-versions
index 8d8150475..fb11959e2 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,2 +1,2 @@
-nodejs lts-gallium
+nodejs 16.14.2
 yarn 1.22.19
diff --git a/src/components/Note/Note.stories.js b/src/components/Note/Note.stories.js
index ee8564eb3..062bd334c 100644
--- a/src/components/Note/Note.stories.js
+++ b/src/components/Note/Note.stories.js
@@ -155,6 +155,7 @@ export const NoteWithMentions = () => {
       onChange={action('onChange')}
       onDelete={action('onDelete')}
       onEdit={action('onEdit')}
+      onSetReminder={action('onSetReminder')}
       onSave={action('onSave')}
       onUndelete={action('onUndelete')}
       rows={number('rows', Note.defaultProps.rows)}
diff --git a/src/components/Note/NoteHeader.tsx b/src/components/Note/NoteHeader.tsx
index db53648fa..f0622399d 100644
--- a/src/components/Note/NoteHeader.tsx
+++ b/src/components/Note/NoteHeader.tsx
@@ -1,8 +1,12 @@
 import classnames from 'classnames';
 import fecha from 'fecha';
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import Badge from '../Badge/Badge';
 import Button from '../Button/Button';
+import ButtonDropdown from '../Button/ButtonDropdown'
+import DropdownItem from '../Dropdown/DropdownItem';
+import DropdownMenu from '../Dropdown/DropdownMenu';
+import DropdownToggle from '../Dropdown/DropdownToggle';
 import CardHeader from '../Card/CardHeader';
 import CardTitle from '../Card/CardTitle';
 import { Note } from './Note.types';
@@ -20,6 +24,7 @@ type NoteHeaderProps = {
   showTimezone?: boolean;
   onDelete?: (note: Omit<Note, 'text'>) => void;
   onEdit?: (note: Omit<Note, 'text'>) => void;
+  onSetReminder?: (note: Omit<Note, 'text'>, time: number) => void;
 };
 
 const defaultProps = {
@@ -27,8 +32,9 @@ const defaultProps = {
 };
 
 const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat, ...props }) => {
-  const { note, onDelete, onEdit, showTimezone } = props;
+  const { note, onDelete, onEdit, showTimezone, onSetReminder } = props;
   const { date, edited, from, title } = note;
+  const [isOpen, setIsOpen] = useState(false);
 
   const headerClassNames = classnames(
     'd-flex',
@@ -91,6 +97,53 @@ const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat,
             Delete
           </Button>
         ) : null}
+        { onSetReminder ? (
+          <div className="ms-3">
+            <ButtonDropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)}>
+              <DropdownToggle caret>Remind Me</DropdownToggle>
+              <DropdownMenu>
+                <DropdownItem 
+                  onClick={() => onSetReminder(
+                    note,
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 20
+                    )
+                  )}
+                >
+                  In 20 minutes</DropdownItem>
+                <DropdownItem 
+                  onClick={() => onSetReminder(
+                    note,
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 60
+                    )
+                  )}
+                >
+                  In 1 hour</DropdownItem>
+                <DropdownItem
+                  onClick={() => onSetReminder(
+                    note,
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 1440
+                    )
+                  )}
+                >
+                  Tomorrow
+                </DropdownItem>
+                <DropdownItem 
+                  onClick={() => onSetReminder(
+                    note,
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 10080
+                    )
+                  )}
+                >
+                  Next Week
+                </DropdownItem>
+              </DropdownMenu>
+            </ButtonDropdown>
+          </div>
+        ) : null}
       </div>
     </CardHeader>
   ) : (
diff --git a/src/components/Note/NoteMentions.tsx b/src/components/Note/NoteMentions.tsx
index 065fad8a7..8244dd975 100644
--- a/src/components/Note/NoteMentions.tsx
+++ b/src/components/Note/NoteMentions.tsx
@@ -25,6 +25,7 @@ type NoteMentionsProps = {
   onDelete?: (note: Omit<NoteType, 'text'>) => void;
   onEdit?: (note: Omit<NoteType, 'text'>) => void;
   onSave?: (note: NoteType) => void;
+  onSetReminder?: (note: Omit<NoteType, 'text'>, time: number) => void;
   onUndelete?: (note: NoteType) => void;
   rows?: number;
   saving?: boolean;
@@ -59,6 +60,7 @@ const NoteMentions: FC<NoteMentionsProps> = ({
   onDelete,
   onEdit,
   onSave,
+  onSetReminder,
   onUndelete,
 }) => {
   const { deleted, editing, text } = note;
@@ -106,6 +108,7 @@ const NoteMentions: FC<NoteMentionsProps> = ({
         showTimezone={showTimezone}
         onDelete={onDelete}
         onEdit={onEdit}
+        onSetReminder={onSetReminder}
       />
       <CardBody>
         <CardText style={{ whiteSpace: 'pre-wrap' }}>

From 1d409a8e3d9004ffd063c95f5aa3fe9712b081d1 Mon Sep 17 00:00:00 2001
From: Ramon Rovirosa <ramon.rovirosa@gmail.com>
Date: Thu, 7 Sep 2023 16:29:01 -0700
Subject: [PATCH 2/2] allow dismissing reminders

---
 src/components/Note/Note.stories.js  |  2 ++
 src/components/Note/NoteHeader.tsx   | 15 +++++++++++++--
 src/components/Note/NoteMentions.tsx |  6 ++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Note/Note.stories.js b/src/components/Note/Note.stories.js
index 062bd334c..5ad4d3429 100644
--- a/src/components/Note/Note.stories.js
+++ b/src/components/Note/Note.stories.js
@@ -156,6 +156,8 @@ export const NoteWithMentions = () => {
       onDelete={action('onDelete')}
       onEdit={action('onEdit')}
       onSetReminder={action('onSetReminder')}
+      onDismissReminder={action('onDismissReminder')}
+      reminderExists={boolean('reminderExists')}
       onSave={action('onSave')}
       onUndelete={action('onUndelete')}
       rows={number('rows', Note.defaultProps.rows)}
diff --git a/src/components/Note/NoteHeader.tsx b/src/components/Note/NoteHeader.tsx
index f0622399d..4e3cd85f5 100644
--- a/src/components/Note/NoteHeader.tsx
+++ b/src/components/Note/NoteHeader.tsx
@@ -25,6 +25,8 @@ type NoteHeaderProps = {
   onDelete?: (note: Omit<Note, 'text'>) => void;
   onEdit?: (note: Omit<Note, 'text'>) => void;
   onSetReminder?: (note: Omit<Note, 'text'>, time: number) => void;
+  onDismissReminder?: (note: Omit<Note, 'text'>) => void;
+  reminderExists?: boolean;
 };
 
 const defaultProps = {
@@ -32,7 +34,7 @@ const defaultProps = {
 };
 
 const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat, ...props }) => {
-  const { note, onDelete, onEdit, showTimezone, onSetReminder } = props;
+  const { note, onDelete, onEdit, showTimezone, onSetReminder, onDismissReminder, reminderExists } = props;
   const { date, edited, from, title } = note;
   const [isOpen, setIsOpen] = useState(false);
 
@@ -97,7 +99,7 @@ const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat,
             Delete
           </Button>
         ) : null}
-        { onSetReminder ? (
+        { !reminderExists && onSetReminder ? (
           <div className="ms-3">
             <ButtonDropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)}>
               <DropdownToggle caret>Remind Me</DropdownToggle>
@@ -144,6 +146,15 @@ const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat,
             </ButtonDropdown>
           </div>
         ) : null}
+        { reminderExists && onDismissReminder ? (
+          <Button
+            color="secondary"
+            onClick={() => onDismissReminder(note)}
+            className="js-note-header__dismiss-reminder ms-3"
+          >
+            Dismiss
+          </Button>
+        ) : null}
       </div>
     </CardHeader>
   ) : (
diff --git a/src/components/Note/NoteMentions.tsx b/src/components/Note/NoteMentions.tsx
index 8244dd975..7ddc250c3 100644
--- a/src/components/Note/NoteMentions.tsx
+++ b/src/components/Note/NoteMentions.tsx
@@ -26,6 +26,8 @@ type NoteMentionsProps = {
   onEdit?: (note: Omit<NoteType, 'text'>) => void;
   onSave?: (note: NoteType) => void;
   onSetReminder?: (note: Omit<NoteType, 'text'>, time: number) => void;
+  onDismissReminder?: (note: Omit<NoteType, 'text'>) => void;
+  reminderExists?: boolean;
   onUndelete?: (note: NoteType) => void;
   rows?: number;
   saving?: boolean;
@@ -61,6 +63,8 @@ const NoteMentions: FC<NoteMentionsProps> = ({
   onEdit,
   onSave,
   onSetReminder,
+  onDismissReminder,
+  reminderExists,
   onUndelete,
 }) => {
   const { deleted, editing, text } = note;
@@ -109,6 +113,8 @@ const NoteMentions: FC<NoteMentionsProps> = ({
         onDelete={onDelete}
         onEdit={onEdit}
         onSetReminder={onSetReminder}
+        onDismissReminder={onDismissReminder}
+        reminderExists={reminderExists}
       />
       <CardBody>
         <CardText style={{ whiteSpace: 'pre-wrap' }}>