Replace Component with PureComponent, add prop types, stylesheets

Author: alexslavr

components/NoteDetail.js

@@ -26,8 +26,8 @@ export class NoteDetail extends PureComponent {
     return (
       <View style={styles.note}>
         <TextInput
-          style={styles.noteText}
           multiline
+          style={styles.noteText}
           value={noteText}
           placeholder="Type note text here ..."
           underlineColorAndroid="transparent"

components/NoteList.js

@@ -1,12 +1,19 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types'
 import { NoteType } from './propTypes'
-import { Alert, View, SwipeableFlatList } from 'react-native';
+import { Alert, View, SwipeableFlatList, StyleSheet } from 'react-native';
 import { NoteListItem } from './NoteListItem'
 import { RemoveButton } from './Buttons'
 import { MAX_SWIPE_DISTANCE } from "../constants";
 
-export class NoteList extends Component {
+const styles = StyleSheet.create({
+  quickActions: {
+    flex: 1,
+    alignItems: 'flex-end'
+  }
+})
+
+export class NoteList extends PureComponent {
   static propTypes = {
     notes: PropTypes.arrayOf(NoteType),
     onRemoveNote: PropTypes.func,
@@ -25,7 +32,7 @@ export class NoteList extends Component {
   }
 
   renderQuickActions = ({ item }) => (
-    <View style={{ flex: 1, alignItems: 'flex-end' }}>
+    <View style={styles.quickActions}>
       <RemoveButton onPress={() => this.onRemoveNote(item.id)} />
     </View>
   )

components/NoteListItem.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types'
 import { NoteType } from './propTypes'
 import {
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   }
 })
 
-export class NoteListItem extends Component {
+export class NoteListItem extends PureComponent {
   static propTypes = {
     note: NoteType,
     onRemoveNote: PropTypes.func,

components/ProjectNameInput.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types'
 import { View, TextInput, StyleSheet } from 'react-native';
 
@@ -15,17 +15,24 @@ const styles = StyleSheet.create({
   }
 })
 
-export class ProjectNameInput extends Component {
+export class ProjectNameInput extends PureComponent {
+  static propTypes = {
+    onSubmitEditing: PropTypes.func
+  }
+
+  onSubmitEditing = e => {
+    this.props.onSubmitEditing(e.nativeEvent.text)
+  }
+
   render() {
-    const { onSubmitEditing } = this.props
     return (
       <View style={styles.container}>
         <TextInput
           autoFocus
           placeholder="Type project name here ..."
           placeholderTextColor="gray"
           underlineColorAndroid="transparent"
-          onSubmitEditing={e => onSubmitEditing(e.nativeEvent.text)} />
+          onSubmitEditing={this.onSubmitEditing} />
       </View>
     )
   }

containers/Project.js

@@ -44,7 +44,11 @@ export class Project extends PureComponent {
     const { projectId, project } = this.props
 
     if (!projectId || !project) {
-      return (<ProjectNameInput onSubmitEditing={this.createProject} />)
+      return (
+        <ProjectNameInput
+          onSubmitEditing={this.createProject}
+        />
+      )
     }
 
     return (
@@ -59,8 +63,8 @@ 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)
   }