Add propTypes, fix cross-platform menu, refactor/rename some components

Author: Alex Lavrov

App.js

@@ -6,7 +6,7 @@ import Project from './containers/Project'
 import Note from './containers/Note'
 import { store } from './redux/store'
 
-const RootStack = createStackNavigator({
+const Navigator = createStackNavigator({
     Projects: {
       screen: Projects
     },
@@ -30,7 +30,7 @@ export default class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        <RootStack/>
+        <Navigator />
       </Provider>
     )
   }

components/Buttons.js

@@ -55,7 +55,7 @@ export class SaveButton extends PureComponent {
   }
 }
 
-export class MoreButton extends PureComponent {
+export class MenuButton extends PureComponent {
   render() {
     const { style, onPress } = this.props
     return (

components/NoteDetail.js

@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, TextInput, Keyboard, View } from 'react-native';
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, TextInput, View } from 'react-native'
 
 const styles = StyleSheet.create({
   note: {
@@ -15,36 +16,17 @@ const styles = StyleSheet.create({
 })
 
 export class NoteDetail extends PureComponent {
-  state = {
-    keyboardHeight: 0,
-  }
-
-  componentDidMount () {
-    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
-    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
-  }
-
-  componentWillUnmount () {
-    this.keyboardDidShowListener.remove();
-    this.keyboardDidHideListener.remove();
-  }
-
-  keyboardDidShow = e => {
-    this.setState({ keyboardHeight: e.endCoordinates.height })
-  }
-
-  keyboardDidHide = () => {
-    this.setState({ keyboardHeight: 0 })
+  static propTypes = {
+    noteText: PropTypes.string,
+    onChangeNoteText: PropTypes.func
   }
 
   render() {
     const { noteText, onChangeNoteText } = this.props
-    const { keyboardHeight } = this.state
-
     return (
       <View style={styles.note}>
         <TextInput
-          style={[styles.noteText, { paddingBottom: keyboardHeight } ]}
+          style={styles.noteText}
           multiline
           value={noteText}
           placeholder="Type note text here ..."

components/NoteList.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types'
+import { NoteType } from './propTypes'
 import { Alert, View, SwipeableFlatList } from 'react-native';
 import { NoteListItem } from './NoteListItem'
 import { RemoveButton } from './Buttons'
 import { MAX_SWIPE_DISTANCE } from "../constants";
 
 export class NoteList extends Component {
   static propTypes = {
-    notes: PropTypes.array,
+    notes: PropTypes.arrayOf(NoteType),
     onRemoveNote: PropTypes.func,
     onNavigateNote: PropTypes.func
   }
@@ -23,7 +24,7 @@ export class NoteList extends Component {
     )
   }
 
-  renderDeleteButton = ({ item }) => (
+  renderQuickActions = ({ item }) => (
     <View style={{ flex: 1, alignItems: 'flex-end' }}>
       <RemoveButton onPress={() => this.onRemoveNote(item.id)} />
     </View>
@@ -32,20 +33,21 @@ export class NoteList extends Component {
   renderItem = ({ item }) => {
     const { onNavigateNote } = this.props
     return (
-      <NoteListItem note={item} onNavigateNote={onNavigateNote} onRemoveNote={this.removeNote} />
+      <NoteListItem
+        note={item}
+        onNavigateNote={onNavigateNote}
+        onRemoveNote={this.onRemoveNote} />
     )
   }
 
   render() {
-    const { notes } = this.props
-
     return (
       <SwipeableFlatList
-        data={notes}
+        data={this.props.notes}
         bounceFirstRowOnMount={false}
         keyExtractor={item => item.id}
         maxSwipeDistance={MAX_SWIPE_DISTANCE}
-        renderQuickActions={this.renderDeleteButton}
+        renderQuickActions={this.renderQuickActions}
         renderItem={this.renderItem}
       />
     )

components/NoteListItem.js

@@ -1,7 +1,18 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types'
-import { StyleSheet, Image, Text, View, Platform, ActionSheetIOS, UIManager, findNodeHandle } from 'react-native';
-import { MoreButton } from './Buttons'
+import { NoteType } from './propTypes'
+import {
+  StyleSheet,
+  Image,
+  Text,
+  View,
+  Platform,
+  ActionSheetIOS,
+  UIManager,
+  findNodeHandle
+} from 'react-native';
+import { MenuButton } from './Buttons'
+import { MAX_NOTE_HEIGHT, NOTE_AVATAR_SIZE } from '../constants'
 
 const styles = StyleSheet.create({
   note: {
@@ -10,7 +21,7 @@ const styles = StyleSheet.create({
     borderColor: 'gray',
     paddingVertical: 20,
     paddingHorizontal: 15,
-    maxHeight: 150
+    maxHeight: MAX_NOTE_HEIGHT
   },
 
   title: {
@@ -20,9 +31,9 @@ const styles = StyleSheet.create({
   },
 
   avatar: {
-    width: 50,
-    height: 50,
-    borderRadius: 25
+    width: NOTE_AVATAR_SIZE,
+    height: NOTE_AVATAR_SIZE,
+    borderRadius: NOTE_AVATAR_SIZE / 2
   },
 
   info: {
@@ -46,13 +57,7 @@ const styles = StyleSheet.create({
 
 export class NoteListItem extends Component {
   static propTypes = {
-    note: PropTypes.shape({
-      userName: PropTypes.string,
-      avatar: PropTypes.any,
-      editTime: PropTypes.string,
-      text: PropTypes.string
-    }),
-
+    note: NoteType,
     onRemoveNote: PropTypes.func,
     onNavigateNote: PropTypes.func,
   }
@@ -67,22 +72,30 @@ export class NoteListItem extends Component {
     }
   }
 
-  showActionSheet = options => {
-    ActionSheetIOS.showActionSheetWithOptions({ options, destructiveButtonIndex: 1 }, this.onPressMenu)
+  showActionSheet = () => {
+    ActionSheetIOS.showActionSheetWithOptions({
+        options: [ 'Edit', 'Delete', 'Cancel' ],
+        destructiveButtonIndex: 1,
+        cancelButtonIndex: 2
+      },
+      this.onPressMenu
+    )
   }
 
-  showPopupMenu = options => {
+  showPopupMenu = () => {
     const button = findNodeHandle(this._buttonRef)
-    UIManager.showPopupMenu(button, options, (e) => console.error(e), (e, i) => this.onPressMenu(i))
+    UIManager.showPopupMenu(
+      button,
+      [ 'Edit', 'Delete' ],
+      e => console.error(e),
+      (e, i) => this.onPressMenu(i)
+    )
   }
 
   onOpenMenu = () => {
-    const options = [ 'Edit', 'Delete' ]
-
-    Platform.select({
-      ios: this.showActionSheet(options),
-      android: this.showPopupMenu(options)
-    })
+    Platform.OS === 'ios' ?
+      this.showActionSheet() :
+      this.showPopupMenu()
   }
 
   render() {
@@ -98,7 +111,11 @@ export class NoteListItem extends Component {
           </View>
         </View>
         <Text style={styles.name}>{text}</Text>
-        <MoreButton ref={ref => this._buttonRef = ref} style={styles.button} onPress={this.onOpenMenu} />
+        <MenuButton
+          style={styles.button}
+          ref={ref => this._buttonRef = ref}
+          onPress={this.onOpenMenu}
+        />
       </View>
     )
   }

components/ProjectList.js

@@ -1,37 +1,15 @@
 import React, { PureComponent } from 'react';
-import { StyleSheet, FlatList, TouchableOpacity, Text, View } from 'react-native';
+import PropTypes from 'prop-types'
+import { ProjectsType } from './propTypes'
+import { FlatList } from 'react-native';
+import { ProjectListItem } from './ProjectListItem'
 
-const styles = StyleSheet.create({
-  project: {
-    backgroundColor: 'white',
-    paddingVertical: 30,
-    paddingHorizontal: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: 'gray'
-  },
-  name: {
-    fontSize: 16
-  }
-})
-
-export class ProjectListItem extends PureComponent {
-  onPressProject = () => {
-    const { project, onPressProject } = this.props
-    onPressProject(project)
-  }
-
-  render() {
-    return (
-      <TouchableOpacity onPress={this.onPressProject}>
-        <View style={styles.project}>
-          <Text style={styles.name}>{this.props.project.name}</Text>
-        </View>
-      </TouchableOpacity>
-    )
+export class ProjectList extends PureComponent {
+  static propTypes = {
+    projects: ProjectsType,
+    onPressProject: PropTypes.func
   }
-}
 
-export class ProjectList extends PureComponent {
   renderItem = ({ item }) => (
     <ProjectListItem
       project={item}

components/ProjectListItem.js

@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { ProjectType } from './propTypes'
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
+
+const styles = StyleSheet.create({
+  project: {
+    paddingVertical: 30,
+    paddingHorizontal: 15,
+    backgroundColor: 'white',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: 'gray'
+  },
+  name: {
+    fontSize: 16
+  }
+})
+
+export class ProjectListItem extends PureComponent {
+  static propTypes = {
+    project: ProjectType,
+    onPressProject: PropTypes.func
+  }
+
+  onPressProject = () => {
+    const { project, onPressProject } = this.props
+    onPressProject(project)
+  }
+
+  render() {
+    return (
+      <TouchableOpacity onPress={this.onPressProject}>
+        <View style={styles.project}>
+          <Text style={styles.name}>{this.props.project.name}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}

components/propTypes.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types'
+
+export const NoteType = PropTypes.shape({
+  userName: PropTypes.string,
+  avatar: PropTypes.any,
+  editTime: PropTypes.string,
+  text: PropTypes.string
+})
+
+export const ProjectType = PropTypes.shape({
+  name: PropTypes.string,
+  notes: PropTypes.arrayOf(NoteType)
+})
+
+export const ProjectsType = PropTypes.arrayOf(ProjectType)

constants.js

@@ -1 +1,3 @@
-export const MAX_SWIPE_DISTANCE = 60
+export const MAX_SWIPE_DISTANCE = 60
+export const MAX_NOTE_HEIGHT = 150
+export const NOTE_AVATAR_SIZE = 50

containers/Project.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import shortid from 'shortid'
 import { NoteList } from '../components/NoteList'
 import { AddButton } from '../components/Buttons'
@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { actions } from '../redux/actions'
 
-export class Project extends Component {
+export class Project extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
     title: navigation.getParam('name', ''),
     headerRight: (