add reminders to mentionable notes

.tool-versions

@@ -1,2 +1,2 @@
-nodejs lts-gallium
+nodejs 16.14.2
 yarn 1.22.19

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?: (note: Omit<Note, 'text'>, 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,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>
  ) : (

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