feat: added day summary on front page

packages/app/components/childListItem.component.tsx

@@ -22,6 +22,7 @@ import { studentName } from '../utils/peopleHelpers'
 import { translate } from '../utils/translation'
 import { RootStackParamList } from './navigation.component'
 import { StudentAvatar } from './studentAvatar.component'
+import { DaySummary } from './daySummary.component'
 
 interface ChildListItemProps {
   child: Child
@@ -94,6 +95,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
 
   const className = getClassName()
   const styles = useStyleSheet(themeStyles)
+  const date = moment()
 
   return (
     <TouchableOpacity
@@ -109,6 +111,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
             </View>
           </View>
         </View>
+        <DaySummary child={child} date={date} />
         {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
           <Text category="p1" key={i}>
             {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}

packages/app/components/daySummary.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useTimetable } from '@skolplattformen/api-hooks'
+import { Child } from '@skolplattformen/embedded-api'
+import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
+import moment, { Moment } from 'moment'
+import { View } from 'react-native'
+import { LanguageService } from '../services/languageService'
+import { translate } from '../utils/translation'
+
+interface DaySummaryProps {
+  child: Child
+  date: Moment
+}
+
+export const DaySummary = ({ child, date }: DaySummaryProps) => {
+  const styles = useStyleSheet(themedStyles)
+  const [year, week] = [moment().isoWeekYear(), moment().isoWeek()]
+  const { data: weekLessons } = useTimetable(
+    child,
+    week,
+    year,
+    LanguageService.getLanguageCode()
+  )
+
+  const lessons = weekLessons
+    .filter((lesson) => lesson.dayOfWeek === date.isoWeekday())
+    .sort((a, b) => a.dateStart.localeCompare(b.dateStart))
+
+  const gymBag = lessons.some((lesson) => lesson.code === 'IDH')
+
+  if (lessons.length <= 0) {
+    return null
+  }
+  return (
+    <View style={styles.summary}>
+      <Text category="h5">
+        {lessons[0].timeStart.slice(0, 5)}-
+        {lessons[lessons.length - 1].timeEnd.slice(0, 5)}
+        {gymBag
+          ? ` (🤼‍♀️ ${translate('schedule.gymBag', {
+              defaultValue: 'Gympapåse',
+            })})`
+          : ''}
+      </Text>
+    </View>
+  )
+}
+
+const themedStyles = StyleService.create({
+  summary: {
+    flexDirection: 'row',
+  },
+})