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