add reminders to mentionable notes

Author: ramonrovirosa

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)}

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,15 +24,17 @@ type NoteHeaderProps = {
   showTimezone?: boolean;
   onDelete?: (note: Omit<Note, 'text'>) => void;
   onEdit?: (note: Omit<Note, 'text'>) => void;
+  onSetReminder?: (time: number) => void;
 };
 
 const defaultProps = {
   dateFormat: 'ddd MMM DD YYYY HH:mm:ss',
 };
 
 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,49 @@ 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(
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 20
+                    )
+                  )}
+                >
+                  In 20 minutes</DropdownItem>
+                <DropdownItem 
+                  onClick={() => onSetReminder(
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 60
+                    )
+                  )}
+                >
+                  In 1 hour</DropdownItem>
+                <DropdownItem
+                  onClick={() => onSetReminder(
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 1440
+                    )
+                  )}
+                >
+                  Tomorrow
+                </DropdownItem>
+                <DropdownItem 
+                  onClick={() => onSetReminder(
+                    new Date().setMinutes(
+                      new Date().getMinutes() + 10080
+                    )
+                  )}
+                >
+                  Next Week
+                </DropdownItem>
+              </DropdownMenu>
+            </ButtonDropdown>
+          </div>
+        ) : null}
       </div>
     </CardHeader>
   ) : (

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?: (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' }}>