diff --git a/packages/app/README.md b/packages/app/README.md index 50743828..2407f6a7 100644 --- a/packages/app/README.md +++ b/packages/app/README.md @@ -1,4 +1,4 @@ -# Öppna Skolplattformen App +# Öppna skolplattformen App This is the app for Öppna skolplattformen. diff --git a/packages/app/components/__tests__/Children.test.js b/packages/app/components/__tests__/Children.test.js index 81a79344..0fe08937 100644 --- a/packages/app/components/__tests__/Children.test.js +++ b/packages/app/components/__tests__/Children.test.js @@ -6,6 +6,7 @@ import { useNotifications, useSchedule, useMenu, + useTimetable, } from '@skolplattformen/api-hooks' import { render } from '../../utils/testHelpers' import React from 'react' @@ -35,6 +36,7 @@ beforeEach(() => { useNews.mockReturnValueOnce({ data: [], status: 'loaded' }) useSchedule.mockReturnValueOnce({ data: [], status: 'loaded' }) useMenu.mockReturnValueOnce({ data: [], status: 'loaded' }) + useTimetable.mockReturnValueOnce({ data: [], status: 'loaded' }) useNavigation.mockReturnValue({ navigate: jest.fn(), setOptions: jest.fn() }) }) diff --git a/packages/app/components/auth.component.tsx b/packages/app/components/auth.component.tsx index aa342a3c..6b33a45b 100644 --- a/packages/app/components/auth.component.tsx +++ b/packages/app/components/auth.component.tsx @@ -13,7 +13,6 @@ import { TouchableWithoutFeedback, View, } from 'react-native' -import { TouchableOpacity } from 'react-native-gesture-handler' import { NativeStackNavigationOptions } from 'react-native-screens/native-stack' import { LanguageService } from '../services/languageService' import { Layout as LayoutStyle, Sizing, Typography } from '../styles' @@ -63,7 +62,8 @@ export const Auth: React.FC = ({ navigation }) => { - navigation.navigate('SetLanguage')} accessibilityHint={translate( 'auth.a11y_navigate_to_change_language', @@ -83,7 +83,7 @@ export const Auth: React.FC = ({ navigation }) => { /> {currentLanguageName} - + @@ -104,7 +104,7 @@ export const Auth: React.FC = ({ navigation }) => { adjustsFontSizeToFit numberOfLines={2} > - {translate('general.title')} + Öppna skolplattformen @@ -139,7 +139,7 @@ const themeStyles = StyleService.create({ ...LayoutStyle.flex.full, }, header: { - width: '60%', + width: '100%', marginBottom: Sizing.t5, fontFamily: 'Poppins-Black', fontWeight: '900', diff --git a/packages/app/components/child.component.tsx b/packages/app/components/child.component.tsx index 3452c4cf..3551058a 100644 --- a/packages/app/components/child.component.tsx +++ b/packages/app/components/child.component.tsx @@ -2,6 +2,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' import { getFocusedRouteNameFromRoute, RouteProp, + useNavigation, useRoute, } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' @@ -10,11 +11,13 @@ import React from 'react' import { StyleProp, TextProps } from 'react-native' import { NativeStackNavigationOptions } from 'react-native-screens/native-stack' import { defaultStackStyling } from '../design/navigationThemes' +import { studentName } from '../utils/peopleHelpers' import { translate } from '../utils/translation' import { Calendar } from './calendar.component' import { ChildProvider } from './childContext.component' import { Menu } from './menu.component' import { RootStackParamList } from './navigation.component' +import { NavigationTitle } from './navigationTitle.component' import { NewsList } from './newsList.component' import { NotificationsList } from './notificationsList.component' @@ -43,7 +46,7 @@ const MenuScreen = () => const TabNavigator = ({ initialRouteName = 'News', }: { - initialRouteName: keyof ChildTabParamList + initialRouteName?: keyof ChildTabParamList }) => ( }): NativeStackNavigationOptions => { + const { child } = route.params + return { ...defaultStackStyling, - title: getHeaderTitle(route), + headerCenter: () => ( + + ), } } @@ -118,9 +128,14 @@ export const Child = () => { const route = useRoute() const { child, initialRouteName } = route.params + const navigation = useNavigation() + navigation.setOptions({ title: getHeaderTitle(route) }) + return ( - + ) } diff --git a/packages/app/components/childListItem.component.tsx b/packages/app/components/childListItem.component.tsx index f17dcf54..37cbf536 100644 --- a/packages/app/components/childListItem.component.tsx +++ b/packages/app/components/childListItem.component.tsx @@ -3,6 +3,7 @@ import { useNavigation } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' import { useCalendar, + useMenu, useNews, useNotifications, useSchedule, @@ -17,11 +18,13 @@ import { import moment from 'moment' import React from 'react' import { TouchableOpacity, View } from 'react-native' -import { Layout, Sizing } from '../styles' +import { Colors, Layout, Sizing } from '../styles' import { studentName } from '../utils/peopleHelpers' import { translate } from '../utils/translation' import { RootStackParamList } from './navigation.component' import { StudentAvatar } from './studentAvatar.component' +import { DaySummary } from './daySummary.component' +import { AlertIcon, RightArrowIcon } from './icon.component' interface ChildListItemProps { child: Child @@ -40,6 +43,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => { const { data: notifications } = useNotifications(child) const { data: news } = useNews(child) const { data: calendar } = useCalendar(child) + const { data: menu } = useMenu(child) const { data: schedule } = useSchedule( child, moment().toISOString(), @@ -108,26 +112,31 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => { {className ? {className} : null} + + + + {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => ( {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`} ))} + + {translate('navigation.news')} + {notificationsThisWeek.slice(0, 3).map((notification, i) => ( - {translate('notifications.notificationTitle', { - message: notification.message, - dateCreated: displayDate(notification.dateCreated), - })} + {notification.message} ))} {newsThisWeek.slice(0, 3).map((newsItem, i) => ( - {translate('news.notificationTitle', { - header: newsItem.header, - published: displayDate(newsItem.published), - })} + {newsItem.header ?? ''} ))} {scheduleAndCalendarThisWeek.length || @@ -137,13 +146,24 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => { {translate('news.noNewNewsItemsThisWeek')} )} + + {!menu[moment().isoWeekday() - 1] ? null : ( + <> + + {translate('schedule.lunch')} + + {menu[moment().isoWeekday() - 1]?.description} + + )}