2021-10-05 15:44:14 +00:00
|
|
|
import { CalendarItem } from '@skolplattformen/api-skolplattformen'
|
|
|
|
import { useCalendar } from '@skolplattformen/hooks'
|
2021-05-06 12:35:11 +00:00
|
|
|
import {
|
|
|
|
Divider,
|
|
|
|
List,
|
|
|
|
ListItem,
|
|
|
|
StyleService,
|
2021-10-05 15:44:14 +00:00
|
|
|
Text,
|
2021-05-06 12:35:11 +00:00
|
|
|
useStyleSheet,
|
|
|
|
} from '@ui-kitten/components'
|
2021-01-30 17:46:31 +00:00
|
|
|
import moment from 'moment'
|
2021-02-20 08:38:08 +00:00
|
|
|
import React from 'react'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { ListRenderItemInfo, View } from 'react-native'
|
|
|
|
import { Typography } from '../styles'
|
2021-02-17 20:19:18 +00:00
|
|
|
import { useChild } from './childContext.component'
|
2021-02-20 08:38:08 +00:00
|
|
|
import { CalendarOutlineIcon } from './icon.component'
|
2021-02-23 09:04:40 +00:00
|
|
|
import { SaveToCalendar } from './saveToCalendar.component'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { Week } from './week.component'
|
2021-01-30 17:46:31 +00:00
|
|
|
|
2021-02-20 08:38:08 +00:00
|
|
|
export const Calendar = () => {
|
2021-02-17 20:19:18 +00:00
|
|
|
const child = useChild()
|
2021-02-20 08:38:08 +00:00
|
|
|
const { data } = useCalendar(child)
|
2021-05-06 12:35:11 +00:00
|
|
|
const styles = useStyleSheet(themedStyles)
|
2020-12-07 20:59:14 +00:00
|
|
|
|
2021-05-10 15:44:35 +00:00
|
|
|
const formatStartDate = (startDate: moment.MomentInput) => {
|
|
|
|
const date = moment(startDate)
|
2021-05-10 15:58:28 +00:00
|
|
|
const output = `${date.format('dddd')} ${date.format(
|
|
|
|
'll'
|
|
|
|
)} • ${date.fromNow()}`
|
|
|
|
|
|
|
|
// Hack to remove yarn if it is this year
|
|
|
|
const currentYear = moment().year().toString(10)
|
|
|
|
return output.replace(currentYear, '')
|
2021-05-10 15:44:35 +00:00
|
|
|
}
|
|
|
|
|
2021-05-10 09:39:53 +00:00
|
|
|
return (
|
|
|
|
<View style={styles.container}>
|
2021-04-29 08:47:00 +00:00
|
|
|
<Week child={child} />
|
2021-05-10 09:39:53 +00:00
|
|
|
{data && data.length > 0 && (
|
|
|
|
<List
|
|
|
|
data={data.sort((a, b) =>
|
|
|
|
a.startDate && b.startDate
|
|
|
|
? a.startDate.localeCompare(b.startDate)
|
|
|
|
: 0
|
|
|
|
)}
|
|
|
|
ItemSeparatorComponent={Divider}
|
|
|
|
renderItem={({ item }: ListRenderItemInfo<CalendarItem>) => (
|
|
|
|
<ListItem
|
|
|
|
disabled={true}
|
|
|
|
title={`${item.title}`}
|
|
|
|
description={(props) => (
|
|
|
|
<Text style={[props?.style, styles.description]}>
|
2021-05-10 15:44:35 +00:00
|
|
|
{formatStartDate(item.startDate)}
|
2021-05-10 09:39:53 +00:00
|
|
|
</Text>
|
|
|
|
)}
|
|
|
|
accessoryLeft={CalendarOutlineIcon}
|
|
|
|
accessoryRight={() => <SaveToCalendar event={item} />}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
)}
|
2021-04-07 22:53:31 +00:00
|
|
|
</View>
|
2021-02-20 08:38:08 +00:00
|
|
|
)
|
2020-12-22 22:29:42 +00:00
|
|
|
}
|
2020-12-07 20:59:14 +00:00
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const themedStyles = StyleService.create({
|
2020-12-15 01:38:36 +00:00
|
|
|
container: {
|
2021-06-16 12:10:06 +00:00
|
|
|
backgroundColor: 'background-basic-color-1',
|
2021-02-17 20:19:18 +00:00
|
|
|
height: '100%',
|
2021-02-07 16:14:45 +00:00
|
|
|
width: '100%',
|
2020-12-15 01:38:36 +00:00
|
|
|
},
|
2021-04-23 11:33:29 +00:00
|
|
|
description: {
|
|
|
|
...Typography.fontSize.xs,
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-hint-color',
|
2021-02-17 20:19:18 +00:00
|
|
|
},
|
2020-12-31 03:23:03 +00:00
|
|
|
})
|