adding proptypes to all that require it. and also configured jest to do code coverage. yes!

Author: jaredwilli

src/components/AddNote.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Button from './stateless/Button';
 
 function AddNote(props) {
@@ -13,4 +14,8 @@ function AddNote(props) {
     );
 }
 
+AddNote.propTypes = {
+    addNote: PropTypes.func.isRequired
+};
+
 export default AddNote;

src/components/AddNotebook.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import Input from './stateless/Input';
 import CloseBtn from './stateless/CloseBtn';
 
@@ -9,12 +11,19 @@ const AddNotebook = ({ notebooks = [], ...props }) => {
                 name="notebook"
                 className="new-notebook"
                 placeholder="Notebook name"
-                onBlur={(e) => props.addNotebook(e)}
-                onKeyDown={(e) => props.keyPress(e)} />
+                onBlur={event => props.addNotebook(event)}
+                onKeyDown={event => props.keyPress(event)} />
 
-           {notebooks.length > 0 && <CloseBtn onClick={(e) => props.toggleAddState(e)} />}
+           {(notebooks.length > 0) && <CloseBtn onClick={event => props.toggleAddState(event)} />}
        </span>
    );
 }
 
+AddNotebook.propTypes = {
+    notebooks: PropTypes.array.isRequired,
+    addNotebook: PropTypes.func.isRequired,
+    keyPress: PropTypes.func.isRequired,
+    toggleAddState: PropTypes.func
+};
+
 export default AddNotebook;

src/components/App.js

@@ -1,24 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import PageContainer from '../containers/pageContainer';
 
-class App extends React.Component {
-    render() {
-        return (
-            <Provider store={this.props.store}>
-                <Router>
-                    <PageContainer page="home" />
-                </Router>
-            </Provider>
-        );
-    }
-}
+const App = (props) => {
+    return (
+        <Provider store={props.store}>
+            <BrowserRouter>
+                <PageContainer page="home" />
+            </BrowserRouter>
+        </Provider>
+    );
+};
 
 App.propTypes = {
-    store: PropTypes.object.isRequired
+    store: PropTypes.object
 };
 
 export default App;

src/components/EditNote.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 import Input from './stateless/Input';
 import Textarea from './stateless/Textarea';
@@ -44,10 +45,10 @@ class EditNote extends React.Component {
         this.InputComponent.focus();
     }
 
