feat: navigate from "Your Children" to specific tabs

Co-authored-by: Sebastian Palmqvist <PalmN72@users.noreply.github.com>

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import {
   getFocusedRouteNameFromRoute,
@@ -6,8 +7,10 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import { StackNavigationProp } from '@react-navigation/stack'
 import { Icon } from '@ui-kitten/components'
 import React, { useEffect } from 'react'
+import { StyleProp, TextProps } from 'react-native'
 import { defaultStackStyling } from '../design/navigationThemes'
 import { useFeature } from '../hooks/useFeature'
 import { studentName } from '../utils/peopleHelpers'
@@ -22,6 +25,7 @@ import { NewsList } from './newsList.component'
 import { NotificationsList } from './notificationsList.component'
 import { TabBarLabel } from './tabBarLabel.component'
 
+type ChildNavigationProp = StackNavigationProp<RootStackParamList, 'Child'>
 type ChildRouteProps = RouteProp<RootStackParamList, 'Child'>
 
 export type ChildTabParamList = {
@@ -32,6 +36,11 @@ export type ChildTabParamList = {
   Classmates: undefined
 }
 
+interface TabTitleProps {
+  children: string
+  style?: StyleProp<TextProps>
+}
+
 const { Navigator, Screen } = createBottomTabNavigator<ChildTabParamList>()
 
 const NewsScreen = () => <NewsList />
@@ -68,17 +77,16 @@ const TabNavigator = ({
         tabBarIcon: ({ focused, color }) => {
           let iconName = 'news'
 
-          if (route.name === 'News') {
+          if (route.name === 'News')
             iconName = focused ? 'book-open' : 'book-open-outline'
-          } else if (route.name === 'Notifications') {
+          else if (route.name === 'Notifications')
             iconName = focused ? 'alert-circle' : 'alert-circle-outline'
-          } else if (route.name === 'Calendar') {
+          else if (route.name === 'Calendar')
             iconName = focused ? 'calendar' : 'calendar-outline'
-          } else if (route.name === 'Menu') {
+          else if (route.name === 'Menu')
             iconName = focused ? 'clipboard' : 'clipboard-outline'
-          } else if (route.name === 'Classmates') {
+          else if (route.name === 'Classmates')
             iconName = focused ? 'people' : 'people-outline'
-          }
           return <Icon name={iconName} fill={color} height={24} width={24} />
         },
       }

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { Child } from '@skolplattformen/api'
@@ -50,12 +51,9 @@ export const ChildListItem = ({
   }, [child.id])
 
   const navigation = useNavigation<ChildListItemNavigationProp>()
-
   const { t } = useTranslation()
-
   const { data: notifications, reload: notificationsReload } =
     useNotifications(child)
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { data: news, status: newsStatus, reload: newsReload } = useNews(child)
   const { data: classmates, reload: classmatesReload } = useClassmates(child)
   const { data: calendar, reload: calendarReload } = useCalendar(child)
@@ -68,9 +66,7 @@ export const ChildListItem = ({
 
   useEffect(() => {
     // Do not refresh if updated is empty (first render of component)
-    if (updated === '') {
-      return
-    }
+    if (updated === '') return
 
     newsReload()
     classmatesReload()
@@ -161,77 +157,77 @@ export const ChildListItem = ({
     )
 
   return (
-    <>
-      <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}>
-                <Text category="h6">{studentName(child.name)}</Text>
-                {className ? <Text category="s1">{className}</Text> : null}
-              </View>
-            </View>
-            <View style={styles.cardHeaderRight}>
-              <RightArrowIcon
-                style={styles.icon}
-                fill={
-                  isDarkMode ? Colors.neutral.gray200 : Colors.neutral.gray800
-                }
-                name="star"
-              />
-            </View>
-          </Pressable>
-        </View>
+    <View style={styles.card}>
+      <View style={styles.cardHeader}>
         <Pressable
-          style={({ pressed }) => ['' || {}, { opacity: pressed ? 0.5 : 1 }]}
-          onPress={() =>
-            navigation.navigate('Child', {
-              child,
-              color,
-              initialRouteName: 'Calendar',
-            })
-          }
+          style={({ pressed }) => [
+            styles.cardHeaderLeft || {},
+            { opacity: pressed ? 0.5 : 1 },
+          ]}
+          onPress={() => navigation.navigate('Child', { child, color })}
         >
-          <DaySummary child={child} date={meaningfulStartingDate} />
-
-          {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
-            <Text category="p1" key={i}>
-              {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
-            </Text>
-          ))}
+          <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 style={styles.cardHeaderRight}>
+            <RightArrowIcon
+              style={styles.icon}
+              fill={
+                isDarkMode ? Colors.neutral.gray200 : Colors.neutral.gray800
+              }
+              name="star"
+            />
+          </View>
         </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')}
+      </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>
-          {notificationsThisWeek.slice(0, 3).map((notification, i) => (
-            <Text category="p1" key={i}>
-              {notification.message}
-            </Text>
-          ))}
-          {newsThisWeek.slice(0, 3).map((newsItem, i) => (
-            <Text category="p1" key={i}>
-              {newsItem.header ?? ''}
-            </Text>
-          ))}
-        </Pressable>
+        ))}
+      </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>
+        {notificationsThisWeek.slice(0, 3).map((notification, i) => (
+          <Text category="p1" key={i}>
+            {notification.message}
+          </Text>
+        ))}
+
+        {newsThisWeek.slice(0, 3).map((newsItem, i) => (
+          <Text category="p1" key={i}>
+            {newsItem.header ?? ''}
+          </Text>
+        ))}
+      </Pressable>
 
       {scheduleAndCalendarThisWeek.length ||
       notificationsThisWeek.length ||
@@ -259,29 +255,8 @@ export const ChildListItem = ({
           <Text>
             {menu[meaningfulStartingDate.isoWeekday() - 1]?.description}
           </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>
-          </Pressable>
-        ) : null}
+        </Pressable>
+      ) : null}
 
       <View style={styles.itemFooter}>
         <Button
@@ -297,7 +272,7 @@ export const ChildListItem = ({
           {t('abscense.title')}
         </Button>
       </View>
-    </>
+    </View>
   )
 }