feat (navigate to specific tabs from childlist)

Co-authored-by: Lee Sheppard<coolusername244@users.noreply.github.com>
Co-authored-by: Lvan Ni <lvan-ni@users.noreply.github.com>

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

@@ -18,7 +18,7 @@ import {
 } from '@ui-kitten/components'
 import moment, { Moment } from 'moment'
 import React, { useEffect } from 'react'
-import { TouchableOpacity, useColorScheme, View } from 'react-native'
+import { TouchableOpacity, useColorScheme, View, Pressable } from 'react-native'
 import { useTranslation } from '../hooks/useTranslation'
 import { Colors, Layout, Sizing } from '../styles'
 import { getMeaningfulStartingDate } from '../utils/calendarHelpers'
@@ -162,46 +162,81 @@ export const ChildListItem = ({
     >
       <View style={styles.card}>
         <View style={styles.cardHeader}>
-          <View style={styles.cardHeaderLeft}>
+          <Pressable
-            <StudentAvatar name={studentName(child.name)} color={color} />
+            style={({ pressed }) => [
-            <View style={styles.cardHeaderText}>
+              styles.cardHeader || {},
-              <Text category="h6">{studentName(child.name)}</Text>
+              { opacity: pressed ? 0.5 : 1 },
-              {className ? <Text category="s1">{className}</Text> : null}
+            ]}
+            onPress={() =>
+              navigation.navigate('Child', {
+                child,
+                color,
+              })
+            }
+          >
+            <View style={styles.cardHeaderLeft}>
+              <StudentAvatar name={studentName(child.name)} color={color} />
+              <View style={styles.cardHeaderText}>
+                <Text category="h6">{studentName(child.name)}</Text>
+                {className ? <Text category="s1">{className}</Text> : null}
+              </View>
             </View>
-          </View>
+            <View style={styles.cardHeaderRight}>
-          <View style={styles.cardHeaderRight}>
+              <RightArrowIcon
-            <RightArrowIcon
+                style={styles.icon}
-              style={styles.icon}
+                fill={
-              fill={
+                  isDarkMode ? Colors.neutral.gray200 : Colors.neutral.gray800
-                isDarkMode ? Colors.neutral.gray200 : Colors.neutral.gray800
+                }
-              }
+                name="star"
-              name="star"
+              />
-            />
+            </View>
-          </View>
+          </Pressable>
         </View>
 
-        <DaySummary child={child} date={meaningfulStartingDate} />
+        <Pressable
+          style={({ pressed }) => ['' || {}, { opacity: pressed ? 0.5 : 1 }]}
+          onPress={() =>
+            navigation.navigate('Child', {
+              child,
+              color,
+              initialRouteName: 'Calendar',
+            })
+          }
+        >
+          <DaySummary child={child} date={meaningfulStartingDate} />
 
-        {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
+          {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
-          <Text category="p1" key={i}>
+            <Text category="p1" key={i}>
-            {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
+              {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
-          </Text>
+            </Text>
-        ))}
+          ))}
+        </Pressable>
 
-        <Text category="c2" style={styles.label}>
+        <Pressable
-          {t('navigation.news')}
+          style={({ pressed }) => ['' || {}, { opacity: pressed ? 0.5 : 1 }]}
-        </Text>
+          onPress={() =>
-        {notificationsThisWeek.slice(0, 3).map((notification, i) => (
+            navigation.navigate('Child', {
-          <Text category="p1" key={i}>
+              child,
-            {notification.message}
+              color,
+              initialRouteName: 'News',
+            })
+          }
+        >
+          <Text category="c2" style={styles.label}>
+            {t('navigation.news')}
           </Text>
-        ))}
+          {notificationsThisWeek.slice(0, 3).map((notification, i) => (
+            <Text category="p1" key={i}>
+              {notification.message}
+            </Text>
+          ))}
 
-        {newsThisWeek.slice(0, 3).map((newsItem, i) => (
+          {newsThisWeek.slice(0, 3).map((newsItem, i) => (
-          <Text category="p1" key={i}>
+            <Text category="p1" key={i}>
-            {newsItem.header ?? ''}
+              {newsItem.header ?? ''}
-          </Text>
+            </Text>
-        ))}
+          ))}
+        </Pressable>
 
         {scheduleAndCalendarThisWeek.length ||
         notificationsThisWeek.length ||
@@ -211,7 +246,16 @@ export const ChildListItem = ({
           </Text>
         )}
         {shouldShowLunchMenu ? (
-          <>
+          <Pressable
+            style={({ pressed }) => ['' || {}, { opacity: pressed ? 0.5 : 1 }]}
+            onPress={() =>
+              navigation.navigate('Child', {
+                child,
+                color,
+                initialRouteName: 'Menu',
+              })
+            }
+          >
             <Text category="c2" style={styles.label}>
               {meaningfulStartingDate.format(
                 '[' + t('schedule.lunch') + '] dddd'
@@ -220,7 +264,7 @@ export const ChildListItem = ({
             <Text>
               {menu[meaningfulStartingDate.isoWeekday() - 1]?.description}
             </Text>
-          </>
+          </Pressable>
         ) : null}
 
         <View style={styles.itemFooter}>