-    editNote(e) {
+    editNote(event) {
         const { selectedNote } = this.props;
 
-        selectedNote[e.target.name] = e.target.value;
+        selectedNote[event.target.name] = event.target.value;
 
         this.setState({ selectedNote });
 
@@ -88,10 +89,10 @@ class EditNote extends React.Component {
                             ref={comp => { this.InputComponent = comp; }}
                             value={selectedNote.title}
                             onClick={this.focusTitleInput}
-                            onChange={(e) => this.editNote(e)} />
+                            onChange={event => this.editNote(event)} />
                         <NotebookSelect
                             canAddNotebook={true}
-                            editField={(notebook) => this.editField(notebook)}
+                            editField={notebook => this.editField(notebook)}
                             selectedNotebook={this.state.notebook} />
                     </div>
                     <div className="mid">
@@ -102,22 +103,22 @@ class EditNote extends React.Component {
                             placeholder="http://"
                             pattern="^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?"
                             value={selectedNote.url}
-                            onChange={(e) => this.editNote(e)} />
+                            onChange={event => this.editNote(event)} />
                         <LabelPicker
-                            editField={(color) => this.editField({ label: color })}
+                            editField={color => this.editField({ label: color })}
                             deleteNoteLabel={this.deleteNoteLabel} />
                     </div>
                     <div className="mid">
                         <TagsInput
                             noteTags={selectedNote.tags}
-                            editField={(tags) => this.editField({ tags: tags })} />
+                            editField={tags => this.editField({ tags: tags })} />
                     </div>
                     <div className="bottom">
                         <Textarea
                             name="description"
                             className="description"
                             value={selectedNote.description}
-                            onChange={(e) => this.editNote(e)}>
+                            onChange={event => this.editNote(event)}>
                         </Textarea>
                     </div>
                 </form>
@@ -126,6 +127,12 @@ class EditNote extends React.Component {
     }
 }
 
+EditNote.propTypes = {
+    actions: PropTypes.object,
+    selectedNote: PropTypes.object,
+    deleteNoteLabel: PropTypes.func
+};
+
 function mapStateToProps(state) {
     const newState = {
         selectedNote: state.noteData.selectedNote

src/components/Home.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 import Mousetrap from 'mousetrap';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
@@ -63,13 +64,13 @@ class Home extends React.Component {
 
     // Handle keyboard shortcuts
     componentDidMount() {
-        Mousetrap.bind(['ctrl+n'], (e) => this.addNote(e));
-        Mousetrap.bind(['command+b'], (e) => this.toggleNoteNav(e));
+        Mousetrap.bind(['ctrl+n'], event => this.addNote(event));
+        Mousetrap.bind(['command+b'], event => this.toggleNoteNav(event));
     }
 
     componentWillUnmount() {
-        Mousetrap.unbind(['ctrl+n'], (e) => this.addNote(e));
-        Mousetrap.unbind(['command+b'], (e) => this.toggleNoteNav(e));
+        Mousetrap.unbind(['ctrl+n'], event => this.addNote(event));
+        Mousetrap.unbind(['command+b'], event => this.toggleNoteNav(event));
     }
 
     updateData() {
@@ -124,8 +125,8 @@ class Home extends React.Component {
         this.props.actions.logoutUser();
     }
 
-    addNote(e) {
-        e.preventDefault();
+    addNote(event) {
+        event.preventDefault();
 		this.props.actions.resetSelectedNote();
 		this.props.actions.addNote();
     }
@@ -166,6 +167,11 @@ class Home extends React.Component {
     }
 }
 
+Home.propTypes = {
+    actions: PropTypes.object,
+    user: PropTypes.object
+};
+
 function mapStateToProps(state) {
     const newState = {
         user: state.userData.user,

src/components/Note.js

@@ -1,30 +1,34 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 
 import CloseBtn from './stateless/CloseBtn';
 import TagsList from './TagsList';
 
 import { formatDate, shorten } from '../common/helpers';
 import { sortNotes } from '../common/noteHelpers';
 
-const Note = ({ notes = [], isMobile = false, ...props }) => {
+const Note = ({ notes = [], match, isMobile = false, ...props }) => {
     if (!notes.length) {
         return <div className="empty"></div>;
     }
 
     const note = sortNotes(notes).map(note =>
-        <li className={(note.isEditing) ? 'note selected' : 'note'}
+        <li className={ (note.isEditing) ? 'note selected' : 'note' }
             key={note.id} id={note.id}
-            onClick={(e) => props.selectNote(note)}>
+            onClick={() => props.selectNote(note)}>
 
-            {!isMobile && <CloseBtn onClick={(e) => props.deleteNote(note)} />}
-            {(isMobile && note.url) && <a className="external-link" href={note.url} target="_blank"><FontAwesome name='external-link' /></a>}
+            {!isMobile && <CloseBtn onClick={() => props.deleteNote(note)} />}
+            {(isMobile && note.url) && <a href={ note.url } className="external-link" target="_blank"><FontAwesome name='external-link' /></a>}
 
             {note.label && <div className="note-label" style={{ background: note.label.hex }}></div>}
 
             {note.title && <h2 className="title">
                 {(!isMobile && note.url) &&
-                    <a href={note.url} target="_blank">{shorten(note.title, 80)}</a>
+                    <a href={ note.url } target="_blank">
+                        {shorten(note.title, 80)}
+                    </a>
                 }
                 {(!isMobile && !note.url) && shorten(note.title, 80)}
                 {(isMobile) && shorten(note.title, 80)}
@@ -41,16 +45,26 @@ const Note = ({ notes = [], isMobile = false, ...props }) => {
                     {(note.notebook && note.notebook.name) &&
                         <span className="notebook">
                             <FontAwesome name='book' />
-                            <a href>{note.notebook.name}</a>
+                            <Link to={`${match.path}/${note.notebook.name}`}>
+                                { note.notebook.name }
+                            </Link>
                         </span>
                     }
-                    <TagsList tags={note.tags} />
+                    <TagsList tags={ note.tags } />
                 </div>
             </div>
         </li>
     );
 
-    return <div className="notes"><ul>{note}</ul></div>;
+    return <div className="notes"><ul>{ note }</ul></div>;
+};
+
+Note.propTypes = {
+    match: PropTypes.object,
+    notes: PropTypes.array,
+    isMobile: PropTypes.bool,
+    deleteNote: PropTypes.func,
+    selectNote: PropTypes.func,
 };
 
 export default Note;

src/components/NoteList.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import PropTypes from 'prop-types';
 
 import WelcomeMsg from './stateless/WelcomeMsg';
 import SearchFilter from './SearchFilter';
@@ -136,7 +137,8 @@ class NoteList extends React.Component {
                         sort={this.state.sort}
                         selectNote={(note) => this.selectNote(note)}
                         deleteNote={(note) => this.deleteNote(note)}
-                        isMobile={isMobile} />
+                        isMobile={isMobile}
+                        { ...this.props } />
                 }
             </div>
         );
@@ -159,4 +161,15 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
+NoteList.propTypes = {
+    notes: PropTypes.array,
+    notebooks: PropTypes.array,
+    notebookFilter: PropTypes.object,
+    actions: PropTypes.object,
+    addNote: PropTypes.func,
+    deleteNote: PropTypes.func,
+    filterNotes: PropTypes.func,
+    showLoginModal: PropTypes.func
+};
+
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NoteList));

src/components/__tests__/AddNote.test.js

@@ -5,8 +5,11 @@ import * as setupTests from '../../setupFiles';
 import AddNote from '../AddNote';
 
 describe('AddNote component', () => {
+    const props = {
+        addNote: jest.fn(() => 'Note Added')
+    };
 
     it('renders without crashing', () => {
-        shallow(<AddNote />);
+        shallow(<AddNote { ...props } />);
     });
 });

src/components/__tests__/AddNotebook.test.js

@@ -5,8 +5,11 @@ import * as setupTests from '../../setupFiles';
 import AddNotebook from '../AddNotebook';
 
 describe('AddNotebook component', () => {
+    const props = {
+        addNotebook: jest.fn(() => 'Notebook Added')
+    };
 
     it('renders without crashing', () => {
-        shallow(<AddNotebook />);
+        shallow(<AddNotebook { ...props } />);
     });
 });

src/components/stateless/Button.js

@@ -1,16 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Button = ({ style = {}, ...props }) => {
     return (
         <button
             type="button"
-            style={style}
-            className={props.className + ' btn'}
-            onClick={(e) => props.onClick(e)}
-            {...props}>
-            {props.children}
+            style={ style }
+            className={ `${props.className} btn` }
+            onClick={ event => props.onClick(event) }
+            { ...props }>
+            { props.children }
         </button>
     );
 }
 
+Button.propTypes = {
+    style: PropTypes.object,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    children: PropTypes.node
+};
+
 export default Button;