Merge branch 'chore/batch-prettify' into 'main'

Chore/batch prettify

See merge request bloodyhealth/drip!501
This commit is contained in:
Lisa
2022-09-04 13:57:01 +00:00
36 changed files with 222 additions and 229 deletions
+9 -7
View File
@@ -23,14 +23,16 @@ export default function License({ setLicense }) {
return (
<AppPage testID="licensePage">
<Segment last testID="test" title={t("settings.license.title")}>
<AppText testID="test">{t("settings.license.text", { currentYear })}</AppText>
<Segment last testID="test" title={t('settings.license.title')}>
<AppText testID="test">
{t('settings.license.text', { currentYear })}
</AppText>
<View style={styles.container}>
<Button onPress={BackHandler.exitApp} testID="licenseCancelButton">
{t("labels.shared.cancel")}
{t('labels.shared.cancel')}
</Button>
<Button isCTA onPress={onAcceptLicense} testID="licenseOkButton">
{t("labels.shared.ok")}
{t('labels.shared.ok')}
</Button>
</View>
</Segment>
@@ -39,11 +41,11 @@ export default function License({ setLicense }) {
}
License.propTypes = {
setLicense: PropTypes.func.isRequired
setLicense: PropTypes.func.isRequired,
}
const styles = StyleSheet.create({
container: {
...Containers.rowContainer
}
...Containers.rowContainer,
},
})
+4 -4
View File
@@ -18,21 +18,21 @@ const ChartLegend = ({ height }) => {
}
ChartLegend.propTypes = {
height: PropTypes.number.isRequired
height: PropTypes.number.isRequired,
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'flex-end',
width: CHART_YAXIS_WIDTH
width: CHART_YAXIS_WIDTH,
},
text: {
...Typography.label,
},
textBold: {
...Typography.labelBold
}
...Typography.labelBold,
},
})
export default ChartLegend
+9 -8
View File
@@ -5,18 +5,19 @@ import { StyleSheet, View } from 'react-native'
import { getTickPositions } from '../helpers/chart'
import { Colors } from '../../styles'
import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
import {
CHART_GRID_LINE_HORIZONTAL_WIDTH,
CHART_YAXIS_WIDTH,
} from '../../config'
const HorizontalGrid = ({ height }) => {
return getTickPositions(height).map(tick => {
return (
<View key={tick} top={tick} {...styles.line}/>
)
return getTickPositions(height).map((tick) => {
return <View key={tick} top={tick} {...styles.line} />
})
}
HorizontalGrid.propTypes = {
height: PropTypes.number
height: PropTypes.number,
}
const styles = StyleSheet.create({
@@ -26,8 +27,8 @@ const styles = StyleSheet.create({
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
left: CHART_YAXIS_WIDTH,
position: 'absolute',
right: 0
}
right: 0,
},
})
export default HorizontalGrid
+12 -15
View File
@@ -6,7 +6,7 @@ import { Colors, Containers } from '../../styles'
import {
CHART_COLUMN_WIDTH,
CHART_DOT_RADIUS,
CHART_GRID_LINE_HORIZONTAL_WIDTH
CHART_GRID_LINE_HORIZONTAL_WIDTH,
} from '../../config'
const SymptomCell = ({
@@ -14,11 +14,11 @@ const SymptomCell = ({
index,
symptom,
symptomValue,
isSymptomDataComplete
isSymptomDataComplete,
}) => {
const shouldDrawDot = symptomValue !== false
const styleCell = index !== 0
const styleCell =
index !== 0
? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
: [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
let styleDot
@@ -26,10 +26,10 @@ const SymptomCell = ({
if (shouldDrawDot) {
const styleSymptom = Colors.iconColors[symptom]
const symptomColor = styleSymptom.shades[symptomValue]
const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
'white' : symptomColor
const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
const isMucusOrCervix = symptom === 'mucus' || symptom === 'cervix'
const backgroundColor =
isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
const borderColor = symptomColor
styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
}
@@ -45,10 +45,7 @@ SymptomCell.propTypes = {
height: PropTypes.number,
index: PropTypes.number.isRequired,
symptom: PropTypes.string,
symptomValue: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
]),
symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
isSymptomDataComplete: PropTypes.bool,
}
@@ -59,7 +56,7 @@ const styles = StyleSheet.create({
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
borderLeftColor: Colors.grey,
borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
...Containers.centerItems
...Containers.centerItems,
},
topBorder: {
borderTopColor: Colors.grey,
@@ -68,7 +65,7 @@ const styles = StyleSheet.create({
dot: {
width: CHART_DOT_RADIUS * 2,
height: CHART_DOT_RADIUS * 2,
borderRadius: 50
}
borderRadius: 50,
},
})
export default SymptomCell
+2 -2
View File
@@ -26,8 +26,8 @@ SymptomIcon.propTypes = {
const styles = StyleSheet.create({
container: {
...Containers.centerItems
}
...Containers.centerItems,
},
})
export default SymptomIcon
+5 -7
View File
@@ -7,12 +7,10 @@ import Tick from './tick'
import { getTickList } from '../helpers/chart'
const TickList = ({ height }) => {
return (
<View style={[styles.container, height]}>
{
getTickList(height)
.map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
{getTickList(height).map(
({ isBold, label, position, shouldShowLabel, tickHeight }) => {
return (
<Tick
height={tickHeight}
@@ -23,8 +21,8 @@ const TickList = ({ height }) => {
yPosition={position}
/>
)
})
}
)}
</View>
)
}
@@ -35,8 +33,8 @@ TickList.propTypes = {
const styles = StyleSheet.create({
container: {
flex: 1
}
flex: 1,
},
})
export default TickList
+4 -5
View File
@@ -27,7 +27,6 @@ Tick.propTypes = {
label: PropTypes.string,
}
const text = {
textAlign: 'right',
}
@@ -36,17 +35,17 @@ const styles = StyleSheet.create({
justifyContent: 'center',
position: 'absolute',
right: 0,
width: CHART_TICK_WIDTH
width: CHART_TICK_WIDTH,
},
textBold: {
fontSize: Sizes.base,
fontWeight: 'bold',
...text
...text,
},
textNormal: {
fontSize: Sizes.small,
...text
}
...text,
},
})
export default Tick
+6 -6
View File
@@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png')
const Tutorial = ({ onClose }) => {
return (
<View style={styles.container}>
<Image resizeMode='contain' source={image} style={styles.image} />
<Image resizeMode="contain" source={image} style={styles.image} />
<View style={styles.textContainer}>
<AppText>{chart.tutorial}</AppText>
</View>
@@ -23,20 +23,20 @@ const Tutorial = ({ onClose }) => {
}
Tutorial.propTypes = {
onClose: PropTypes.func.isRequired
onClose: PropTypes.func.isRequired,
}
const styles = StyleSheet.create({
container: {
...Containers.rowContainer,
padding: Spacing.large
padding: Spacing.large,
},
image: {
height: 40
height: 40,
},
textContainer: {
width: '70%'
}
width: '70%',
},
})
export default Tutorial
+6 -7
View File
@@ -13,7 +13,7 @@ const YAxis = ({
symptomsToDisplay,
symptomsSectionHeight,
shouldShowTemperatureColumn,
xAxisHeight
xAxisHeight,
}) => {
const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
@@ -22,14 +22,13 @@ const YAxis = ({
{shouldShowTemperatureColumn && <TickList height={height} />}
<ChartLegend height={xAxisHeight} />
<View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
{symptomsToDisplay.map(symptom => (
{symptomsToDisplay.map((symptom) => (
<SymptomIcon
key={symptom}
symptom={symptom}
height={symptomIconHeight}
/>
)
)}
))}
</View>
</View>
)
@@ -40,13 +39,13 @@ YAxis.propTypes = {
symptomsToDisplay: PropTypes.array,
symptomsSectionHeight: PropTypes.number,
shouldShowTemperatureColumn: PropTypes.bool,
xAxisHeight: PropTypes.number.isRequired
xAxisHeight: PropTypes.number.isRequired,
}
const styles = StyleSheet.create({
yAxis: {
width: CHART_YAXIS_WIDTH
}
width: CHART_YAXIS_WIDTH,
},
})
export default YAxis
+4 -4
View File
@@ -14,17 +14,17 @@ const AppIcon = ({ color, name, style, ...props }) => {
AppIcon.propTypes = {
color: PropTypes.string,
name: PropTypes.string.isRequired,
style: PropTypes.object
style: PropTypes.object,
}
AppIcon.defaultProps = {
color: 'black'
color: 'black',
}
const styles = StyleSheet.create({
icon: {
fontSize: Sizes.subtitle
}
fontSize: Sizes.subtitle,
},
})
export default AppIcon
+2 -2
View File
@@ -17,8 +17,8 @@ const AppLoadingView = () => {
const styles = StyleSheet.create({
container: {
...Containers.centerItems
}
...Containers.centerItems,
},
})
export default AppLoadingView
+3 -3
View File
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
const AppModal = ({ children, onClose }) => {
return (
<Modal
animationType='fade'
animationType="fade"
onRequestClose={onClose}
transparent={true}
visible={true}
@@ -18,7 +18,7 @@ const AppModal = ({ children, onClose }) => {
AppModal.propTypes = {
children: PropTypes.node,
onClose: PropTypes.func
onClose: PropTypes.func,
}
const styles = StyleSheet.create({
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
backgroundColor: 'black',
flex: 1,
opacity: 0.5,
}
},
})
export default AppModal
+5 -5
View File
@@ -31,21 +31,21 @@ AppPage.propTypes = {
children: PropTypes.node,
contentContainerStyle: PropTypes.object,
scrollViewStyle: PropTypes.object,
title: PropTypes.string
title: PropTypes.string,
}
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.turquoiseLight,
flex: 1
flex: 1,
},
scrollView: {
backgroundColor: Colors.turquoiseLight,
flexGrow: 1
flexGrow: 1,
},
title: {
...Typography.title
}
...Typography.title,
},
})
export default AppPage
+1 -1
View File
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
statusBar: {
backgroundColor: Colors.purple,
height: STATUSBAR_HEIGHT,
}
},
})
export default AppStatusBar
+3 -3
View File
@@ -20,19 +20,19 @@ const AppSwitch = ({ onToggle, text, value }) => {
AppSwitch.propTypes = {
onToggle: PropTypes.func.isRequired,
text: PropTypes.string,
value: PropTypes.bool
value: PropTypes.bool,
}
const styles = StyleSheet.create({
container: {
...Containers.rowContainer
...Containers.rowContainer,
},
switch: {
flex: 1,
},
textContainer: {
flex: 4,
}
},
})
export default AppSwitch
+3 -3
View File
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
import { Colors, Spacing, Typography } from '../../styles'
const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
const behavior = isKeyboardOffset ? "padding" : "height"
const behavior = isKeyboardOffset ? 'padding' : 'height'
const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
return (
@@ -39,8 +39,8 @@ const styles = StyleSheet.create({
minWidth: '80%',
paddingHorizontal: Spacing.base,
paddingVertical: Spacing.tiny,
...Typography.mainText
}
...Typography.mainText,
},
})
export default AppTextInput
+2 -2
View File
@@ -26,8 +26,8 @@ AppText.propTypes = {
const styles = StyleSheet.create({
text: {
color: Colors.greyDark,
...Typography.mainText
}
...Typography.mainText,
},
})
export default AppText
+3 -3
View File
@@ -15,21 +15,21 @@ const CloseIcon = ({ onClose, color, ...props }) => {
style={styles.container}
{...props}
>
<AppIcon name='cross' color={color ? color : Colors.orange} />
<AppIcon name="cross" color={color ? color : Colors.orange} />
</TouchableOpacity>
)
}
CloseIcon.propTypes = {
onClose: PropTypes.func.isRequired,
color: PropTypes.string
color: PropTypes.string,
}
const styles = StyleSheet.create({
container: {
alignSelf: 'flex-start',
marginBottom: Sizes.base,
}
},
})
export default CloseIcon
+3 -3
View File
@@ -21,7 +21,7 @@ const Link = ({ children, style }) => {
Link.propTypes = {
children: PropTypes.node,
style: PropTypes.object
style: PropTypes.object,
}
const styles = StyleSheet.create({
@@ -29,11 +29,11 @@ const styles = StyleSheet.create({
color: Colors.purple,
textDecorationLine: 'underline',
...Typography.mainText,
}
},
})
function replaceUrlWithText(url) {
const link = Object.values(links).find(l => l.url === url)
const link = Object.values(links).find((l) => l.url === url)
return (link && link.text) || url
}
+1 -1
View File
@@ -15,7 +15,7 @@ const MenuIcon = ({ isActive, name }) => {
MenuIcon.propTypes = {
isActive: PropTypes.bool,
name: PropTypes.string.isRequired
name: PropTypes.string.isRequired,
}
export default MenuIcon
+1 -1
View File
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
},
title: {
...Typography.subtitle,
}
},
})
export default Segment
+8 -8
View File
@@ -7,13 +7,13 @@ import AppText from './app-text'
import { Sizes, Spacing, Typography } from '../../styles'
const Table = ({ tableContent }) => {
return (
tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
)
return tableContent.map((rowContent, i) => (
<Row key={i} rowContent={rowContent} />
))
}
Table.propTypes = {
tableContent: PropTypes.array.isRequired
tableContent: PropTypes.array.isRequired,
}
const Row = ({ rowContent }) => {
@@ -26,7 +26,7 @@ const Row = ({ rowContent }) => {
}
Row.propTypes = {
rowContent: PropTypes.array.isRequired
rowContent: PropTypes.array.isRequired,
}
const Cell = ({ content, isLeft }) => {
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
},
accentPurpleBig: {
...Typography.accentPurpleBig,
marginRight: Spacing.tiny
marginRight: Spacing.tiny,
},
cellLeft: {
alignItems: 'flex-end',
@@ -75,8 +75,8 @@ const styles = StyleSheet.create({
row: {
flexDirection: 'row',
marginBottom: Spacing.tiny,
marginLeft: Spacing.tiny
}
marginLeft: Spacing.tiny,
},
})
export default Table
+8 -8
View File
@@ -9,7 +9,7 @@ import { Colors, Containers } from '../../styles'
const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
return (
<View style={styles.container}>
{Object.keys(labels).map(key => {
{Object.keys(labels).map((key) => {
const isActive = optionsState[key]
const boxStyle = [styles.box, isActive && styles.boxActive]
const textStyle = [styles.text, isActive && styles.textActive]
@@ -31,25 +31,25 @@ const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
SelectBoxGroup.propTypes = {
labels: PropTypes.object.isRequired,
onSelect: PropTypes.func.isRequired,
optionsState: PropTypes.object.isRequired
optionsState: PropTypes.object.isRequired,
}
const styles = StyleSheet.create({
box: {
...Containers.box
...Containers.box,
},
boxActive: {
...Containers.boxActive
...Containers.boxActive,
},
container: {
...Containers.selectGroupContainer
...Containers.selectGroupContainer,
},
text: {
color: Colors.orange
color: Colors.orange,
},
textActive: {
color: 'white'
}
color: 'white',
},
})
export default SelectBoxGroup
+9 -11
View File
@@ -9,8 +9,7 @@ import { Colors, Containers } from '../../styles'
export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
return (
<View style={styles.container}>
{
buttons.map(({ label, value }, i) => {
{buttons.map(({ label, value }, i) => {
const isActive = value === activeButton
const boxStyle = [styles.box, isActive && styles.boxActive]
const textStyle = [styles.text, isActive && styles.textActive]
@@ -24,8 +23,7 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
<AppText style={textStyle}>{label}</AppText>
</TouchableOpacity>
)
})
}
})}
</View>
)
}
@@ -33,23 +31,23 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
SelectTabGroup.propTypes = {
activeButton: PropTypes.number,
buttons: PropTypes.array.isRequired,
onSelect: PropTypes.func.isRequired
onSelect: PropTypes.func.isRequired,
}
const styles = StyleSheet.create({
box: {
...Containers.box
...Containers.box,
},
boxActive: {
...Containers.boxActive
...Containers.boxActive,
},
container: {
...Containers.selectGroupContainer
...Containers.selectGroupContainer,
},
text: {
color: Colors.orange
color: Colors.orange,
},
textActive: {
color: 'white'
}
color: 'white',
},
})
+4 -5
View File
@@ -8,7 +8,6 @@ import HamburgerMenu from './hamburger-menu'
import { Colors, Containers, Sizes } from '../../styles'
const Header = ({ isSideMenuEnabled }) => {
return (
<View style={styles.header}>
<Logo />
@@ -18,19 +17,19 @@ const Header = ({ isSideMenuEnabled }) => {
}
Header.propTypes = {
isSideMenuEnabled: PropTypes.bool
isSideMenuEnabled: PropTypes.bool,
}
Header.defaultProps = {
isSideMenuEnabled: true
isSideMenuEnabled: true,
}
const styles = StyleSheet.create({
header: {
backgroundColor: Colors.purple,
padding: Sizes.base,
...Containers.rowContainer
}
...Containers.rowContainer,
},
})
export default Header
+5 -3
View File
@@ -1,5 +1,7 @@
import Toast from 'react-native-simple-toast'
export const showToast = (text) => Toast.show(
text, Toast.SHORT, ['RCTModalHostViewController', 'UIAlertController']
)
export const showToast = (text) =>
Toast.show(text, Toast.SHORT, [
'RCTModalHostViewController',
'UIAlertController',
])
+2 -2
View File
@@ -1,2 +1,2 @@
export const getLabelsList =
(categories) => categories.map((label, i) => ({ label, value: i }))
export const getLabelsList = (categories) =>
categories.map((label, i) => ({ label, value: i }))
+4 -3
View File
@@ -1,10 +1,11 @@
export default function (jsDate) {
const vals = [jsDate.getHours(), jsDate.getMinutes()]
return vals.map(val => {
return vals
.map((val) => {
if (parseInt(val) < 10) {
val = `0${val}`
}
return val
}).join(':')
})
.join(':')
}
+5 -5
View File
@@ -7,7 +7,7 @@ import { Containers } from '../../styles'
import { pages } from '../pages'
const Menu = () => {
const menuItems = pages.filter(page => page.isInMenu)
const menuItems = pages.filter((page) => page.isInMenu)
return (
<View style={styles.container}>
@@ -19,8 +19,8 @@ const Menu = () => {
key={label}
label={label}
/>
)}
)}
)
})}
</View>
)
}
@@ -28,8 +28,8 @@ const Menu = () => {
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
...Containers.rowContainer
}
...Containers.rowContainer,
},
})
export default Menu
+2 -6
View File
@@ -6,11 +6,7 @@ import styles from '../../../styles'
export default function PasswordField(props) {
return (
<AppTextInput
style={ styles.passwordField }
secureTextEntry
{...props}
/>
<AppTextInput style={styles.passwordField} secureTextEntry {...props} />
)
}
@@ -18,5 +14,5 @@ PasswordField.propTypes = {
placeholder: PropTypes.string,
value: PropTypes.string,
onChangeText: PropTypes.func,
autoFocus: PropTypes.bool
autoFocus: PropTypes.bool,
}
@@ -12,15 +12,17 @@ const SettingsButton = ({ children, style, secondary, ...props }) => {
styles.settingsButton,
secondary ? null : styles.settingsButtonAccent,
props.disabled ? styles.settingsButtonDisabled : null,
style
style,
]}
{...props}
>
<AppText style={
secondary ?
styles.settingsButtonSecondaryText :
styles.settingsButtonText
}>
<AppText
style={
secondary
? styles.settingsButtonSecondaryText
: styles.settingsButtonText
}
>
{children}
</AppText>
</TouchableOpacity>
@@ -32,7 +34,7 @@ SettingsButton.propTypes = {
disabled: PropTypes.bool,
onPress: PropTypes.func.isRequired,
secondary: PropTypes.bool,
style: PropTypes.object
style: PropTypes.object,
}
export default SettingsButton
+2 -2
View File
@@ -10,9 +10,9 @@ const License = () => {
const currentYear = new Date().getFullYear()
return (
<AppPage title={t("settings.license.title")}>
<AppPage title={t('settings.license.title')}>
<Segment last>
<AppText>{t("settings.license.text", { currentYear })}</AppText>
<AppText>{t('settings.license.text', { currentYear })}</AppText>
</Segment>
</AppPage>
)
@@ -17,14 +17,14 @@ const SliderLabel = ({
oneMarkerValue,
twoMarkerValue,
oneMarkerLeftPosition,
twoMarkerLeftPosition
twoMarkerLeftPosition,
}) => {
const minCoordinate = getMarkerCoordinate(oneMarkerLeftPosition)
const maxCoordinate = getMarkerCoordinate(twoMarkerLeftPosition)
const isMinNumber = Number.isFinite(oneMarkerLeftPosition) &&
Number.isFinite(oneMarkerValue)
const isMaxNumber = Number.isFinite(twoMarkerLeftPosition) &&
Number.isFinite(twoMarkerValue)
const isMinNumber =
Number.isFinite(oneMarkerLeftPosition) && Number.isFinite(oneMarkerValue)
const isMaxNumber =
Number.isFinite(twoMarkerLeftPosition) && Number.isFinite(twoMarkerValue)
const minStyle = [styles.label, { left: minCoordinate }]
const maxStyle = [styles.label, { left: maxCoordinate }]
@@ -40,15 +40,15 @@ SliderLabel.propTypes = {
oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
oneMarkerLeftPosition: PropTypes.number,
twoMarkerLeftPosition: PropTypes.number
twoMarkerLeftPosition: PropTypes.number,
}
const styles = StyleSheet.create({
label: {
fontFamily: Fonts.bold,
position: 'absolute',
marginTop: (-1) * Sizes.base
}
marginTop: -1 * Sizes.base,
},
})
export default SliderLabel
+3 -4
View File
@@ -10,18 +10,17 @@ const menu = [
{ ...menuItems.reminders, component: 'Reminders' },
{ ...menuItems.nfpSettings, component: 'NfpSettings' },
{ ...menuItems.dataManagement, component: 'DataManagement' },
{ ...menuItems.password, component: 'Password'}
{ ...menuItems.password, component: 'Password' },
]
const SettingsMenu = () => {
return (
<AppPage title={settingsLabels.title}>
{menu.map((menuItem, i) => {
const last = (menu.length === i + 1)
const last = menu.length === i + 1
return <MenuItem item={menuItem} key={i} last={last} />
}
)}
})}
</AppPage>
)
}