Chore/retire redux

components/header/hamburger-menu.js

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
+import PropTypes from 'prop-types'
 
 import AppIcon from '../common/app-icon'
 import CloseIcon from '../common/close-icon'
@@ -39,7 +40,7 @@ export default class HamburgerMenu extends Component {
     const { shouldShowMenu } = this.state
 
     return (
-      <React.Fragment>
+      <>
         {!shouldShowMenu && (
           <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
             <AppIcon name="dots-three-vertical" color={Colors.orange} />
@@ -65,16 +66,21 @@ export default class HamburgerMenu extends Component {
                   item={item}
                   key={item.name}
                   closeMenu={this.toggleMenu}
+                  navigate={this.props.navigate}
                 />
               ))}
             </View>
           </Modal>
         )}
-      </React.Fragment>
+      </>
     )
   }
 }
 
+HamburgerMenu.propTypes = {
+  navigate: PropTypes.func,
+}
+
 const styles = StyleSheet.create({
   blackBackground: {
     backgroundColor: 'black',

components/header/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import PropTypes from 'prop-types'
 
 import Logo from './logo'
@@ -7,21 +7,30 @@ import HamburgerMenu from './hamburger-menu'
 
 import { Colors, Containers, Sizes } from '../../styles'
 
-const Header = ({ isSideMenuEnabled }) => {
+const Header = ({ isStatic, navigate }) => {
   return (
     <View style={styles.header}>
-      <Logo />
-      {isSideMenuEnabled && <HamburgerMenu />}
+      {isStatic ? (
+        <Logo />
+      ) : (
+        <>
+          <TouchableOpacity onPress={() => navigate('Home')}>
+            <Logo />
+          </TouchableOpacity>
+          <HamburgerMenu navigate={navigate} />
+        </>
+      )}
     </View>
   )
 }
 
 Header.propTypes = {
-  isSideMenuEnabled: PropTypes.bool,
+  isStatic: PropTypes.bool,
+  navigate: PropTypes.func,
 }
 
 Header.defaultProps = {
-  isSideMenuEnabled: true,
+  isStatic: false,
 }
 
 const styles = StyleSheet.create({

components/header/logo.js

@@ -1,24 +1,12 @@
 import React from 'react'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
 import { Colors, Fonts, Sizes } from '../../styles'
 
-const Logo = ({ navigate }) => {
-  return (
-    <TouchableOpacity onPress={() => navigate('Home')}>
-      <AppText style={styles.logo}>drip.</AppText>
-    </TouchableOpacity>
-  )
-}
-
-Logo.propTypes = {
-  navigate: PropTypes.func.isRequired,
+const Logo = () => {
+  return <AppText style={styles.logo}>drip.</AppText>
 }
 
 const styles = StyleSheet.create({
@@ -29,10 +17,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    navigate: (page) => dispatch(navigate(page)),
-  }
-}
-
-export default connect(null, mapDispatchToProps)(Logo)
+export default Logo

components/header/menu-item.js

@@ -4,9 +4,6 @@ import PropTypes from 'prop-types'
 
 import AppText from '../common/app-text'
 
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
 import { Typography } from '../../styles'
 
 const MenuItem = ({ item, navigate, closeMenu }) => {
@@ -35,10 +32,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    navigate: (page) => dispatch(navigate(page)),
-  }
-}
-
-export default connect(null, mapDispatchToProps)(MenuItem)
+export default MenuItem