diff --git a/apps/skolplattformen-app/components/child.component.tsx b/apps/skolplattformen-app/components/child.component.tsx index 97126b26..c32138bd 100644 --- a/apps/skolplattformen-app/components/child.component.tsx +++ b/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 type ChildRouteProps = RouteProp export type ChildTabParamList = { @@ -32,6 +36,11 @@ export type ChildTabParamList = { Classmates: undefined } +interface TabTitleProps { + children: string + style?: StyleProp +} + const { Navigator, Screen } = createBottomTabNavigator() const NewsScreen = () => @@ -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 }, } diff --git a/apps/skolplattformen-app/components/childListItem.component.tsx b/apps/skolplattformen-app/components/childListItem.component.tsx index eb2db41a..bef28154 100644 --- a/apps/skolplattformen-app/components/childListItem.component.tsx +++ b/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() - 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 ( - <> - - - [ - styles.cardHeaderLeft || {}, - { opacity: pressed ? 0.5 : 1 }, - ]} - onPress={() => navigation.navigate('Child', { child, color })} - > - - - - {studentName(child.name)} - {className ? {className} : null} - - - - - - - + + ['' || {}, { 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 })} > - - - {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => ( - - {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`} - - ))} + + + + {studentName(child.name)} + {className ? {className} : null} + + + + + - ['' || {}, { opacity: pressed ? 0.5 : 1 }]} - onPress={() => - navigation.navigate('Child', { - child, - color, - initialRouteName: 'News', - }) - } - > - - {t('navigation.news')} + + + ['' || {}, { opacity: pressed ? 0.5 : 1 }]} + onPress={() => + navigation.navigate('Child', { + child, + color, + initialRouteName: 'Calendar', + }) + } + > + + {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => ( + + {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`} - {notificationsThisWeek.slice(0, 3).map((notification, i) => ( - - {notification.message} - - ))} - {newsThisWeek.slice(0, 3).map((newsItem, i) => ( - - {newsItem.header ?? ''} - - ))} - + ))} + + ['' || {}, { opacity: pressed ? 0.5 : 1 }]} + onPress={() => + navigation.navigate('Child', { + child, + color, + initialRouteName: 'News', + }) + } + > + + {t('navigation.news')} + + {notificationsThisWeek.slice(0, 3).map((notification, i) => ( + + {notification.message} + + ))} + + {newsThisWeek.slice(0, 3).map((newsItem, i) => ( + + {newsItem.header ?? ''} + + ))} + {scheduleAndCalendarThisWeek.length || notificationsThisWeek.length || @@ -259,29 +255,8 @@ export const ChildListItem = ({ {menu[meaningfulStartingDate.isoWeekday() - 1]?.description} - )} - - {shouldShowLunchMenu ? ( - ['' || {}, { opacity: pressed ? 0.5 : 1 }]} - onPress={() => - navigation.navigate('Child', { - child, - color, - initialRouteName: 'Menu', - }) - } - > - - {meaningfulStartingDate.format( - '[' + t('schedule.lunch') + '] dddd' - )} - - - {menu[meaningfulStartingDate.isoWeekday() - 1]?.description} - - - ) : null} + + ) : null}