diff --git a/apps/skolplattformen-app/App.tsx b/apps/skolplattformen-app/App.tsx
index 4b278c6c..fde47127 100644
--- a/apps/skolplattformen-app/App.tsx
+++ b/apps/skolplattformen-app/App.tsx
@@ -19,7 +19,7 @@ import { translations } from './utils/translation'
const reporter: Reporter | undefined = __DEV__
? {
log: (message: string) => console.log(message),
- error: (error: Error, label?: string) => console.error(label, error),
+ error: (error: Error, label?: string) => console.log(label, error),
}
: undefined
diff --git a/apps/skolplattformen-app/components/calendar.component.tsx b/apps/skolplattformen-app/components/calendar.component.tsx
index 6651e312..25c9b6d1 100644
--- a/apps/skolplattformen-app/components/calendar.component.tsx
+++ b/apps/skolplattformen-app/components/calendar.component.tsx
@@ -1,5 +1,5 @@
-import { CalendarItem } from '@skolplattformen/api'
import { useCalendar } from '@skolplattformen/hooks'
+import { CalendarItem } from '@skolplattformen/api'
import {
Divider,
List,
@@ -10,8 +10,9 @@ import {
} from '@ui-kitten/components'
import moment from 'moment'
import React from 'react'
-import { ListRenderItemInfo, View } from 'react-native'
-import { Typography } from '../styles'
+import { ListRenderItemInfo, RefreshControl, View } from 'react-native'
+import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
+import { translate } from '../utils/translation'
import { useChild } from './childContext.component'
import { CalendarOutlineIcon } from './icon.component'
import { SaveToCalendar } from './saveToCalendar.component'
@@ -19,7 +20,7 @@ import { Week } from './week.component'
export const Calendar = () => {
const child = useChild()
- const { data } = useCalendar(child)
+ const { data, status, reload } = useCalendar(child)
const styles = useStyleSheet(themedStyles)
const formatStartDate = (startDate: moment.MomentInput) => {
@@ -28,37 +29,55 @@ export const Calendar = () => {
'll'
)} • ${date.fromNow()}`
- // Hack to remove yarn if it is this year
+ // Hack to remove year if it is this year
const currentYear = moment().year().toString(10)
return output.replace(currentYear, '')
}
+ const sortedData = () => {
+ if (!data) return []
+
+ return data.sort((a, b) =>
+ a.startDate && b.startDate ? a.startDate.localeCompare(b.startDate) : 0
+ )
+ }
+
return (
- {data && data.length > 0 && (
-
- a.startDate && b.startDate
- ? a.startDate.localeCompare(b.startDate)
- : 0
- )}
- ItemSeparatorComponent={Divider}
- renderItem={({ item }: ListRenderItemInfo) => (
- (
-
- {formatStartDate(item.startDate)}
-
- )}
- accessoryLeft={CalendarOutlineIcon}
- accessoryRight={() => }
- />
- )}
- />
- )}
+
+
+ {translate('calender.emptyHeadline')}
+
+
+ {translate('calender.emptyText')}
+
+
+ }
+ renderItem={({ item }: ListRenderItemInfo) => (
+ (
+
+ {formatStartDate(item.startDate)}
+
+ )}
+ accessoryLeft={CalendarOutlineIcon}
+ accessoryRight={() => }
+ />
+ )}
+ refreshControl={
+
+ }
+ />
)
}
@@ -73,4 +92,18 @@ const themedStyles = StyleService.create({
...Typography.fontSize.xs,
color: 'text-hint-color',
},
+ emptyState: {
+ ...LayoutStyle.center,
+ ...LayoutStyle.flex.full,
+ },
+ emptyStateHeadline: {
+ ...Typography.align.center,
+ margin: Sizing.t4,
+ },
+ emptyStateDescription: {
+ ...Typography.align.center,
+ lineHeight: 21,
+ paddingHorizontal: Sizing.t3,
+ margin: Sizing.t4,
+ },
})
diff --git a/apps/skolplattformen-app/components/childListItem.component.tsx b/apps/skolplattformen-app/components/childListItem.component.tsx
index d8fb3491..f718a7c7 100644
--- a/apps/skolplattformen-app/components/childListItem.component.tsx
+++ b/apps/skolplattformen-app/components/childListItem.component.tsx
@@ -17,7 +17,7 @@ import {
useStyleSheet,
} from '@ui-kitten/components'
import moment from 'moment'
-import React from 'react'
+import React, { useEffect } from 'react'
import { TouchableOpacity, useColorScheme, View } from 'react-native'
import { useTranslation } from '../hooks/useTranslation'
import { Colors, Layout, Sizing } from '../styles'
@@ -30,13 +30,18 @@ import { StudentAvatar } from './studentAvatar.component'
interface ChildListItemProps {
child: Child
color: string
+ updated: string
}
type ChildListItemNavigationProp = StackNavigationProp<
RootStackParamList,
'Children'
>
-export const ChildListItem = ({ child, color }: ChildListItemProps) => {
+export const ChildListItem = ({
+ child,
+ color,
+ updated,
+}: ChildListItemProps) => {
// Forces rerender when child.id changes
React.useEffect(() => {
// noop
@@ -44,17 +49,38 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
const navigation = useNavigation()
const { t } = useTranslation()
- const { data: notifications } = useNotifications(child)
- const { data: news } = useNews(child)
- const { data: classmates } = useClassmates(child)
- const { data: calendar } = useCalendar(child)
- const { data: menu } = useMenu(child)
- const { data: schedule } = useSchedule(
+ const { data: notifications, reload: notificationsReload } =
+ useNotifications(child)
+ const { data: news, status: newsStatus, reload: newsReload } = useNews(child)
+ const { data: classmates, reload: classmatesReload } = useClassmates(child)
+ const { data: calendar, reload: calendarReload } = useCalendar(child)
+ const { data: menu, reload: menuReload } = useMenu(child)
+ const { data: schedule, reload: scheduleReload } = useSchedule(
child,
moment().toISOString(),
moment().add(7, 'days').toISOString()
)
+ useEffect(() => {
+ // Do not refresh if updated is empty (first render of component)
+ if (updated === '') return
+
+ console.log('Reload', child.name, updated)
+
+ newsReload()
+ classmatesReload()
+ notificationsReload()
+ calendarReload()
+ menuReload()
+ scheduleReload()
+
+ // Without eslint-disable below we get into a forever loop
+ // because the function pointers to reload functions change on every reload.
+ // I do not know a workaround for this.
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [updated])
+
const notificationsThisWeek = notifications.filter(
({ dateCreated, dateModified }) => {
const date = dateModified || dateCreated
@@ -168,7 +194,6 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
{t('news.noNewNewsItemsThisWeek')}
)}
-
{!menu[moment().isoWeekday() - 1] ? null : (
<>
@@ -177,7 +202,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
{menu[moment().isoWeekday() - 1]?.description}
)}
-
+