Moves Logo component to separate file

components/header/index.js

@@ -1,21 +1,12 @@
 import React, { Component } from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
-import PropTypes from 'prop-types'
 
-import AppText from '../common/app-text'
+import Logo from './logo'
 import SideMenu from './side-menu'
 
-import { connect } from 'react-redux'
+import { Colors, Containers, Sizes } from '../../styles/redesign'
-import { navigate } from '../../slices/navigation'
-
-import { Colors, Containers, Fonts, Sizes } from '../../styles/redesign'
-
-class Header extends Component {
-
-  static propTypes = {
-    navigate: PropTypes.func.isRequired
-  }
 
+export default class Header extends Component {
   constructor(props) {
     super(props)
 
@@ -31,48 +22,17 @@ class Header extends Component {
 
     return (
       <View style={styles.header}>
-        <DripIcon navigate={this.props.navigate}/>
+        <Logo />
-        <SideMenu
+        <SideMenu shouldShowMenu={shouldShowMenu} onPress={this.toggleMenu}/>
-          shouldShowMenu={shouldShowMenu}
-          onPress={this.toggleMenu}
-        />
       </View >
     )
   }
 }
 
-const DripIcon = ({ navigate }) => {
-  return(
-    <TouchableOpacity onPress={() => navigate('Home')}>
-      <AppText style={styles.icon}>drip.</AppText>
-    </TouchableOpacity>
-  )
-}
-
-DripIcon.propTypes = {
-  navigate: PropTypes.func.isRequired
-}
-
 const styles = StyleSheet.create({
   header: {
     backgroundColor: Colors.purple,
     padding: Sizes.base,
     ...Containers.rowContainer
-  },
-  icon: {
-    color: Colors.tourquiseDark,
-    fontFamily: Fonts.bold,
-    fontSize: Sizes.title
   }
 })
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(Header)

components/header/logo.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Colors, Fonts, Sizes } from '../../styles/redesign'
+
+const Logo = ({ navigate }) => {
+  return(
+    <TouchableOpacity onPress={() => navigate('Home')}>
+      <AppText style={styles.logo}>drip.</AppText>
+    </TouchableOpacity>
+  )
+}
+
+Logo.propTypes = {
+  navigate: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  logo: {
+    color: Colors.tourquiseDark,
+    fontFamily: Fonts.bold,
+    fontSize: Sizes.title
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Logo)