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>
This commit is contained in:
Sebastian Palmqvist 2023-11-02 07:27:34 +01:00 committed by GitHub
parent ce535518a9
commit 34c376a727
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 85 additions and 44 deletions

View File

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

View File

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

View File

@ -19,7 +19,11 @@ export const NavigationTitle = ({ title, subtitle }: NavigationTitleProps) => {
{title} {title}
</Text> </Text>
)} )}
{subtitle && <Text style={styles.subtitle}>{subtitle}</Text>} {subtitle && (
<Text style={styles.subtitle}>
{subtitle.substring(0, subtitle.indexOf(' '))}
</Text>
)}
</View> </View>
) )
} }
@ -32,5 +36,5 @@ const styles = StyleSheet.create({
...fontSize.sm, ...fontSize.sm,
fontWeight: '500', fontWeight: '500',
}, },
subtitle: { ...fontSize.xxs }, subtitle: { ...fontSize.base },
}) })