Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: navigate from "Your Children" to specific tabs #660

Merged
merged 9 commits into from
Nov 2, 2023
5 changes: 4 additions & 1 deletion apps/skolplattformen-app/components/child.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down
116 changes: 75 additions & 41 deletions apps/skolplattformen-app/components/childListItem.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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}>
Expand All @@ -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>
Expand All @@ -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>
)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand All @@ -32,5 +36,5 @@ const styles = StyleSheet.create({
...fontSize.sm,
fontWeight: '500',
},
subtitle: { ...fontSize.xxs },
subtitle: { ...fontSize.base },
})
Loading