feat: day summary on front page

packages/app/README.md

@@ -1,4 +1,4 @@
-# Öppna Skolplattformen App
+# Öppna skolplattformen App
 
 This is the app for Öppna skolplattformen.
 

packages/app/components/child.component.tsx

@@ -120,7 +120,7 @@ export const Child = () => {
 
   return (
     <ChildProvider child={child}>
-      <TabNavigator initialRouteName={initialRouteName as any} />
+      <TabNavigator initialRouteName={child.firstName} />
     </ChildProvider>
   )
 }

packages/app/components/childListItem.component.tsx

@@ -10,6 +10,7 @@ import {
 import { Child } from '@skolplattformen/embedded-api'
 import {
   Button,
+  Icon,
   StyleService,
   Text,
   useStyleSheet,
@@ -17,11 +18,13 @@ import {
 import moment from 'moment'
 import React from 'react'
 import { TouchableOpacity, View } from 'react-native'
-import { Layout, Sizing } from '../styles'
+import { Colors, Layout, Sizing } from '../styles'
 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'
+import { RightArrowIcon } from './icon.component'
 
 interface ChildListItemProps {
   child: Child
@@ -108,7 +111,16 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
               {className ? <Text category="s1">{className}</Text> : null}
             </View>
           </View>
+          <View style={styles.cardHeaderRight}>
+            <RightArrowIcon
+              style={styles.icon}
+              fill={Colors.neutral.gray500}
+              name="star"
+            />
+          </View>
         </View>
+
+        <DaySummary child={child} />
         {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
           <Text category="p1" key={i}>
             {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
@@ -170,11 +182,20 @@ const themeStyles = StyleService.create({
   cardHeaderLeft: {
     ...Layout.flex.row,
     ...Layout.mainAxis.center,
+    flex: 10,
+  },
+  cardHeaderRight: {
+    ...Layout.flex.row,
+    ...Layout.crossAxis.flexEnd,
     flex: 1,
   },
   cardHeaderText: {
     marginHorizontal: Sizing.t4,
-    flex: 1,
+    flex: 10,
+  },
+  icon: {
+    width: 32,
+    height: 32,
   },
   itemFooter: {
     ...Layout.flex.row,

packages/app/components/daySummary.component.tsx

@@ -9,10 +9,10 @@ import { translate } from '../utils/translation'
 
 interface DaySummaryProps {
   child: Child
-  date: Moment
+  date?: Moment
 }
 
-export const DaySummary = ({ child, date }: DaySummaryProps) => {
+export const DaySummary = ({ child, date = moment() }: DaySummaryProps) => {
   const styles = useStyleSheet(themedStyles)
   const [year, week] = [moment().isoWeekYear(), moment().isoWeek()]
   const { data: weekLessons } = useTimetable(
@@ -26,14 +26,16 @@ export const DaySummary = ({ child, date }: DaySummaryProps) => {
     .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
   }
+
+  const gymBag = lessons.some((lesson) => lesson.code === 'IDH')
+
   return (
     <View style={styles.summary}>
-      <Text category="h5">
+      <Text category="s1">Skoldag </Text>
+      <Text category="s1">
         {lessons[0].timeStart.slice(0, 5)}-
         {lessons[lessons.length - 1].timeEnd.slice(0, 5)}
         {gymBag

packages/app/components/icon.component.tsx

@@ -29,3 +29,4 @@ export const BookOpenIcon = uiIcon('book-open-outline')
 export const GlobeIcon = uiIcon('globe-outline')
 export const ExternalLinkIcon = uiIcon('external-link-outline')
 export const ClipboardIcon = uiIcon('clipboard-outline')
+export const RightArrowIcon = uiIcon('arrow-ios-forward-outline')

packages/app/components/week.component.tsx

@@ -24,6 +24,7 @@ interface WeekProps {
 
 interface LessonListProps {
   lessons: TimetableEntry[]
+  lunch?: MenuItem
   header: string
 }
 
@@ -33,7 +34,7 @@ interface DayProps {
   lessons: TimetableEntry[]
 }
 
-const LessonList = ({ lessons, header }: LessonListProps) => {
+const LessonList = ({ lessons, header, lunch }: LessonListProps) => {
   const styles = useStyleSheet(themedStyles)
 
   return (
@@ -52,9 +53,11 @@ const LessonList = ({ lessons, header }: LessonListProps) => {
           key={id}
           style={styles.item}
           title={() => (
-            <Text style={styles.lessonTitle} maxFontSizeMultiplier={1}>
+            <View style={styles.header}>
-              {name}
+              <Text style={styles.lessonTitle} maxFontSizeMultiplier={1}>
-            </Text>
+                {name}
+              </Text>
+            </View>
           )}
           description={() => (
             <Text
@@ -107,10 +110,12 @@ export const Day = ({ weekDay, lunch, lessons }: DayProps) => {
       </View>
       <LessonList
         header="FM"
+        lunch={lunch}
         lessons={lessons.filter(({ timeStart }) => timeStart < '12:00')}
       />
       <LessonList
         header="EM"
+        lunch={lunch}
         lessons={lessons.filter(({ timeStart }) => timeStart >= '12:00')}
       />
     </View>

packages/app/styles/layout.ts

@@ -1,13 +1,13 @@
 import { ViewStyle } from 'react-native'
 
-type MainAxis = 'center' | 'flexStart'
+type MainAxis = 'center' | 'flexStart' | 'flexEnd'
 export const mainAxis: Record<MainAxis, ViewStyle> = {
   center: {
     alignItems: 'center',
   },
   flexStart: {
     alignItems: 'flex-start',
-  },
+  }
 }
 
 type CrossAxis = 'center' | 'flexEnd' | 'evenly' | 'spaceBetween'

packages/app/translations/sv.json

@@ -18,7 +18,7 @@
     "auth": {
         "bankid": {
             "OpenManually": "Öppna BankID manuellt",
-            "OpenOnAnotherDevice": "Öppna BankID på en annan enhet",
+            "OpenOnAnotherDevice": "Öppna BankID på annan enhet",
             "OpenOnThisDevice": "Logga in med BankID",
             "Waiting": "Väntar på BankID…"
         },