Post-review updates

components/header/hamburger-menu.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react'
+import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+
+import AppIcon from '../common/app-icon'
+import MenuItem from './menu-item'
+
+import { Colors, Sizes } from '../../styles/redesign'
+import settingsLabels from '../../i18n/en/settings'
+
+const { menuItems } = settingsLabels
+
+const settingsMenuItems = [
+  { name: menuItems.settings, component: 'SettingsMenu' },
+  { name: menuItems.about, component: 'About' },
+  { name: menuItems.license, component: 'License' },
+]
+
+export default class HamburgerMenu extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = { shouldShowMenu: false }
+  }
+
+  toggleMenu = () => {
+    this.setState({ shouldShowMenu: !this.state.shouldShowMenu})
+  }
+
+  render() {
+    const { shouldShowMenu } = this.state
+
+    return(
+      <React.Fragment>
+        {!shouldShowMenu &&
+          <TouchableOpacity onPress={this.toggleMenu}>
+            <AppIcon name='dots-three-vertical' color={Colors.orange}/>
+          </TouchableOpacity>
+        }
+        {shouldShowMenu &&
+          <Modal
+            animationType='fade'
+            onRequestClose={this.toggleMenu}
+            transparent={true}
+            visible={shouldShowMenu}
+          >
+            <TouchableOpacity
+              onPress={this.toggleMenu}
+              style={styles.blackBackground}
+            >
+            </TouchableOpacity>
+            <View style={styles.menu}>
+              <TouchableOpacity
+                onPress={this.toggleMenu}
+                style={styles.iconContainer}
+              >
+                <AppIcon name='cross' color='black'/>
+              </TouchableOpacity>
+              {settingsMenuItems.map(item =>
+                <MenuItem
+                  item={item}
+                  key={item.name}
+                  closeMenu={this.toggleMenu}
+                />
+              )}
+            </View>
+          </Modal>
+        }
+      </React.Fragment>
+    )
+  }
+
+}
+
+const styles = StyleSheet.create({
+  blackBackground: {
+    backgroundColor: 'black',
+    flex: 1,
+    opacity: 0.65,
+  },
+  iconContainer: {
+    alignSelf: 'flex-end',
+    marginBottom: Sizes.base
+  },
+  menu: {
+    alignSelf: 'flex-end',
+    backgroundColor: 'white',
+    height: '100%',
+    padding: Sizes.base,
+    position: 'absolute',
+    width: '60%'
+  }
+})

components/header/index.js

@@ -1,43 +1,24 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import Logo from './logo'
-import SideMenu from './side-menu'
+import HamburgerMenu from './hamburger-menu'
 
 import { Colors, Containers, Sizes } from '../../styles/redesign'
 
-export default class Header extends Component {
-  static propTypes = {
-    isSideMenuEnabled: PropTypes.bool
-  }
+const Header = ({ isSideMenuEnabled }) => {
 
-  constructor(props) {
-    super(props)
+  return (
+    <View style={styles.header}>
+      <Logo />
+      {isSideMenuEnabled && <HamburgerMenu />}
+    </View >
+  )
+}
 
-    this.state = { shouldShowMenu: false }
-  }
-
-  toggleMenu = () => {
-    this.setState({ shouldShowMenu: !this.state.shouldShowMenu})
-  }
-
-  render() {
-    const { isSideMenuEnabled } = this.props
-    const { shouldShowMenu } = this.state
-
-    return (
-      <View style={styles.header}>
-        <Logo />
-        {isSideMenuEnabled &&
-          <SideMenu
-            shouldShowMenu={shouldShowMenu}
-            toggleMenu={this.toggleMenu}
-          />
-        }
-      </View >
-    )
-  }
+Header.propTypes = {
+  isSideMenuEnabled: PropTypes.bool
 }
 
 Header.defaultProps = {
@@ -50,4 +31,6 @@ const styles = StyleSheet.create({
     padding: Sizes.base,
     ...Containers.rowContainer
   }
-})
+})
+
+export default Header

components/header/side-menu.js

@@ -1,82 +0,0 @@
-import React from 'react'
-import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import AppIcon from '../common/app-icon'
-import MenuItem from './menu-item'
-
-import { Colors, Sizes } from '../../styles/redesign'
-import settingsLabels from '../../i18n/en/settings'
-
-const { menuItems } = settingsLabels
-
-const settingsMenuItems = [
-  { name: menuItems.settings, component: 'SettingsMenu' },
-  { name: menuItems.about, component: 'About' },
-  { name: menuItems.license, component: 'License' },
-]
-
-const SideMenu = ({ shouldShowMenu, toggleMenu }) => {
-  return(
-    <React.Fragment>
-      {!shouldShowMenu &&
-        <TouchableOpacity onPress={toggleMenu}>
-          <AppIcon name='dots-three-vertical' color={Colors.orange}/>
-        </TouchableOpacity>
-      }
-      {shouldShowMenu &&
-        <Modal
-          animationType='fade'
-          onRequestClose={toggleMenu}
-          transparent={true}
-          visible={shouldShowMenu}
-        >
-          <TouchableOpacity
-            onPress={toggleMenu}
-            style={styles.blackBackground}
-          >
-          </TouchableOpacity>
-          <View style={styles.menu}>
-            <TouchableOpacity onPress={toggleMenu} style={styles.iconContainer}>
-              <AppIcon name='cross' color='black'/>
-            </TouchableOpacity>
-            {settingsMenuItems.map(item =>
-              <MenuItem
-                item={item}
-                key={item.name}
-                closeMenu={toggleMenu}
-              />
-            )}
-          </View>
-        </Modal>
-      }
-    </React.Fragment>
-  )
-}
-
-SideMenu.propTypes = {
-  shouldShowMenu: PropTypes.bool.isRequired,
-  toggleMenu: PropTypes.func
-}
-
-const styles = StyleSheet.create({
-  blackBackground: {
-    backgroundColor: 'black',
-    flex: 1,
-    opacity: 0.65,
-  },
-  iconContainer: {
-    alignSelf: 'flex-end',
-    marginBottom: Sizes.base
-  },
-  menu: {
-    alignSelf: 'flex-end',
-    backgroundColor: 'white',
-    height: '100%',
-    padding: Sizes.base,
-    position: 'absolute',
-    width: '60%'
-  }
-})
-
-export default SideMenu