remove unecessary dependencies to Redux
authorymh <ymh.work@gmail.com>
Thu, 20 Jul 2017 23:37:58 +0200
changeset 125 c653f49fabfb
parent 124 c77570164050
child 126 ba8bc0199464
remove unecessary dependencies to Redux
client/src/components/NoteInput.js
client/src/components/NotesList.js
client/src/components/Session.js
client/src/components/SessionSummary.js
--- a/client/src/components/NoteInput.js	Thu Jul 20 11:23:08 2017 +0200
+++ b/client/src/components/NoteInput.js	Thu Jul 20 23:37:58 2017 +0200
@@ -1,12 +1,8 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import { Form, FormControl } from 'react-bootstrap';
 
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
-import * as notesActions from '../actions/notesActions';
-import * as userActions from '../actions/userActions';
 import { now } from '../utils';
 
 
@@ -34,7 +30,7 @@
     const categories = this.refs.editor.asCategories();
     const marginComment = this.marginComment.value;
 
-    this.props.notesActions.addNote(this.props.session, {
+    this.props.addNote(this.props.session, {
       plain: plain,
       raw: raw,
       html: html,
@@ -49,7 +45,7 @@
   }
 
   onCheckboxChange = (e) => {
-    this.props.userActions.setAutoSubmit(e.target.checked);
+    this.props.setAutoSubmit(e.target.checked);
   }
 
   componentDidMount() {
@@ -84,21 +80,8 @@
   }
 }
 
-function mapStateToProps(state, props) {
-  return {
-    autoSubmit: state.autoSubmit
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    notesActions: bindActionCreators(notesActions, dispatch),
-    userActions: bindActionCreators(userActions, dispatch),
-  }
-}
-
 NoteInput.propTypes = {
   addNote: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(NoteInput);
+export default NoteInput;
--- a/client/src/components/NotesList.js	Thu Jul 20 11:23:08 2017 +0200
+++ b/client/src/components/NotesList.js	Thu Jul 20 23:37:58 2017 +0200
@@ -1,11 +1,8 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { Alert, Modal, Button } from 'react-bootstrap';
 import Note from './Note';
-import * as notesActions from '../actions/notesActions';
 
 class NotesList extends Component {
 
@@ -32,7 +29,7 @@
 
   deleteNote = () => {
     const { noteToDelete } = this.state;
-    this.props.notesActions.deleteNote(noteToDelete);
+    this.props.deleteNote(noteToDelete);
     this.closeModal();
   }
 
@@ -44,7 +41,7 @@
   }
 
   updateNote = (note, data) => {
-    this.props.notesActions.updateNote(note, data);
+    this.props.updateNote(note, data);
   }
 
   render() {
@@ -87,17 +84,4 @@
   notes: PropTypes.instanceOf(Immutable.List).isRequired
 };
 
-function mapStateToProps(state, props) {
-  return {
-    ...props,
-    notes : props.notes.filter(note => !note.deleted)
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    notesActions: bindActionCreators(notesActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(NotesList);
+export default NotesList;
--- a/client/src/components/Session.js	Thu Jul 20 11:23:08 2017 +0200
+++ b/client/src/components/Session.js	Thu Jul 20 23:37:58 2017 +0200
@@ -10,6 +10,7 @@
 import SessionSummary from './SessionSummary';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as notesActions from '../actions/notesActions';
+import * as userActions from '../actions/userActions';
 
 class Session extends Component {
   render() {
@@ -24,14 +25,22 @@
             <div className="notes-list">
               <SessionForm session={this.props.currentSession} />
               <hr />
-              <NotesList notes={this.props.notes} />
+              <NotesList
+                notes={this.props.notes}
+                deleteNote={this.props.notesActions.deleteNote}
+                updateNote={this.props.notesActions.updateNote}
+              />
             </div>
           </div>
           <section className="editor-fixed">
             <Grid fluid>
               <Row>
                 <Col md={9} mdOffset={3}>
-                  <NoteInput session={this.props.currentSession} addNote={this.props.notesActions.addNote} />
+                  <NoteInput
+                    session={this.props.currentSession}
+                    autoSubmit={this.props.autoSubmit}
+                    addNote={this.props.notesActions.addNote}
+                    setAutoSubmit={this.props.userActions.setAutoSubmit} />
                 </Col>
               </Row>
             </Grid>
@@ -48,16 +57,18 @@
 
   const sessions = state['sessions'];
   const notes = state['notes'];
+  const autoSubmit = state['autoSubmit'];
 
   const currentSession = sessions.find(session => session._id === sessionId);
   const currentNotes = notes.filter(note => {
-        return note.session === sessionId;
+        return (note.session === sessionId && !note.deleted);
     }).sortBy( n => n.get('startedAt') );
 
   return {
     currentSession,
     sessions,
     notes: currentNotes,
+    autoSubmit
   };
 }
 
@@ -65,6 +76,7 @@
   return {
     sessionsActions: bindActionCreators(sessionsActions, dispatch),
     notesActions: bindActionCreators(notesActions, dispatch),
+    userActions: bindActionCreators(userActions, dispatch)
   }
 }
 
--- a/client/src/components/SessionSummary.js	Thu Jul 20 11:23:08 2017 +0200
+++ b/client/src/components/SessionSummary.js	Thu Jul 20 23:37:58 2017 +0200
@@ -1,32 +1,20 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import React from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import _ from 'lodash';
 import '../App.css';
 import {formatTimestamp} from '../utils';
 
-class SessionSummary extends Component {
-  render() {
-    return (
-      <ListGroup>
-        {this.props.notes.map((note) =>
-          <ListGroupItem key={note.get('_id')}>
-            <a href={'#note-' + note.get('_id')}>
-              <span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
-              <span className="pull-right">{_.words(note.plain).length} words</span>
-            </a>
-          </ListGroupItem>
-        )}
-      </ListGroup>
-    );
-  }
-}
+const SessionSummary = ({notes}) => (
+  <ListGroup>
+    {notes.map((note) =>
+      <ListGroupItem key={note.get('_id')}>
+        <a href={'#note-' + note.get('_id')}>
+          <span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
+          <span className="pull-right">{_.words(note.plain).length} words</span>
+        </a>
+      </ListGroupItem>
+    )}
+  </ListGroup>
+)
 
-function mapStateToProps(state, props) {
-    return {
-    ...props,
-    notes : props.notes.filter(note => !note.deleted)
-  };
-}
-
-export default connect(mapStateToProps)(SessionSummary);
+export default SessionSummary;