Add new note on Note screen

Author: alexslavr

containers/Note.js

@@ -1,3 +1,4 @@
+import shortId from 'shortid'
 import React, { PureComponent } from 'react';
 import { Keyboard } from 'react-native'
 import { NoteDetail } from '../components/NoteDetail'
@@ -8,9 +9,8 @@ import { actions } from '../redux/actions'
 
 export class Note extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
-    title: navigation.getParam('name', ''),
     headerRight: (
-      <SaveButton onPress={navigation.getParam('onSaveButtonPress')} />
+      <SaveButton onPress={navigation.getParam('onSaveNote')} />
     )
   })
 
@@ -19,25 +19,33 @@ export class Note extends PureComponent {
   }
 
   componentDidMount() {
-    this.props.navigation.setParams({ onSaveButtonPress: this.onSaveNote })
+    this.props.navigation.setParams({ onSaveNote: this.onSaveNote })
   }
 
   onSaveNote = () => {
-    const { projectId, note, editNote } = this.props
+    Keyboard.dismiss()
+
+    const { projectId, noteId, note, navigation, addNote, editNote } = this.props
     const { noteText } = this.state
 
-    if (noteText && noteText !== note.text) {
-      editNote(projectId, note.id, noteText)
+    if (!noteId) {
+      const newNoteId = shortId.generate()
+      navigation.setParams({ noteId: newNoteId })
+      addNote(projectId, newNoteId, noteText)
+    } else if (noteText && noteText !== note.text) {
+      editNote(projectId, noteId, noteText)
     }
-    Keyboard.dismiss()
   }
 
   onChangeNote = noteText => {
     this.setState({ noteText })
   }
 
   render() {
-    const noteText = this.state.noteText || this.props.note.text
+    const initialTextValue = this.props.note ?
+      this.props.note.text : ''
+    const noteText = this.state.noteText || initialTextValue
+
     return (
       <NoteDetail
         noteText={noteText}
@@ -48,9 +56,16 @@ export class Note extends PureComponent {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const { noteId, projectId } = ownProps.navigation.state.params
-  const project = state.projects.find(project => project.id === projectId)
-  const note = project.notes.find(note => note.id === noteId)
+  const projectId = ownProps.navigation.getParam('projectId')
+  const noteId = ownProps.navigation.getParam('noteId', null)
+
+  const project = projectId ?
+    state.projects.find(project => project.id === projectId) :
+    null
+
+  const note = project ?
+    project.notes.find(note => note.id === noteId) :
+    null
 
   return {
     noteId,

containers/Project.js

@@ -8,16 +8,16 @@ import { bindActionCreators } from 'redux'
 import { actions } from '../redux/actions'
 
 export class Project extends PureComponent {
-  static navigationOptions = ({ navigation }) => ({
-    title: navigation.getParam('name', ''),
-    headerRight: (
-      <AddButton onPress={navigation.getParam('onRightButtonPress')} />
-    )
-  })
-
-  addNote = () => {
-    const { projectId, addNote } = this.props
-    addNote(projectId, shortid.generate())
+  static navigationOptions = ({ navigation }) => {
+    const projectId = navigation.getParam('projectId')
+    return {
+      title: navigation.getParam('name', ''),
+      headerRight: (
+        <AddButton
+          onPress={() => navigation.navigate('Note', { projectId })}
+        />
+      )
+    }
   }
 
   removeNote = noteId => {
@@ -36,14 +36,10 @@ export class Project extends PureComponent {
     this.props.addProject(newProjectId, name)
   }
 
-  componentDidMount() {
-    this.props.navigation.setParams({ onRightButtonPress: this.addNote })
-  }
-
   render() {
     const { projectId, project } = this.props
 
-    if (!projectId || !project) {
+    if (!projectId) {
       return (
         <ProjectNameInput
           onSubmitEditing={this.createProject}
@@ -63,11 +59,9 @@ export class Project extends PureComponent {
 
 const mapStateToProps = (state, ownProps) => {
   const projectId = ownProps.navigation.getParam('projectId', null)
-  let project = null
-
-  if (projectId) {
-    project = state.projects.find(project => projectId === project.id)
-  }
+  const project = projectId ?
+    state.projects.find(project => projectId === project.id) :
+    null
 
   return {
     projectId,

containers/Projects.js

@@ -8,31 +8,22 @@ import { actions } from '../redux/actions'
 export class Projects extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
     headerRight: (
-      <AddButton
-        onPress={navigation.getParam('onHeaderButtonPress')}
-      />
+      <AddButton onPress={() => navigation.navigate('Project')} />
     )
   })
 
-  componentDidMount() {
-    this.props.navigation.setParams({
-      onHeaderButtonPress: this.navigateNewProject
+  navigateProject = project => {
+    this.props.navigation.navigate('Project', {
+      projectId: project.id,
+      name: project.name
     })
   }
 
-  navigateNewProject = () => {
-    this.props.navigation.navigate('Project')
-  }
-
-  navigateExistingProject = (project) => {
-    this.props.navigation.navigate('Project', { projectId: project.id, name: project.name })
-  }
-
   render() {
     return (
       <ProjectList
         projects={this.props.projects}
-        onPressProject={this.navigateExistingProject}
+        onPressProject={this.navigateProject}
       />
     )
   }