Chore/retire redux

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