2021-10-05 15:44:14 +00:00
|
|
|
import { Notification as NotificationType } from '@skolplattformen/api-skolplattformen'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
|
|
|
|
import moment from 'moment'
|
2021-02-20 08:38:08 +00:00
|
|
|
import React from 'react'
|
2021-09-12 20:29:26 +00:00
|
|
|
import { TouchableOpacity, View } from 'react-native'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { Layout, Sizing, Typography } from '../styles'
|
2021-02-15 12:33:47 +00:00
|
|
|
import { ModalWebView } from './modalWebView.component'
|
2021-01-26 11:02:24 +00:00
|
|
|
|
2021-03-26 08:38:15 +00:00
|
|
|
interface NotificationProps {
|
|
|
|
item: NotificationType
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Notification = ({ item }: NotificationProps) => {
|
2021-05-06 12:35:11 +00:00
|
|
|
const styles = useStyleSheet(themedStyles)
|
2021-02-20 08:38:08 +00:00
|
|
|
const [isOpen, setIsOpen] = React.useState(false)
|
2021-01-26 11:02:24 +00:00
|
|
|
const open = () => setIsOpen(true)
|
|
|
|
const close = () => setIsOpen(false)
|
|
|
|
|
2021-10-01 07:49:03 +00:00
|
|
|
const date = item.dateModified || item.dateCreated
|
|
|
|
const displayDate = date ? moment(date).fromNow() : null
|
2021-01-26 12:39:22 +00:00
|
|
|
|
2021-10-06 20:47:50 +00:00
|
|
|
const sharedCookiesEnabled = Boolean(
|
2021-04-01 19:04:10 +00:00
|
|
|
item.url && item.url.startsWith('https://start.unikum.net/')
|
|
|
|
)
|
2021-03-20 13:03:57 +00:00
|
|
|
|
2021-01-26 11:02:24 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-09-12 20:29:26 +00:00
|
|
|
<TouchableOpacity onPress={open}>
|
2021-06-16 12:10:06 +00:00
|
|
|
<View style={styles.card}>
|
|
|
|
<View>
|
2021-02-19 10:42:13 +00:00
|
|
|
<Text style={styles.title}>{item.sender}</Text>
|
|
|
|
<Text style={styles.subtitle}>
|
2021-02-15 11:11:22 +00:00
|
|
|
{item.category ? item.category : ''}
|
2021-02-19 10:42:13 +00:00
|
|
|
{item.category && displayDate ? ' • ' : ''}
|
|
|
|
{displayDate ? displayDate : ''}
|
2021-01-26 12:39:22 +00:00
|
|
|
</Text>
|
2021-01-26 11:02:24 +00:00
|
|
|
</View>
|
2021-06-16 12:10:06 +00:00
|
|
|
<Text>{item.message}</Text>
|
|
|
|
</View>
|
2021-09-12 20:29:26 +00:00
|
|
|
</TouchableOpacity>
|
2021-03-20 13:03:57 +00:00
|
|
|
{isOpen && (
|
|
|
|
<ModalWebView
|
|
|
|
url={item.url}
|
|
|
|
onClose={close}
|
2021-04-01 19:04:10 +00:00
|
|
|
sharedCookiesEnabled={sharedCookiesEnabled}
|
2021-03-20 13:03:57 +00:00
|
|
|
/>
|
|
|
|
)}
|
2021-01-26 11:02:24 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const themedStyles = StyleService.create({
|
2021-01-26 11:02:24 +00:00
|
|
|
card: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Layout.flex.full,
|
2021-06-16 12:10:06 +00:00
|
|
|
borderRadius: 15,
|
|
|
|
paddingVertical: Sizing.t4,
|
|
|
|
paddingHorizontal: Sizing.t4,
|
|
|
|
marginBottom: Sizing.t3,
|
2021-05-06 12:35:11 +00:00
|
|
|
backgroundColor: 'background-basic-color-1',
|
2021-02-19 10:42:13 +00:00
|
|
|
},
|
|
|
|
title: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Typography.header,
|
2021-04-23 11:33:29 +00:00
|
|
|
marginBottom: Sizing.t1,
|
2021-02-19 10:42:13 +00:00
|
|
|
},
|
|
|
|
subtitle: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Typography.fontSize.xs,
|
2021-05-06 12:35:11 +00:00
|
|
|
color: 'text-hint-color',
|
2021-06-16 12:10:06 +00:00
|
|
|
marginBottom: Sizing.t2,
|
2021-01-26 11:02:24 +00:00
|
|
|
},
|
|
|
|
})
|