Update notes components

src/components/DeletedNote.js

@@ -4,15 +4,16 @@ import Alert from './Alert';
 
 class DeletedNote extends React.Component {
   static propTypes = {
+    className: PropTypes.string,
     note: PropTypes.object.isRequired,
     onUndelete: PropTypes.func
   };
 
   render() {
-    const { note, onUndelete } = this.props;
+    const { className, note, onUndelete } = this.props;
 
     return (
-      <Alert color="success" icon>
+      <Alert color="success" icon className={className}>
         Note deleted.
         {onUndelete ? <a ref="undo" href="#" className="ml-1" onClick={() => onUndelete(note)}>undo</a> : null}
       </Alert>

src/components/EditableNote.js

@@ -4,32 +4,58 @@ import Button from './Button';
 import ButtonToolbar from './ButtonToolbar';
 import Card from './Card';
 import CardBlock from './CardBlock';
+import FormLabelGroup from './FormLabelGroup';
 import Input from './Input';
+import NoteHeader from './NoteHeader';
 
 class EditableNote extends React.Component {
   static propTypes = {
-    note: PropTypes.object.isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    note: PropTypes.shape({
+      date: PropTypes.object,
+      errors: PropTypes.string,
+      text: PropTypes.string
+    }),
     onCancel: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onSave: PropTypes.func.isRequired
+    onSave: PropTypes.func.isRequired,
+    rows: PropTypes.number,
+    saving: PropTypes.bool
+  };
+
+  static defaultProps = {
+    className: 'bg-white mb-3',
+    rows: 4,
+    saving: false
   };
 
   render() {
-    const { note, onCancel, onChange, onSave } = this.props;
+    const { children, className, note, onCancel, onChange, onSave, rows, saving } = this.props;
+    const { date, errors, text } = note;
 
     return (
-      <Card>
+      <Card className={className}>
+        {date && <NoteHeader note={note} />}
         <CardBlock>
-          <Input
-            ref="text"
-            type="textarea"
-            value={note.text}
-            rows="5"
-            onChange={onChange}
-          />
-          <ButtonToolbar className="mt-3">
-            <Button ref="save" color="primary" onClick={onSave}>Save</Button>
-            <Button ref="cancel" onClick={onCancel}>Cancel</Button>
+          <FormLabelGroup feedback={errors} stacked>
+            <Input
+              autoFocus
+              disabled={saving}
+              ref="text"
+              rows={rows}
+              state={errors && 'danger'}
+              type="textarea"
+              value={text}
+              onChange={event => onChange(event, note)}
+            />
+          </FormLabelGroup>
+          {children}
+          <ButtonToolbar className="mt-3 mb-0">
+            <Button ref="save" color="primary" disabled={saving} onClick={() => onSave(note)}>
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+            <Button ref="cancel" disabled={saving} onClick={() => onCancel(note)}>Cancel</Button>
           </ButtonToolbar>
         </CardBlock>
       </Card>

src/components/Note.js

@@ -1,80 +1,72 @@
-import fecha from 'fecha';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Badge from './Badge';
-import Button from './Button';
 import Card from './Card';
 import CardBlock from './CardBlock';
-import CardHeader from './CardHeader';
 import CardText from './CardText';
+import NoteHeader from './NoteHeader.js';
 import DeletedNote from './DeletedNote.js';
 import EditableNote from './EditableNote.js';
 
-// TODO extract to date helper, i18n:
-const dateFormat = (date, format) => fecha.format(date, format);
-
 class Note extends React.Component {
   static displayName = 'Note';
 
   static propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
-    note: PropTypes.object,
+    note: PropTypes.shape({
+      deleted: PropTypes.bool,
+      editing: PropTypes.bool,
+      text: PropTypes.string.isRequired
+    }).isRequired,
     onCancel: PropTypes.func,
     onChange: PropTypes.func,
     onDelete: PropTypes.func,
     onEdit: PropTypes.func,
     onSave: PropTypes.func,
-    onUndelete: PropTypes.func
+    onUndelete: PropTypes.func,
+    rows: PropTypes.number,
+    saving: PropTypes.boolean
   };
 
   static defaultProps = {
-    className: ''
+    className: 'bg-white mb-3',
+    rows: EditableNote.defaultProps.rows,
+    saving: EditableNote.defaultProps.saving
   };
 
   render() {
-    const { children, className, note, onCancel, onChange, onSave, onDelete, onEdit, onUndelete } = this.props;
-    const { date, deleted, edited, editing, from, text } = note;
+    const { children, className, note, onCancel, onChange, onDelete, onEdit, onSave, onUndelete, rows, saving }
+      = this.props;
+    const { deleted, editing, text } = note;
 
+    if (deleted) {
+      return (
+        <DeletedNote
+          className={className}
+          note={note}
+          onUndelete={onUndelete}
+        />);
+    } else if (editing) {
+      return (
+        <EditableNote
+          className={className}
+          note={note}
+          onCancel={onCancel}
+          onChange={onChange}
+          onSave={onSave}
+          rows={rows}
+          saving={saving}
+        />);
+    }
     return (
-      <div className={`mb-3 ${className}`}>
-        {deleted ?
-          <DeletedNote
-            ref="deleted"
-            note={note}
-            onUndelete={onUndelete}
-          /> :
-          editing ?
-            <EditableNote
-              ref="editable"
-              note={note}
-              onCancel={onCancel}
-              onChange={onChange}
-              onSave={onSave}
-            /> :
-            <Card color="info" outline>
-              <CardHeader className="d-flex justify-content-start p-2 bg-info">
-                {edited ? <span ref="edited"><Badge color="primary text-uppercase mr-2">Edited</Badge></span> : null}
-                <span className="text-muted">
-                  <span className="hidden-xs-down">
-                    {edited ? 'Last edited' : 'Posted'} {from ? <span ref="from">by {from}</span> : ' '} on <span ref="date">{dateFormat(date, 'ddd, MMMM D, YYYY "at" h:mm A')}</span>
-                  </span>
-                  <span className="hidden-sm-up">
-                    {from ? <span>{from} </span> : null}<span ref="shortDate">{dateFormat(date, 'M/D/YY h:mm A')}</span>
-                  </span>
-                </span>
-                <span className="ml-auto">
-                  {onEdit ? <Button color="link" ref="edit" onClick={() => onEdit(note)} className="mr-3 p-0">edit</Button> : null}
-                  {onDelete ? <Button color="link" ref="delete" onClick={() => onDelete(note)} className="p-0">delete</Button> : null}
-                </span>
-              </CardHeader>
-              <CardBlock>
-                <CardText style={{ whiteSpace: 'pre-wrap' }}>{text}</CardText>
-                {children}
-              </CardBlock>
-            </Card>
-          }
-      </div>
+      <Card color="info" className={className} outline>
+        <NoteHeader note={note} onDelete={onDelete} onEdit={onEdit} />
+        <CardBlock>
+          <CardText style={{ whiteSpace: 'pre-wrap' }}>{text}</CardText>
+          {children}
+        </CardBlock>
+      </Card>
     );
   }
 }

src/components/NoteHeader.js

@@ -0,0 +1,65 @@
+import fecha from 'fecha';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import Badge from './Badge';
+import Button from './Button';
+import CardHeader from './CardHeader';
+
+// TODO extract to date helper, i18n:
+const dateFormat = (date, format) => fecha.format(date, format);
+
+class NoteHeader extends React.Component {
+  static displayName = 'NoteHeader';
+
+  static propTypes = {
+    note: PropTypes.shape({
+      date: PropTypes.object.isRequired,
+      edited: PropTypes.bool,
+      from: PropTypes.string,
+    }).isRequired,
+    onDelete: PropTypes.func,
+    onEdit: PropTypes.func,
+  };
+
+  render() {
+    const { note, onDelete, onEdit } = this.props;
+    const { date, edited, from } = note;
+
+    const headerClassNames = classnames(
+      'd-flex',
+      'flex-wrap',
+      'align-items-center',
+      'justify-content-between',
+      'py-2',
+      'pr-2',
+      'bg-info'
+    );
+
+    return (
+      <CardHeader className={headerClassNames}>
+        <div
+          className="d-inline-flex align-items-center"
+          ref="title"
+        >
+          {edited && <Badge color="primary" className="text-uppercase mr-2 js-note-header__edited">Edited</Badge>}
+          <span className="m-0 my-1 mr-auto">
+            <span className="hidden-xs-down">
+              {edited ? 'Last edited' : 'Posted'}
+              {from ? <span className="js-note-header__from">{` by ${from}`}</span> : ' '} on <span className="js-note-header__date">{dateFormat(date, 'ddd, MMMM D, YYYY "at" h:mm A')}</span>
+            </span>
+            <span className="hidden-sm-up">
+              {from ? <span>{from} </span> : null}<span className="js-note-header__shortDate">{dateFormat(date, 'M/D/YY h:mm A')}</span>
+            </span>
+          </span>
+        </div>
+        <div className="d-inline-flex">
+          {onEdit ? <Button color="link" onClick={() => onEdit(note)} className="js-note-header__edit mr-3 p-0">edit</Button> : null}
+          {onDelete ? <Button color="link" onClick={() => onDelete(note)} className="js-note-header__delete p-0">delete</Button> : null}
+        </div>
+      </CardHeader>
+    );
+  }
+}
+
+export default NoteHeader;

src/components/Notes.js

@@ -1,26 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from './Button';
-import Col from './Col';
-import HelpBubble from './HelpBubble';
-import Icon from './Icon';
 import Note from './Note';
-import Row from './Row';
 
 export default class Notes extends React.Component {
-
   static propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
-    onAdd: PropTypes.func,
     onCancel: PropTypes.func,
     onChange: PropTypes.func,
     onDelete: PropTypes.func,
-    onDownload: PropTypes.func,
     onEdit: PropTypes.func,
     onSave: PropTypes.func,
     onUndelete: PropTypes.func,
-    notes: PropTypes.array,
+    notes: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string.isRequired
+    }))
   }
 
   static defaultProps = {
@@ -29,52 +24,25 @@ export default class Notes extends React.Component {
   }
 
   render() {
-    const { children, className, notes, onAdd, onDownload, onCancel, onChange, onDelete, onEdit, onSave, onUndelete } = this.props;
+    const { children, className, notes, onCancel, onChange,
+      onDelete, onEdit, onSave, onUndelete } = this.props;
 
     return (
       <div className={className}>
-        <Row className="mb-3">
-          <Col>
-            <h3>
-              Notes
-              <HelpBubble
-                title="Notes"
-                placement="right"
-                className="text-primary ml-1"
-              >
-                Make notes on several different pages. Notes are private to property managers.
-                The 'Download PDF' button will download all the notes on a page as a PDF to your computer.
-              </HelpBubble>
-            </h3>
-          </Col>
-          <Col className="text-right">
-            {onDownload ?
-              <Button size="sm" className="mr-1" onClick={onDownload}>
-                <Icon name="download" fixedWidth />
-                <span className="hidden-xs-down">Download PDF</span>
-              </Button>
-              : null}
-            {onAdd ?
-              <Button size="sm" onClick={onAdd}>
-                <Icon name="plus-circle" fixedWidth />
-                <span className="hidden-xs-down">Add Note</span>
-              </Button>
-              : null}
-          </Col>
-        </Row>
         {children ||
-          notes.map((note, i) =>
+          notes.map(note => (
             <Note
+              key={note.id ? `js-note-${note.id}` : null}
               note={note}
-              key={i}
               onCancel={onCancel}
               onChange={onChange}
               onDelete={onDelete}
               onEdit={onEdit}
               onSave={onSave}
               onUndelete={onUndelete}
+              saving={note.editing && note.saving}
             />
-          )
+          ))
         }
       </div>
     );

src/index.js

@@ -99,6 +99,7 @@ import Modal from './components/Modal.js';
 import MonthCalendar from './components/MonthCalendar.js';
 import MonthInput from './components/MonthInput.js';
 import Note from './components/Note.js';
+import NoteHeader from './components/NoteHeader.js';
 import Notes from './components/Notes.js';
 import Paginator from './components/Paginator';
 import PatternInput from './components/PatternInput.js';
@@ -230,6 +231,7 @@ export {
   MonthCalendar,
   MonthInput,
   Note,
+  NoteHeader,
   Notes,
   PatternInput,
   Progress,