feat: navigate from "Your Children" to specific tabs (#660)

* chore (substring to only show firstname, size of name made bigger)

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

* chore(size edit)

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

* 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>

* fix (title now gets inititated with correct value, not default "News")

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

* Revert "feat (navigate to specific tabs from childlist)"

This reverts commit 8af068946d.

* fix(correct title showing in header)

* fix(removed TouchableOpacity. Using Pressable)

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

---------

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

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

@@ -139,7 +139,10 @@ const TabNavigator = ({
 )
 
 const getHeaderTitle = (route: any) => {
-  const routeName = getFocusedRouteNameFromRoute(route) ?? 'News'
+  const routeName =
+    getFocusedRouteNameFromRoute(route) ??
+    route.params.initialRouteName ??
+    'News'
   return getRouteTitleFromName(routeName)
 }
 

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 { Pressable, useColorScheme, View } from 'react-native'
 import { useTranslation } from '../hooks/useTranslation'
 import { Colors, Layout, Sizing } from '../styles'
 import { getMeaningfulStartingDate } from '../utils/calendarHelpers'
@@ -157,11 +157,15 @@ export const ChildListItem = ({
     )
 
   return (
-    <TouchableOpacity
-      onPress={() => navigation.navigate('Child', { child, color })}
-    >
-      <View style={styles.card}>
-        <View style={styles.cardHeader}>
+    <View style={styles.card}>
+      <View style={styles.cardHeader}>
+        <Pressable
+          style={({ pressed }) => [
+            styles.cardHeaderLeft || {},
+            { opacity: pressed ? 0.5 : 1 },
+          ]}
+          onPress={() => navigation.navigate('Child', { child, color })}
+        >
           <View style={styles.cardHeaderLeft}>
             <StudentAvatar name={studentName(child.name)} color={color} />
             <View style={styles.cardHeaderText}>
@@ -178,16 +182,37 @@ export const ChildListItem = ({
               name="star"
             />
           </View>
-        </View>
+        </Pressable>
+      </View>
 
+      <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) => (
           <Text category="p1" key={i}>
             {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
           </Text>
         ))}
+      </Pressable>
 
+      <Pressable
+        style={({ pressed }) => ['' || {}, { opacity: pressed ? 0.5 : 1 }]}
+        onPress={() =>
+          navigation.navigate('Child', {
+            child,
+            color,
+            initialRouteName: 'News',
+          })
+        }
+      >
         <Text category="c2" style={styles.label}>
           {t('navigation.news')}
         </Text>
@@ -202,43 +227,52 @@ export const ChildListItem = ({
             {newsItem.header ?? ''}
           </Text>
         ))}
+      </Pressable>
 
-        {scheduleAndCalendarThisWeek.length ||
-        notificationsThisWeek.length ||
-        newsThisWeek.length ? null : (
-          <Text category="p1" style={styles.noNewNewsItemsText}>
-            {t('news.noNewNewsItemsThisWeek')}
+      {scheduleAndCalendarThisWeek.length ||
+      notificationsThisWeek.length ||
+      newsThisWeek.length ? null : (
+        <Text category="p1" style={styles.noNewNewsItemsText}>
+          {t('news.noNewNewsItemsThisWeek')}
+        </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'
+            )}
           </Text>
-        )}
-        {shouldShowLunchMenu ? (
-          <>
-            <Text category="c2" style={styles.label}>
-              {meaningfulStartingDate.format(
-                '[' + t('schedule.lunch') + '] dddd'
-              )}
-            </Text>
-            <Text>
-              {menu[meaningfulStartingDate.isoWeekday() - 1]?.description}
-            </Text>
-          </>
-        ) : null}
+          <Text>
+            {menu[meaningfulStartingDate.isoWeekday() - 1]?.description}
+          </Text>
+        </Pressable>
+      ) : null}
 
-        <View style={styles.itemFooter}>
-          <Button
-            accessible
-            accessibilityRole="button"
-            accessibilityLabel={`${child.name}, ${t('abscense.title')}`}
-            appearance="ghost"
-            accessoryLeft={AlertIcon}
-            status="primary"
-            style={styles.absenceButton}
-            onPress={() => navigation.navigate('Absence', { child })}
-          >
-            {t('abscense.title')}
-          </Button>
-        </View>
+      <View style={styles.itemFooter}>
+        <Button
+          accessible
+          accessibilityRole="button"
+          accessibilityLabel={`${child.name}, ${t('abscense.title')}`}
+          appearance="ghost"
+          accessoryLeft={AlertIcon}
+          status="primary"
+          style={styles.absenceButton}
+          onPress={() => navigation.navigate('Absence', { child })}
+        >
+          {t('abscense.title')}
+        </Button>
       </View>
-    </TouchableOpacity>
+    </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 },
 })