Introduces bottom menu redesign (Menu component)

components/menu/menu-item.js

@@ -1,36 +1,72 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Text, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
 
-import styles, { iconStyles, secondaryColor } from '../../styles'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import Icon from '../common/menu-icon'
 
-import { menuTitles } from '../../i18n/en/labels'
+import { connect } from 'react-redux'
+import { getNavigation, navigate } from '../../slices/navigation'
 
-const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
-  acc[curr] = menuTitles[curr].toLowerCase()
-  return acc
-}, {})
+import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles/redesign'
 
-export default function MenuItem({ active, icon, label, onPress }) {
-  const styleActive = active ? { color: secondaryColor } : null
+const MenuItem = ({ component, icon, label, navigate, navigation }) => {
+  const isActive = (component === navigation.currentPage)
+  const textStyle = isActive ? styles.menuTextActive : styles.menuText
+  const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
 
   return (
-    <TouchableOpacity style={styles.menuItem} onPress={onPress} >
-      <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
-      <Text
-        testID={active ? 'activeMenuItem' : `menuItem${label}`}
-        style={[styles.menuText, styleActive]}
-      >
-        {menuTitlesLowerCase[label]}
-      </Text>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={() => navigate(component)}
+    >
+      <Icon name={icon} isActive={isActive}/>
+      <Text testID={testID} style={textStyle} >{label}</Text>
     </TouchableOpacity>
   )
 }
 
 MenuItem.propTypes = {
-  active: PropTypes.bool,
+  component: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired
-}
+  navigation: PropTypes.object,
+  navigate: PropTypes.func,
+}
+
+const text = {
+  fontFamily: Fonts.bold,
+  fontSize: Sizes.small,
+  textTransform: 'uppercase'
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: Spacing.base,
+    ...Containers.centerItems
+  },
+  menuText: {
+    color: Colors.grey,
+    ...text
+  },
+  menuTextActive: {
+    color: Colors.orange,
+    ...text
+  }
+})
+
+const mapStateToProps = (state) => {
+  return({
+    navigation: getNavigation(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(MenuItem)