feat: 🎸 Readable news and updated navigation

kolplattformen · Jan 30, 2021 · 5835268 · 5835268
1 parent 1a80f89
commit 5835268
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 33 deletions.
diff --git a/packages/app/components/calendar.component.js b/packages/app/components/calendar.component.js
@@ -19,19 +19,20 @@ export const Calendar = ({ calendar }) => {
     ? <View style={{ flex: 1 }}>
       <Image source={require('../assets/girls.png')} style={{ height: 200, width: '100%' }} />
       <Text category='h5'>Det ser lite tomt ut i kalendern</Text>
-      </View>
+    </View>
     : <List
-        style={styles.container}
-        data={calendar.sort((a, b) => b.startDate < a.startDate)}
-        ItemSeparatorComponent={Divider}
-        renderItem={renderItem}
-      />
+      style={styles.container}
+      data={calendar.sort((a, b) => b.startDate < a.startDate)}
+      ItemSeparatorComponent={Divider}
+      renderItem={renderItem}
+    />
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    width: '100%'
+    width: '100%',
+    paddingBottom: 330,
   },
   ongoing: {
     color: 'red'

diff --git a/packages/app/components/child.component.js b/packages/app/components/child.component.js
@@ -98,7 +98,9 @@ export const Child = ({ route, navigation }) => {
         accessoryLeft={BackAction}
         accessoryRight={renderRightActions}
         style={styles.topBar} />
-      <TabView selectedIndex={selectedIndex} onSelect={index => setSelectedIndex(index)}>
+      <TabView
+        selectedIndex={selectedIndex}
+        onSelect={index => setSelectedIndex(index)}>
         <Tab title="Nyheter" icon={NewsIcon}>
           <Layout style={styles.tabContainer}>
             <NewsList news={news} />
@@ -134,11 +136,11 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff"
   },
   tabContainer: {
+    flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
     paddingTop: 10,
     paddingLeft: 10,
-    flexDirection: 'column'
   },
   backdrop: {
     backgroundColor: 'rgba(0, 0, 0, 0.5)',

diff --git a/packages/app/components/childListItem.component.js b/packages/app/components/childListItem.component.js
@@ -4,16 +4,20 @@ import { DateTime } from 'luxon'
 import { useNotifications, useNews, useClassmates, useCalendar, useSchedule } from '@skolplattformen/react-native-embedded-api'
 import { Button, Icon, Text, Card, Avatar } from '@ui-kitten/components'
 
-const NotificationIcon = (style) => (
-  <Icon {...style} name='activity-outline' />
+const NotificationsIcon = (props) => (
+  <Icon {...props} name='alert-circle-outline' />
 )
 
-const CalendarIcon = (style) => (
-  <Icon {...style} name='calendar-outline' />
+const NewsIcon = (props) => (
+  <Icon {...props} name='activity-outline' />
 )
 
-const PeopleIcon = (style) => (
-  <Icon {...style} name='people-outline' />
+const CalendarIcon = (props) => (
+  <Icon {...props} name='calendar-outline' />
+)
+
+const PeopleIcon = (props) => (
+  <Icon {...props} name='people-outline' />
 )
 
 export const ChildListItem = ({ navigation, child, color }) => {
@@ -56,28 +60,36 @@ export const ChildListItem = ({ navigation, child, color }) => {
   const Footer = (props, info) => (
     <View style={styles.itemFooter}>
       <Button
-        style={styles[notificationsStatus]}
+        style={[styles.item, styles[newsStatus]]}
+        status='control'
+        size='small'
+        accessoryLeft={NewsIcon}
+      >
+        {`${(news || []).length}`}
+      </Button>
+      <Button
+        style={[styles.item, styles[notificationsStatus]]}
         status='control'
         size='small'
-        accessoryLeft={NotificationIcon}
+        accessoryLeft={NotificationsIcon}
       >
-        {`${(news || []).length}`} nyheter
+        {`${(notifications || []).length}`}
       </Button>
       <Button
-        style={styles[calendarStatus]}
+        style={[styles.item, styles[calendarStatus]]}
         status='control'
         size='small'
         accessoryLeft={CalendarIcon}
       >
         {`${(notifications || []).length}`}
       </Button>
       <Button
-        style={styles[classmatesStatus]}
+        style={[styles.item, styles[classmatesStatus]]}
         status='control'
         size='small'
         accessoryLeft={PeopleIcon}
       >
-        {`${(classmates || []).length} elever`}
+        {`${(classmates || []).length}`}
       </Button>
     </View>
   )
@@ -107,20 +119,22 @@ const styles = StyleSheet.create({
   },
   itemFooter: {
     flexDirection: 'row',
-    paddingHorizontal: 10,
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 5,
     paddingVertical: 5,
     borderRadius: 5,
     margin: 0
   },
-  loaded: {
+  item: {
     paddingHorizontal: 0,
+  },
+  loaded: {
     color: '#000'
   },
   loading: {
-    paddingHorizontal: 0,
     color: '#555'
-  }, error: {
-    paddingHorizontal: 0,
+  },
+  error: {
     color: '#500'
   }
 })
diff --git a/packages/app/components/newsList.component.js b/packages/app/components/newsList.component.js
@@ -18,8 +18,11 @@ export const NewsList = ({ news }) => {
 
 
 const styles = StyleSheet.create({
-  container: {},
+  container: {
+    width: '100%',
+  },
   contentContainer: {
+    alignItems: 'stretch',
     paddingRight: 10,
     paddingBottom: 330
   }

diff --git a/packages/app/components/notification.component.js b/packages/app/components/notification.component.js
@@ -2,26 +2,32 @@ import React, { useState } from 'react'
 import { Card, Text } from '@ui-kitten/components'
 import { StyleSheet, View } from 'react-native'
 import { ModalWebView } from './modalWebView.component'
+import { DateTime } from 'luxon'
 
 export const Notification = ({ item }) => {
   const [isOpen, setIsOpen] = useState(false)
   const open = () => setIsOpen(true)
   const close = () => setIsOpen(false)
 
+  const displayDate = DateTime
+    .fromISO(item.dateCreated)
+    .toRelative({ locale: 'sv' })
+
   return (
     <>
       <Card
         style={styles.card}
         onPress={open}
         header={(headerProps) => (
           <View {...headerProps} >
-            <Text category='h6'>{item.sender}</Text>
-            {item.category && (
-              <Text category='s1'>{item.category}</Text>
-            )}
-            <Text>{item.message}</Text>
+            <Text category="h6">{item.sender}</Text>
+            <Text category="s1">
+              {item.category ? `${item.category} ` : ''}
+              ({displayDate})
+            </Text>
           </View>
         )}>
+        <Text>{item.message}</Text>
       </Card>
       {isOpen && (
         <ModalWebView url={item.url} onClose={close} />

diff --git a/packages/app/components/notificationsList.component.js b/packages/app/components/notificationsList.component.js
@@ -18,8 +18,11 @@ export const NotificationsList = ({ notifications, status }) => {
 
 
 const styles = StyleSheet.create({
-  container: {},
+  container: {
+    width: '100%'
+  },
   contentContainer: {
+    alignItems: 'stretch',
     paddingRight: 10,
     paddingBottom: 330
   }

diff --git a/packages/app/package-lock.json b/packages/app/package-lock.json
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -45,6 +45,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@types/luxon": "^1.25.1",
     "@types/react": "^16.8.24",
     "@types/react-native": "^0.63.43",
     "@ui-kitten/metro-config": "5.0.0",