show dates correctly

packages/app/components/calendar.component.js

@@ -2,6 +2,16 @@ import React from 'react'
 import { StyleSheet, Image, View } from 'react-native'
 import { Divider, List, ListItem, Icon, Text, Layout } from '@ui-kitten/components'
 import { DateTime } from 'luxon'
+import moment from 'moment'
+import 'moment/locale/sv'
+
+moment.locale('sv')
+
+// is not as versatile as moment.calendar()
+const displayDate = (date) => DateTime
+.fromISO(date)
+.toRelative({ locale: 'sv', style: 'long' })
+
 
 export const Calendar = ({ calendar }) => {
   const renderItemIcon = (startDate, endDate) =>
@@ -10,7 +20,7 @@ export const Calendar = ({ calendar }) => {
   const renderItem = ({ item }) => (
     <ListItem
       title={`${item.title}`}
-      description={`${item.startDate}`}
+      description={`${moment(item.startDate).calendar()}`}
       accessoryLeft={renderItemIcon(item.startDate, item.endDate)}
     />
   )

packages/app/components/child.component.js

@@ -117,7 +117,7 @@ export const Child = ({ route, navigation }) => {
             <NotificationsList notifications={notifications} status={notificationsStatus} />
           </Layout>
         </Tab>
-        <Tab title="Schema" icon={CalendarIcon}>
+        <Tab title="Kalender" icon={CalendarIcon}>
           <Layout style={styles.tabContainer}>
             <Calendar calendar={[...calendar ?? [], ...schedule ?? []]}></Calendar>
           </Layout>

packages/app/components/childListItem.component.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { StyleSheet, View, Image, SafeAreaView } from 'react-native'
 import { DateTime } from 'luxon'
+import moment from 'moment'
 import { useNotifications, useNews, useClassmates, useCalendar, useMenu, useSchedule } from '@skolplattformen/react-native-embedded-api'
 import { Button, Icon, Text, Card, Avatar } from '@ui-kitten/components'
 
@@ -109,15 +110,15 @@ export const ChildListItem = ({ navigation, child, color }) => {
       footer={Footer}
       onPress={() => navigation.navigate('Child', { child, color })}
     >
-      {([calendar ?? [], schedule ?? []].filter(a => a.startDate?.isSame('day'))).map((calendarItem, i) =>
+      {([...(calendar ?? []), ...(schedule ?? [])].filter(a => moment(a.startDate).isSame('week')).slice(0, 3).map((calendarItem, i) =>
         <Text appearance='hint' category='c1' key={i} style={{ textColor: styles.loaded(notificationsStatus) }}>
           {`${calendarItem.title}`}
         </Text>
-      )}
+      ))}
 
-      {menu.map((day, i) =>
+      {notifications.filter(n => moment(n).isSame('week')).map((notification, i) =>
         <Text appearance='hint' category='c1' key={i}>
-          {`${day.title.split('-')[0]} - ${day.description.split('<br/>').join(' ')}`}
+          {`${notification.message}`}
         </Text>
       )}
     </Card>