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<[email protected]> Co-authored-by: Lvan Ni <[email protected]> * chore(size edit) Co-authored-by: Lee Sheppard<[email protected]> Co-authored-by: Lvan Ni <[email protected]> * feat (navigate to specific tabs from childlist) Co-authored-by: Lee Sheppard<[email protected]> Co-authored-by: Lvan Ni <[email protected]> * fix (title now gets inititated with correct value, not default "News") Co-authored-by: Lee Sheppard<[email protected]> Co-authored-by: Lvan Ni <[email protected]> * Revert "feat (navigate to specific tabs from childlist)" This reverts commit 8af0689. * fix(correct title showing in header) * fix(removed TouchableOpacity. Using Pressable) Co-authored-by: Lee Sheppard<[email protected]> Co-authored-by: Lvan Ni <[email protected]> --------- Co-authored-by: Lvan Ni <[email protected]>
kolplattformen · Nov 2, 2023 · 34c376a · 34c376a
1 parent ce53551
commit 34c376a
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 44 deletions.
diff --git a/apps/skolplattformen-app/components/child.component.tsx b/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)
 }
 

diff --git a/apps/skolplattformen-app/components/childListItem.component.tsx b/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>
+          <Text>
+            {menu[meaningfulStartingDate.isoWeekday() - 1]?.description}
           </Text>
-        )}
-        {shouldShowLunchMenu ? (
-          <>
-            <Text category="c2" style={styles.label}>
-              {meaningfulStartingDate.format(
-                '[' + t('schedule.lunch') + '] dddd'
-              )}
-            </Text>
-            <Text>
-              {menu[meaningfulStartingDate.isoWeekday() - 1]?.description}
-            </Text>
-          </>
-        ) : null}
+        </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>
   )
 }
 

diff --git a/apps/skolplattformen-app/components/navigationTitle.component.tsx b/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 },
 })