Merge 92ade9a5a3
into c93e27bec0
This commit is contained in:
commit
962ac8e697
|
@ -8,15 +8,15 @@ jest.mock('@skolplattformen/hooks')
|
|||
|
||||
const defaultItemList = [
|
||||
{
|
||||
title: 'Måndag vecka 10',
|
||||
title: 'Måndag',
|
||||
description: 'Krämiga köttbullar',
|
||||
},
|
||||
{
|
||||
title: 'Tisdag vecka 10',
|
||||
title: 'Tisdag',
|
||||
description: 'Kryddig falukorv',
|
||||
},
|
||||
{
|
||||
title: 'Onsdag vecka 10',
|
||||
title: 'Onsdag',
|
||||
description: 'Sushi',
|
||||
},
|
||||
]
|
||||
|
@ -32,15 +32,15 @@ const setup = (itemList = defaultItemList) => {
|
|||
test('renders multiple days', () => {
|
||||
const screen = setup()
|
||||
|
||||
expect(screen.getByText('Måndag vecka 10')).toBeTruthy()
|
||||
expect(screen.getByText('Tisdag vecka 10')).toBeTruthy()
|
||||
expect(screen.getByText('Onsdag vecka 10')).toBeTruthy()
|
||||
expect(screen.getByText('Måndag')).toBeTruthy()
|
||||
expect(screen.getByText('Tisdag')).toBeTruthy()
|
||||
expect(screen.getByText('Onsdag')).toBeTruthy()
|
||||
})
|
||||
|
||||
test('renders title and description', () => {
|
||||
const screen = setup()
|
||||
|
||||
expect(screen.getByText('Måndag vecka 10')).toBeTruthy()
|
||||
expect(screen.getByText('Måndag')).toBeTruthy()
|
||||
expect(screen.getByText('Krämiga köttbullar')).toBeTruthy()
|
||||
})
|
||||
|
||||
|
|
|
@ -25,33 +25,42 @@ export const Menu = () => {
|
|||
const styles = useStyleSheet(themedStyles)
|
||||
const child = useChild()
|
||||
const { data, status, reload } = useMenu(child)
|
||||
const weekNr = data[0]?.title.split('Vecka')[1] ?? ''
|
||||
|
||||
return (
|
||||
<List
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
data={data}
|
||||
ItemSeparatorComponent={Divider}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<Text category="h4">{translate('menu.emptyHeadline')}</Text>
|
||||
<Text style={styles.emptyStateDescription}>
|
||||
{translate('menu.emptyText')}
|
||||
</Text>
|
||||
<Image
|
||||
accessibilityIgnoresInvertColors={false}
|
||||
source={require('../assets/children.png')}
|
||||
style={styles.emptyStateImage as ImageStyle}
|
||||
<>
|
||||
<Text category="h5" style={styles.listHeader}>
|
||||
{`${translate('menu.week')} ${weekNr}`}
|
||||
</Text>
|
||||
<List
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
data={data}
|
||||
ItemSeparatorComponent={Divider}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<Text category="h4">{translate('menu.emptyHeadline')}</Text>
|
||||
<Text style={styles.emptyStateDescription}>
|
||||
{translate('menu.emptyText')}
|
||||
</Text>
|
||||
<Image
|
||||
accessibilityIgnoresInvertColors={false}
|
||||
source={require('../assets/children.png')}
|
||||
style={styles.emptyStateImage as ImageStyle}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }: ListRenderItemInfo<MenuItem>) => (
|
||||
<MenuListItem key={item.title} item={item} />
|
||||
)}
|
||||
style={styles.container}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={status === 'loading'}
|
||||
onRefresh={reload}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }: ListRenderItemInfo<MenuItem>) => (
|
||||
<MenuListItem key={item.title} item={item} />
|
||||
)}
|
||||
style={styles.container}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={status === 'loading'} onRefresh={reload} />
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -81,4 +90,8 @@ const themedStyles = StyleService.create({
|
|||
...Sizing.aspectRatio(0.8),
|
||||
marginTop: 50,
|
||||
},
|
||||
listHeader: {
|
||||
paddingTop: 10,
|
||||
paddingLeft: 15,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -3,6 +3,7 @@ import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
|
|||
import React from 'react'
|
||||
import { View } from 'react-native'
|
||||
import { Sizing, Typography } from '../styles'
|
||||
import { translate } from '../utils/translation'
|
||||
|
||||
interface MenuListItemProps {
|
||||
item: MenuItem
|
||||
|
@ -10,9 +11,10 @@ interface MenuListItemProps {
|
|||
|
||||
export const MenuListItem = ({ item }: MenuListItemProps) => {
|
||||
const styles = useStyleSheet(themedStyles)
|
||||
const day = item.title.split(' ')[0]
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
<Text style={styles.title}>{translate(`menu.${day}`)}</Text>
|
||||
<Text category="p1">{item.description}</Text>
|
||||
</View>
|
||||
)
|
||||
|
|
|
@ -96,6 +96,12 @@
|
|||
"changeLanguageButton": "Save"
|
||||
},
|
||||
"menu": {
|
||||
"Måndag":"Monday",
|
||||
"Tisdag": "Tuesday",
|
||||
"Onsdag": "Wednesday",
|
||||
"Torsdag": "Thursday",
|
||||
"Fredag": "Friday",
|
||||
"week": "Week",
|
||||
"emptyHeadline": "The lunch menu looks kinda empty",
|
||||
"emptyText": "Couldn't find anything for this week"
|
||||
},
|
||||
|
|
|
@ -96,6 +96,12 @@
|
|||
"changeLanguageButton": "Spara"
|
||||
},
|
||||
"menu": {
|
||||
"Måndag":"Måndag",
|
||||
"Tisdag": "Tisdag",
|
||||
"Onsdag": "Onsdag",
|
||||
"Torsdag": "Torsdag",
|
||||
"Fredag": "Fredag",
|
||||
"week": "Vecka",
|
||||
"emptyHeadline": "Det ser lite tomt ut i matsedeln",
|
||||
"emptyText": "Hittade ingenting att visa för den här veckan"
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue