Chore/retire redux

components/menu/index.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
 
 import MenuItem from './menu-item'
 
 import { Containers } from '../../styles'
 import { pages } from '../pages'
 
-const Menu = () => {
+const Menu = ({ currentPage, navigate }) => {
   const menuItems = pages.filter((page) => page.isInMenu)
 
   return (
@@ -14,7 +15,8 @@ const Menu = () => {
       {menuItems.map(({ icon, label, component }) => {
         return (
           <MenuItem
-            component={component}
+            isActive={component === currentPage}
+            onPress={() => navigate(component)}
             icon={icon}
             key={label}
             label={label}
@@ -25,6 +27,11 @@ const Menu = () => {
   )
 }
 
+Menu.propTypes = {
+  currentPage: PropTypes.string,
+  navigate: PropTypes.func,
+}
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',

components/menu/menu-item.js

@@ -4,18 +4,14 @@ import { StyleSheet, Text, TouchableOpacity } from 'react-native'
 
 import Icon from '../common/menu-icon'
 
-import { connect } from 'react-redux'
-import { getNavigation, navigate } from '../../slices/navigation'
-
 import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'
 
-const MenuItem = ({ component, icon, label, navigate, navigation }) => {
-  const isActive = component === navigation.currentPage
+const MenuItem = ({ isActive, icon, label, onPress }) => {
   const textStyle = isActive ? styles.menuTextActive : styles.menuText
   const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
 
   return (
-    <TouchableOpacity style={styles.button} onPress={() => navigate(component)}>
+    <TouchableOpacity style={styles.button} onPress={onPress}>
       <Icon name={icon} isActive={isActive} />
       <Text testID={testID} style={textStyle}>
         {label}
@@ -25,11 +21,10 @@ const MenuItem = ({ component, icon, label, navigate, navigation }) => {
 }
 
 MenuItem.propTypes = {
-  component: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  navigation: PropTypes.object,
-  navigate: PropTypes.func,
+  onPress: PropTypes.func.isRequired,
 }
 
 const text = {
@@ -53,16 +48,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapStateToProps = (state) => {
-  return {
-    navigation: getNavigation(state),
-  }
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    navigate: (page) => dispatch(navigate(page)),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(MenuItem)
+export default MenuItem