Fix/menu format

apps/skolplattformen-app/components/__tests__/Menu.test.js

@@ -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()
 })
 

apps/skolplattformen-app/components/menu.component.tsx

@@ -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,
+  },
 })

apps/skolplattformen-app/components/menuListItem.component.tsx

@@ -3,16 +3,18 @@ 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
 }
 
 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>
   )

apps/skolplattformen-app/components/navigationTitle.component.tsx

@@ -19,7 +19,11 @@ export const NavigationTitle = ({ title, subtitle }: NavigationTitleProps) => {
           {title}
         </Text>
       )}
-      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      {subtitle && (
+        <Text style={styles.subtitle}>
+          {subtitle.substring(0, subtitle.indexOf(' '))}
+        </Text>
+      )}
     </View>
   )
 }
@@ -32,5 +36,5 @@ const styles = StyleSheet.create({
     ...fontSize.sm,
     fontWeight: '500',
   },
-  subtitle: { ...fontSize.xxs },
+  subtitle: { ...fontSize.base },
 })

apps/skolplattformen-app/translations/en.json

@@ -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"
     },

apps/skolplattformen-app/translations/sv.json

@@ -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"
     },