2021-03-26 08:38:15 +00:00
|
|
|
import { RouteProp } from '@react-navigation/native'
|
2021-12-16 07:22:20 +00:00
|
|
|
import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
|
2021-03-26 08:38:15 +00:00
|
|
|
import { StackNavigationProp } from '@react-navigation/stack'
|
2021-10-05 15:44:14 +00:00
|
|
|
import { useNewsDetails } from '@skolplattformen/hooks'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
|
2021-02-20 08:38:08 +00:00
|
|
|
import moment from 'moment'
|
|
|
|
import 'moment/locale/sv'
|
2021-02-15 12:33:47 +00:00
|
|
|
import React from 'react'
|
2021-12-02 22:58:57 +00:00
|
|
|
import {
|
|
|
|
Dimensions,
|
|
|
|
ImageStyle,
|
|
|
|
RefreshControl,
|
|
|
|
ScrollView,
|
|
|
|
View,
|
|
|
|
} from 'react-native'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { defaultStackStyling } from '../design/navigationThemes'
|
|
|
|
import { Layout, Sizing, Typography } from '../styles'
|
2021-09-01 08:50:05 +00:00
|
|
|
import { studentName } from '../utils/peopleHelpers'
|
2021-04-13 15:21:40 +00:00
|
|
|
import { translate } from '../utils/translation'
|
2021-02-15 12:33:47 +00:00
|
|
|
import { Image } from './image.component'
|
|
|
|
import { Markdown } from './markdown.component'
|
2021-03-26 08:38:15 +00:00
|
|
|
import { RootStackParamList } from './navigation.component'
|
2021-09-01 08:50:05 +00:00
|
|
|
import { NavigationTitle } from './navigationTitle.component'
|
2021-02-14 16:44:50 +00:00
|
|
|
|
2021-03-26 08:38:15 +00:00
|
|
|
interface NewsItemProps {
|
|
|
|
navigation: StackNavigationProp<RootStackParamList, 'NewsItem'>
|
|
|
|
route: RouteProp<RootStackParamList, 'NewsItem'>
|
|
|
|
}
|
|
|
|
|
2021-04-25 09:06:04 +00:00
|
|
|
const displayDate = (date: string | undefined) => moment(date).format('lll')
|
2020-12-19 01:30:56 +00:00
|
|
|
|
2021-03-26 08:38:15 +00:00
|
|
|
const dateIsValid = (date: string | undefined) =>
|
|
|
|
moment(date, moment.ISO_8601).isValid()
|
2021-02-21 06:27:39 +00:00
|
|
|
|
2021-09-12 20:29:26 +00:00
|
|
|
export const newsItemRouteOptions =
|
|
|
|
(darkMode: boolean) =>
|
|
|
|
({
|
|
|
|
route,
|
|
|
|
}: {
|
|
|
|
route: RouteProp<RootStackParamList, 'NewsItem'>
|
|
|
|
}): NativeStackNavigationOptions => {
|
|
|
|
const newsItem = route.params.newsItem
|
|
|
|
const { child } = route.params
|
|
|
|
return {
|
|
|
|
...defaultStackStyling(darkMode),
|
2021-12-16 07:22:20 +00:00
|
|
|
headerTitle: () => <NavigationTitle title={studentName(child?.name)} />,
|
2021-09-12 20:29:26 +00:00
|
|
|
}
|
2021-06-16 12:10:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export const NewsItem = ({ route }: NewsItemProps) => {
|
2021-02-14 16:49:59 +00:00
|
|
|
const { newsItem, child } = route.params
|
2021-12-02 22:58:57 +00:00
|
|
|
const { data, status, reload } = useNewsDetails(child, newsItem)
|
2021-05-06 12:35:11 +00:00
|
|
|
const styles = useStyleSheet(themedStyles)
|
|
|
|
const stylesMarkdown = useStyleSheet(themedStylesMarkdown)
|
2020-12-19 01:30:56 +00:00
|
|
|
|
|
|
|
return (
|
2021-06-16 12:10:06 +00:00
|
|
|
<ScrollView
|
|
|
|
contentContainerStyle={styles.article}
|
|
|
|
style={styles.scrollView}
|
2021-12-02 22:58:57 +00:00
|
|
|
refreshControl={
|
|
|
|
<RefreshControl refreshing={status === 'loading'} onRefresh={reload} />
|
|
|
|
}
|
2021-06-16 12:10:06 +00:00
|
|
|
>
|
2021-11-30 12:26:03 +00:00
|
|
|
<Text maxFontSizeMultiplier={2} style={styles.title}>
|
|
|
|
{newsItem.header}
|
|
|
|
</Text>
|
2021-06-16 12:10:06 +00:00
|
|
|
{dateIsValid(newsItem.published) && (
|
|
|
|
<Text
|
|
|
|
maxFontSizeMultiplier={2}
|
|
|
|
style={[styles.subtitle, styles.published]}
|
2021-04-02 19:31:42 +00:00
|
|
|
>
|
2021-06-16 12:10:06 +00:00
|
|
|
<Text style={styles.strong}>{translate('news.published')}:</Text>{' '}
|
|
|
|
{displayDate(newsItem.published)}
|
|
|
|
</Text>
|
|
|
|
)}
|
|
|
|
{dateIsValid(newsItem.modified) && (
|
|
|
|
<Text maxFontSizeMultiplier={2} style={styles.subtitle}>
|
|
|
|
<Text style={styles.strong}>{translate('news.updated')}:</Text>{' '}
|
|
|
|
{displayDate(newsItem.modified)}
|
|
|
|
</Text>
|
|
|
|
)}
|
|
|
|
<View style={styles.body}>
|
|
|
|
<Markdown style={stylesMarkdown}>{data.body}</Markdown>
|
|
|
|
{newsItem.fullImageUrl && (
|
|
|
|
<Image
|
|
|
|
accessibilityIgnoresInvertColors={false}
|
|
|
|
src={newsItem.fullImageUrl}
|
2021-11-12 08:39:01 +00:00
|
|
|
style={styles.image as ImageStyle}
|
|
|
|
componentWidth={Dimensions.get('screen').width - Sizing.t5 * 2}
|
2021-06-16 12:10:06 +00:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</View>
|
|
|
|
</ScrollView>
|
2020-12-19 01:30:56 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const themedStylesMarkdown = StyleService.create({
|
|
|
|
body: {
|
|
|
|
...Typography.fontSize.base,
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-basic-color',
|
2021-05-06 12:35:11 +00:00
|
|
|
lineHeight: 26,
|
|
|
|
},
|
|
|
|
heading1: {
|
|
|
|
...Typography.fontSize.xl,
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-basic-color',
|
2021-05-06 12:35:11 +00:00
|
|
|
},
|
|
|
|
heading2: {
|
|
|
|
...Typography.fontSize.lg,
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-basic-color',
|
2021-05-06 12:35:11 +00:00
|
|
|
},
|
2021-05-15 14:17:18 +00:00
|
|
|
code_block: {
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-basic-color',
|
2021-05-15 14:17:18 +00:00
|
|
|
backgroundColor: 'background-basic-color-1',
|
|
|
|
borderColor: 'color-basic-400',
|
|
|
|
},
|
2021-05-06 12:35:11 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
const themedStyles = StyleService.create({
|
2021-02-21 06:27:39 +00:00
|
|
|
article: {
|
2021-04-23 11:33:29 +00:00
|
|
|
padding: Sizing.t5,
|
2021-06-16 12:10:06 +00:00
|
|
|
backgroundColor: 'background-basic-color-1',
|
2021-02-21 06:27:39 +00:00
|
|
|
},
|
|
|
|
scrollView: {
|
2021-04-23 11:33:29 +00:00
|
|
|
...Layout.flex.full,
|
2020-12-27 10:47:42 +00:00
|
|
|
},
|
|
|
|
image: {
|
|
|
|
width: '100%',
|
2021-04-23 11:33:29 +00:00
|
|
|
marginTop: Sizing.t4,
|
2021-06-16 12:10:06 +00:00
|
|
|
borderRadius: 15,
|
2021-02-21 06:27:39 +00:00
|
|
|
},
|
|
|
|
title: {
|
2021-04-23 11:33:29 +00:00
|
|
|
...Typography.fontWeight.bold,
|
2021-02-21 06:27:39 +00:00
|
|
|
fontSize: 30,
|
|
|
|
marginBottom: 8,
|
|
|
|
},
|
|
|
|
subtitle: {
|
2021-04-23 11:33:29 +00:00
|
|
|
...Typography.fontSize.xs,
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-hint-color',
|
2021-02-21 06:27:39 +00:00
|
|
|
},
|
|
|
|
strong: {
|
2021-04-23 11:33:29 +00:00
|
|
|
...Typography.fontSize.xs,
|
|
|
|
...Typography.fontWeight.bold,
|
2021-06-16 12:10:06 +00:00
|
|
|
color: 'text-hint-color',
|
2021-02-21 06:27:39 +00:00
|
|
|
},
|
|
|
|
published: {
|
2021-04-23 11:33:29 +00:00
|
|
|
marginBottom: Sizing.t1,
|
2021-02-21 06:27:39 +00:00
|
|
|
},
|
|
|
|
body: {
|
2021-04-23 11:33:29 +00:00
|
|
|
marginTop: Sizing.t4,
|
2021-02-07 16:14:45 +00:00
|
|
|
},
|
2021-05-15 14:17:18 +00:00
|
|
|
topNavigationTitle: {
|
|
|
|
...Typography.fontWeight.semibold,
|
|
|
|
},
|
2020-12-19 01:30:56 +00:00
|
|
|
})
|