feat: Datum på nyheter (#110)

* feat: add date to news list * feat: add published date and modified date on article
kolplattformen · Feb 14, 2021 · cea1080 · cea1080 · vercel · Feb 14, 2021
1 parent ac7aee4
commit cea1080
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/packages/app/components/newsItem.component.js b/packages/app/components/newsItem.component.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { SafeAreaView, StyleSheet, View, ScrollView } from 'react-native'
+import {SafeAreaView, StyleSheet, View, ScrollView} from 'react-native'
 import {
   Card,
   Divider,
@@ -9,15 +9,19 @@ import {
   TopNavigation,
   TopNavigationAction,
 } from '@ui-kitten/components'
-import { Markdown } from './markdown.component'
-import { Image } from './image.component'
-import { useNewsDetails } from '@skolplattformen/api-hooks'
+import {Markdown} from './markdown.component'
+import {Image} from './image.component'
+import {useNewsDetails} from '@skolplattformen/api-hooks'
+import {DateTime} from 'luxon'
+
+const displayDate = (date) =>
+  DateTime.fromISO(date).setLocale('sv').toLocaleString(DateTime.DATETIME_MED)
 
 const BackIcon = (props) => <Icon {...props} name="arrow-back" />
 
-export const NewsItem = ({ navigation, route }) => {
-  const { newsItem, child } = route.params
-  const { data } = useNewsDetails(child, newsItem)
+export const NewsItem = ({navigation, route}) => {
+  const {newsItem, child} = route.params
+  const {data} = useNewsDetails(child, newsItem)
   console.log(data)
 
   const navigateBack = () => {
@@ -31,15 +35,22 @@ export const NewsItem = ({ navigation, route }) => {
   const renderItemHeader = (headerProps, newsItem) => (
     <View {...headerProps}>
       <Text category="h3">{newsItem.header}</Text>
-      <Image
-        src={newsItem.fullImageUrl}
-        style={styles.image}
-      />
+      <Image src={newsItem.fullImageUrl} style={styles.image} />
+      <Text category="s1" appearance="hint">
+        {newsItem.published
+          ? `Publicerad: ${displayDate(newsItem.published)}`
+          : ''}
+      </Text>
+      <Text category="s1" appearance="hint">
+        {newsItem.modified
+          ? `Uppdaterad: ${displayDate(newsItem.modified)}`
+          : ''}
+      </Text>
     </View>
   )
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
+    <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
       <TopNavigation
         title="Nyhet från Skolplattformen"
         alignment="center"
@@ -54,8 +65,8 @@ export const NewsItem = ({ navigation, route }) => {
             header={(headerProps) => renderItemHeader(headerProps, data)}>
             <Markdown
               style={{
-                body: { color: 'black', fontSize: 17, lineHeight: 23 },
-                heading1: { color: 'black' },
+                body: {color: 'black', fontSize: 17, lineHeight: 23},
+                heading1: {color: 'black'},
               }}>
               {data.body}
             </Markdown>
@@ -78,5 +89,6 @@ const styles = StyleSheet.create({
   image: {
     width: '100%',
     minHeight: 300,
+    marginBottom: 5,
   },
 })
diff --git a/packages/app/components/newsListItem.component.js b/packages/app/components/newsListItem.component.js
@@ -4,6 +4,10 @@ import { Card, Text } from '@ui-kitten/components'
 import { StyleSheet, View } from 'react-native'
 import { Image } from './image.component'
 import { useChild } from './childContext.component'
+import {DateTime} from 'luxon'
+
+const displayDate = (date) =>
+  DateTime.fromISO(date).toRelative({locale: 'sv', style: 'long'})
 
 export const NewsListItem = ({ item }) => {
   const navigation = useNavigation()
@@ -16,13 +20,12 @@ export const NewsListItem = ({ item }) => {
       header={(headerProps) => (
         <View {...headerProps}>
           <Text category="h6">{item.header}</Text>
-          <Text category="s1">Skolplattformen</Text>
+          <Text category="s1">
+            {displayDate(item.published || item.modified)}
+          </Text>
         </View>
       )}>
-      <Image
-        src={item.fullImageUrl}
-        style={{ height: 300 }}
-      />
+      <Image src={item.fullImageUrl} style={styles.image} />
     </Card>
   )
 }
@@ -32,4 +35,7 @@ const styles = StyleSheet.create({
     flex: 1,
     margin: 2,
   },
+  image: {
+    height: 300,
+  },
 })