From 77f19ced0e80a593da88b898ee11717e4aca7a93 Mon Sep 17 00:00:00 2001
From: Christian Landgren <christian@landgren.nu>
Date: Wed, 16 Dec 2020 16:39:22 +0100
Subject: [PATCH 1/4] added classmates

---
 packages/app/App.js                           |  4 +-
 packages/app/components/calendar.component.js | 21 ++--
 .../app/components/classmates.component.js    | 33 +++++++
 .../app/components/contactMenu.component.js   | 37 ++++++++
 packages/app/components/newsList.component.js | 14 +--
 packages/app/components/tabs.component.js     | 95 +++++++++++++------
 6 files changed, 153 insertions(+), 51 deletions(-)
 create mode 100644 packages/app/components/classmates.component.js
 create mode 100644 packages/app/components/contactMenu.component.js

diff --git a/packages/app/App.js b/packages/app/App.js
index 85b3a84a..a1aeaf47 100644
--- a/packages/app/App.js
+++ b/packages/app/App.js
@@ -15,8 +15,8 @@ import {AppNavigator} from './components/tabs.component'
 export default () => (
   <>
     <IconRegistry icons={EvaIconsPack}/>
-    <ApplicationProvider {...eva} theme={{...eva.light, customization}}>
-      <ChildList children={children} />
+    <ApplicationProvider {...eva} theme={{...eva.light, ...customization}}>
+      <AppNavigator child={children[1]}/>
     </ApplicationProvider>
   </>
 )
\ No newline at end of file
diff --git a/packages/app/components/calendar.component.js b/packages/app/components/calendar.component.js
index b77bf354..8f19e8fc 100644
--- a/packages/app/components/calendar.component.js
+++ b/packages/app/components/calendar.component.js
@@ -1,18 +1,20 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Divider, List, ListItem, Icon, Text} from '@ui-kitten/components';
+import moment from 'moment'
 
 export const Calendar = ({calendar}) => {
 
-  const renderItemIcon = (props) => (
-    <Icon {...props} name='calendar-outline'/>
-  );
+  const parseMoment = (date) => moment(date, 'YYYY-MM-DD hh:mm')
+
+  const renderItemIcon = (startDate, endDate) => 
+    (props) => <Icon {...props} fill={parseMoment(startDate).isBefore() && parseMoment(endDate).isAfter() ? '#33f' : '#333'} name={parseMoment(endDate || startDate).isBefore() ? 'calendar' : 'calendar-outline'}/>
 
   const renderItem = ({ item }) => (
     <ListItem
       title={`${item.title}`}
-      description={`${item.startDate}`}
-      accessoryLeft={renderItemIcon}
+      description={`${moment(item.startDate).calendar()}`}
+      accessoryLeft={renderItemIcon(item.startDate, item.endDate)}
     />
   );
 
@@ -20,7 +22,7 @@ export const Calendar = ({calendar}) => {
   return (
     <List
       style={styles.container}
-      data={calendar}
+      data={calendar.sort((a, b) => b.startDate < a.startDate)}
       ItemSeparatorComponent={Divider}
       renderItem={renderItem}
     />
@@ -29,7 +31,12 @@ export const Calendar = ({calendar}) => {
 
 const styles = StyleSheet.create({
   container: {
-    maxHeight: 200,
     width: "100%"
   },
+  ongoing: {
+    color: 'red'
+  },
+  normal: {
+    color: 'black'
+  }
 });
\ No newline at end of file
diff --git a/packages/app/components/classmates.component.js b/packages/app/components/classmates.component.js
new file mode 100644
index 00000000..ae6fe09e
--- /dev/null
+++ b/packages/app/components/classmates.component.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Divider, List, ListItem, Icon, Text, Button} from '@ui-kitten/components';
+import { ContactMenu } from './contactMenu.component';
+
+export const Classmates = ({classmates}) => {
+
+  const renderItemIcon = (props) => <Icon {...props}  name={'people-outline'}/>
+
+  const renderItem = ({ item }) => (
+    <ListItem
+      title={`${item.firstname} ${item.lastname}`}
+      description={item.guardians.map(guardian => `${guardian.firstname} ${guardian.lastname}`).join(', ')}
+      accessoryLeft={renderItemIcon}
+      accessoryRight={(props) => ContactMenu({...props, contact: item})}
+    />
+  );
+
+  return (
+    <List
+      style={styles.container}
+      data={classmates}
+      ItemSeparatorComponent={Divider}
+      renderItem={renderItem}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+});
\ No newline at end of file
diff --git a/packages/app/components/contactMenu.component.js b/packages/app/components/contactMenu.component.js
new file mode 100644
index 00000000..3c066501
--- /dev/null
+++ b/packages/app/components/contactMenu.component.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button, Icon, Layout, MenuItem, OverflowMenu, Text, Divider } from '@ui-kitten/components';
+import {Linking} from 'react-native'
+
+
+export const ContactMenu = ({contact}) => {
+
+  const [visible, setVisible] = React.useState(false);
+  const [selectedTitle, setSelectedTitle] = React.useState('No items selected');
+
+  const contactIcon = (props) => <Icon {...props}  name={'phone-outline'}/>
+  const renderToggleButton = () => (
+    <Button onPress={() => setVisible(true)} appearance='ghost' accessoryLeft={contactIcon}>
+    </Button>
+  );
+
+  const CallIcon = (props) => <Icon {...props}  name='phone-outline'/>
+  const SMSIcon = (props) => <Icon {...props}  name='message-square-outline'/>
+  const EmailIcon = (props) => <Icon {...props}  name='email-outline'/>
+
+  return (
+    <OverflowMenu
+      visible={visible}
+      anchor={renderToggleButton}
+      onBackdropPress={() => setVisible(false)}>
+      {contact.guardians.map(parent =>
+        <>
+          <MenuItem title={`${parent.firstname} ${parent.lastname}`} disabled="true"/>
+          <MenuItem accessoryLeft={CallIcon} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
+          <MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/>
+          {parent.email ? <MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> : null}
+        </>
+      )}
+    </OverflowMenu>
+  );
+};
\ No newline at end of file
diff --git a/packages/app/components/newsList.component.js b/packages/app/components/newsList.component.js
index 1fc18342..0db4f201 100644
--- a/packages/app/components/newsList.component.js
+++ b/packages/app/components/newsList.component.js
@@ -44,21 +44,13 @@ export const NewsList = ({news}) => {
 
 const styles = StyleSheet.create({
   header: {
-    backgroundColor: '#fff',
+    backgroundColor: '#eeeeef',
     minHeight: 30,
     padding: 25
   },
-  headerText: {
-    color: '#000'
-  },
-  container: {
-    maxHeight: '100%'
-  },
-  contentContainer: {
-    paddingVertical: 4
-  },
   item: {
-    marginVertical: 4
+    marginVertical: 10,
+    marginRight: 10
   },
   footer: {
     backgroundColor: '#000'
diff --git a/packages/app/components/tabs.component.js b/packages/app/components/tabs.component.js
index a8160a93..3a470c93 100644
--- a/packages/app/components/tabs.component.js
+++ b/packages/app/components/tabs.component.js
@@ -1,36 +1,69 @@
-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
-import { TabBar, Tab, Layout, Text } from '@ui-kitten/components';
-import { ChildList } from './childList.component';
-import { DetailsScreen } from './details.component';
+import React from 'react'
+import { StyleSheet } from 'react-native';
+import { TabBar, Tab, TabView, Layout, Text, Icon } from '@ui-kitten/components'
+import { NewsList } from './newsList.component'
+import { Calendar } from './calendar.component'
+import { Classmates } from './classmates.component'
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import moment from 'moment'
 
-const { Navigator, Screen } = createMaterialTopTabNavigator();
+export const AppNavigator = ({child}) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
 
-const ChildScreen = ({data}) => (
-  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Text category='h1'>Nyheter</Text>
-  </Layout>
-);
+  const NewsIcon = (props) => (
+    <Icon {...props} name='activity-outline'/>
+  )
+  const CalendarIcon = (props) => (
+    <Icon {...props} name='calendar-outline'/>
+  )
 
-const TopTabBar = ({ navigation, state }) => (
-  <TabBar
-    selectedIndex={state.index}
-    onSelect={index => navigation.navigate(state.routeNames[index])}>
-    <Tab title='Nyheter'/>
-    <Tab title='Klassen'/>
-  </TabBar>
-);
+  const ClassIcon = (props) => (
+    <Icon {...props} name='people-outline'/>
+  )
 
-const TabNavigator = ({children}) => (
-  <Navigator tabBar={props => <TopTabBar {...props} />}>
-    <Screen name='Child' component={ChildScreen} data={children}/>
-    <Screen name='Class' component={DetailsScreen}/>
-  </Navigator>
-);
+  const SettingsIcon = (props) => (
+    <Icon {...props} name='options-2-outline'/>
+  )
+  
+  return (
+    <SafeAreaView>
+      <TabView selectedIndex={selectedIndex} onSelect={index => setSelectedIndex(index)}>
+        <Tab title="Nyheter" icon={NewsIcon}>
+          <Layout style={styles.tabContainer}>
+            <NewsList news={child.news} />
+          </Layout>
+        </Tab>
+        <Tab title="Schema" icon={CalendarIcon}>
+          <Layout style={styles.tabContainer}>
+            <Calendar calendar={[...child.calendar, ...child.schedule].filter(a => moment(a.startDate).isAfter(moment().startOf('day')) ) }></Calendar>
+          </Layout>
+        </Tab>
+        <Tab title="Klassen" icon={ClassIcon}>
+          <Layout style={styles.tabContainer}>
+            <Text category='h5'>
+              Klass {child.classmates.length ? child.classmates[0].className : ''}
+            </Text>
+            <Classmates classmates={child.classmates}/>
+          </Layout>
+        </Tab>
+        <Tab title="Inställningar" icon={SettingsIcon}>
+          <Layout style={styles.tabContainer}>
+            <Text category='h5'>
+              Inställningar
+            </Text>
+          </Layout>
+        </Tab>
+      </TabView>
+    </SafeAreaView>
+  )
+}
 
-export const AppNavigator = ({children}) => (
-  <NavigationContainer>
-    <TabNavigator children={children }/>
-  </NavigationContainer>
-);
\ No newline at end of file
+const styles = StyleSheet.create({
+  tabContainer: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    paddingTop: 5,
+    paddingLeft: 10,
+    flexDirection: 'column'
+  },
+})
\ No newline at end of file

From 33133dfa0f400f31703ae0ac62ecd35354c0708c Mon Sep 17 00:00:00 2001
From: Christian Landgren <christian@landgren.nu>
Date: Wed, 16 Dec 2020 21:27:59 +0100
Subject: [PATCH 2/4] guardians contact info

---
 packages/app/App.js                           |  1 -
 packages/app/README.md                        | 18 ++++--
 .../app/components/childList.component.js     | 54 ----------------
 .../childTopNavigation.component.js           | 63 -------------------
 .../app/components/contactMenu.component.js   | 17 ++---
 packages/app/components/newsList.component.js | 52 +++++++--------
 packages/app/package-lock.json                |  5 ++
 packages/app/package.json                     |  1 +
 8 files changed, 49 insertions(+), 162 deletions(-)
 delete mode 100644 packages/app/components/childList.component.js
 delete mode 100644 packages/app/components/childTopNavigation.component.js

diff --git a/packages/app/App.js b/packages/app/App.js
index a1aeaf47..95b3b6d7 100644
--- a/packages/app/App.js
+++ b/packages/app/App.js
@@ -9,7 +9,6 @@ import * as eva from '@eva-design/eva';
 import customization from './design/customization.json';
 import children from './output.json';
 
-import {ChildList} from './components/childList.component'
 import {AppNavigator} from './components/tabs.component'
 
 export default () => (
diff --git a/packages/app/README.md b/packages/app/README.md
index 7aa20226..b2ac977a 100644
--- a/packages/app/README.md
+++ b/packages/app/README.md
@@ -1,11 +1,19 @@
 # `app`
 
-> TODO: description
+This is a demo app for using the API
 
 ## Usage
 
-```
-const app = require('app');
+Clone the repo and make sure you have react-native installed:
 
-// TODO: DEMONSTRATE API
-```
+    npm i -g react-native
+
+To run the app in a simulator:
+
+    react-native run-ios
+
+## TODO:
+  [ ] Välj barn
+  [ ] Login
+  [ ] Anmäl frånvaro
+  [ ] Settings
diff --git a/packages/app/components/childList.component.js b/packages/app/components/childList.component.js
deleted file mode 100644
index 41d7c60d..00000000
--- a/packages/app/components/childList.component.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import { Layout, Text, ViewPager, Button, Icon } from '@ui-kitten/components';
-import { NewsList } from './newsList.component'
-import { Calendar } from './calendar.component'
-import { ChildTopNavigation } from './childTopNavigation.component';
-import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
-
-const SelectCategory = ({child}) => {
-
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-
-  return (
-    <BottomNavigation
-      selectedIndex={selectedIndex}
-      onSelect={index => setSelectedIndex(index)}>
-      <BottomNavigationTab title='Nyheter'/>
-      <BottomNavigationTab title='Kalender'/>
-      <BottomNavigationTab title='Klassen'/>
-    </BottomNavigation>
-  );
-};
-export const ChildList = ({children}) => {
-
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-
-  return (
-    <ViewPager
-      selectedIndex={selectedIndex}
-      onSelect={index => setSelectedIndex(index)}>
-      {children.map(child => 
-        <Layout
-        key={child.id}
-        style={{...styles.tab}}
-        level='2'>
-          <ChildTopNavigation child={child}></ChildTopNavigation>
-          <SelectCategory>
-          </SelectCategory>
-          <NewsList news={child.news} />
-          <Calendar calendar={[...child.calendar, ...child.schedule] }></Calendar>
-        </Layout>
-      )}
-    </ViewPager>
-  );
-};
-
-const styles = StyleSheet.create({
-  tab: {
-    height: '100%',
-    paddingTop: 50,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
\ No newline at end of file
diff --git a/packages/app/components/childTopNavigation.component.js b/packages/app/components/childTopNavigation.component.js
deleted file mode 100644
index ec470afe..00000000
--- a/packages/app/components/childTopNavigation.component.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Avatar, Icon, MenuItem, OverflowMenu, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components'
-
-const MenuIcon = (props) => (
-  <Icon {...props} name='more-vertical' />
-)
-
-const InfoIcon = (props) => (
-  <Icon {...props} name='info' />
-)
-
-const LogoutIcon = (props) => (
-  <Icon {...props} name='log-out' />
-)
-
-export const ChildTopNavigation = ({child}) => {
-
-  const [menuVisible, setMenuVisible] = React.useState(false)
-
-  const toggleMenu = () => {
-    setMenuVisible(!menuVisible)
-  }
-
-  const renderMenuAction = () => (
-    <TopNavigationAction icon={MenuIcon} onPress={toggleMenu} />
-  )
-
-  const renderOverflowMenuAction = () => (
-    <React.Fragment>
-      <OverflowMenu anchor={renderMenuAction} visible={menuVisible} onBackdropPress={toggleMenu}>
-        <MenuItem accessoryLeft={InfoIcon} title='Sjukanmälan' />
-        <MenuItem accessoryLeft={InfoIcon} title='Kontakta' />
-        <MenuItem accessoryLeft={LogoutIcon} title='Logga ut' />
-      </OverflowMenu>
-    </React.Fragment>
-  )
-
-  const renderTitle = (props) => (
-    <View style={styles.titleContainer}>
-      <Icon {...props} style={styles.logo} name='person'/>
-      <Text {...props}>
-        {child.name}
-      </Text>
-    </View>
-  )
-
-  return (
-    <TopNavigation title={renderTitle} accessoryRight={renderOverflowMenuAction} />
-  )
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  logo: {
-    marginHorizontal: 16,
-    width: 16,
-    height: 16
-  }
-})
diff --git a/packages/app/components/contactMenu.component.js b/packages/app/components/contactMenu.component.js
index 3c066501..87b84953 100644
--- a/packages/app/components/contactMenu.component.js
+++ b/packages/app/components/contactMenu.component.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { Button, Icon, Layout, MenuItem, OverflowMenu, Text, Divider } from '@ui-kitten/components';
+import { Button, Icon, Layout, MenuItem, MenuGroup, OverflowMenu, Text, Divider } from '@ui-kitten/components';
 import {Linking} from 'react-native'
 
 
@@ -18,19 +18,20 @@ export const ContactMenu = ({contact}) => {
   const CallIcon = (props) => <Icon {...props}  name='phone-outline'/>
   const SMSIcon = (props) => <Icon {...props}  name='message-square-outline'/>
   const EmailIcon = (props) => <Icon {...props}  name='email-outline'/>
+  const MapIcon = (props) => <Icon {...props}  name='map-outline'/>
 
   return (
     <OverflowMenu
       visible={visible}
       anchor={renderToggleButton}
       onBackdropPress={() => setVisible(false)}>
-      {contact.guardians.map(parent =>
-        <>
-          <MenuItem title={`${parent.firstname} ${parent.lastname}`} disabled="true"/>
-          <MenuItem accessoryLeft={CallIcon} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
-          <MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/>
-          {parent.email ? <MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> : null}
-        </>
+      {contact.guardians.map((parent, i) =>
+        <MenuGroup key={i} title={`${parent.firstname} ${parent.lastname}`}>
+          <MenuItem accessoryLeft={CallIcon} disabled={!parent.mobile} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
+          <MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/> 
+          <MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> 
+          <MenuItem accessoryLeft={MapIcon} title={`Hem`} onPress={e => Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/>
+        </MenuGroup>
       )}
     </OverflowMenu>
   );
diff --git a/packages/app/components/newsList.component.js b/packages/app/components/newsList.component.js
index 0db4f201..1e793e5b 100644
--- a/packages/app/components/newsList.component.js
+++ b/packages/app/components/newsList.component.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Card, List, Text } from '@ui-kitten/components'
+import { Card, List, Text, Layout } from '@ui-kitten/components'
 import Markdown from 'react-native-markdown-display'
 import { Image } from 'react-native-svg'
 
@@ -8,25 +8,16 @@ import { Image } from 'react-native-svg'
 export const NewsList = ({news}) => {
 
   const renderItemHeader = (headerProps, info) => (
-    <View {...headerProps} style={styles.header}>
-      <Text category='h6' style={styles.headerText}>
-        {info.item.header}
-      </Text>
+    <View {...headerProps} >
+      <Text category='h6'>{info.item.header}</Text>
+      <Text category='s1'>By Wikipedia</Text>
     </View>
   )
 
-  const renderItemFooter = (footerProps, info) => (
-    <Text {...footerProps}>
-      Publicerad i Skolplattformen
-    </Text>
-  )
-
   const renderItem = (info) => (
     <Card
-      style={styles.item}
-      status='basic'
-      header={headerProps => renderItemHeader(headerProps, info)}
-      footer={footerProps => renderItemFooter(footerProps, info)}>
+      style={styles.card}
+      header={headerProps => renderItemHeader(headerProps, info)}>
       <Markdown style={{ body: {color: 'black', fontSize: 15}, heading1: {color: 'black'} }}>
         {decodeURIComponent(info.item.body)}
       </Markdown>
@@ -34,25 +25,24 @@ export const NewsList = ({news}) => {
   )
 
   return (
-    <List
-      style={styles.container}
-      contentContainerStyle={styles.contentContainer}
-      data={news}
-      renderItem={renderItem} />
+    <Layout style={styles.topContainer} level='1'>
+      <List
+        style={styles.container}
+        contentContainerStyle={styles.contentContainer}
+        data={news}
+        renderItem={renderItem} />
+    </Layout>
   )
 }
 
+
 const styles = StyleSheet.create({
-  header: {
-    backgroundColor: '#eeeeef',
-    minHeight: 30,
-    padding: 25
+  topContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
-  item: {
-    marginVertical: 10,
-    marginRight: 10
+  card: {
+    flex: 1,
+    margin: 2,
   },
-  footer: {
-    backgroundColor: '#000'
-  }
-})
+});
\ No newline at end of file
diff --git a/packages/app/package-lock.json b/packages/app/package-lock.json
index bfd9414a..18e4a683 100644
--- a/packages/app/package-lock.json
+++ b/packages/app/package-lock.json
@@ -8979,6 +8979,11 @@
         }
       }
     },
+    "react-native-maps": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",
+      "integrity": "sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw=="
+    },
     "react-native-markdown-display": {
       "version": "7.0.0-alpha.2",
       "resolved": "https://registry.npmjs.org/react-native-markdown-display/-/react-native-markdown-display-7.0.0-alpha.2.tgz",
diff --git a/packages/app/package.json b/packages/app/package.json
index 310c7e71..fdfdeb26 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,6 +20,7 @@
     "react-native": "0.62.2",
     "react-native-calendar-strip": "^2.0.9",
     "react-native-gesture-handler": "^1.9.0",
+    "react-native-maps": "^0.27.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",

From 4a6812e28a8a02edcb51faf806da06ddfbdadd9f Mon Sep 17 00:00:00 2001
From: Christian Landgren <christian@landgren.nu>
Date: Wed, 16 Dec 2020 23:07:15 +0100
Subject: [PATCH 3/4] added child chooser

---
 packages/app/App.js                           |   5 +-
 .../{tabs.component.js => child.component.js} |  22 ++-
 packages/app/components/children.component.js | 129 ++++++++++++++++++
 .../app/components/contactMenu.component.js   |   8 +-
 packages/app/components/login.component.js    |  20 +++
 .../app/components/navigation.component.js    |  22 +++
 packages/app/package-lock.json                |  19 +++
 packages/app/package.json                     |   2 +
 8 files changed, 216 insertions(+), 11 deletions(-)
 rename packages/app/components/{tabs.component.js => child.component.js} (71%)
 create mode 100644 packages/app/components/children.component.js
 create mode 100644 packages/app/components/login.component.js
 create mode 100644 packages/app/components/navigation.component.js

diff --git a/packages/app/App.js b/packages/app/App.js
index 95b3b6d7..fe06a44e 100644
--- a/packages/app/App.js
+++ b/packages/app/App.js
@@ -7,15 +7,14 @@ import {
 import { EvaIconsPack } from '@ui-kitten/eva-icons';
 import * as eva from '@eva-design/eva';
 import customization from './design/customization.json';
-import children from './output.json';
 
-import {AppNavigator} from './components/tabs.component'
+import { AppNavigator } from './components/navigation.component';
 
 export default () => (
   <>
     <IconRegistry icons={EvaIconsPack}/>
     <ApplicationProvider {...eva} theme={{...eva.light, ...customization}}>
-      <AppNavigator child={children[1]}/>
+      <AppNavigator />
     </ApplicationProvider>
   </>
 )
\ No newline at end of file
diff --git a/packages/app/components/tabs.component.js b/packages/app/components/child.component.js
similarity index 71%
rename from packages/app/components/tabs.component.js
rename to packages/app/components/child.component.js
index 3a470c93..d12c6922 100644
--- a/packages/app/components/tabs.component.js
+++ b/packages/app/components/child.component.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import { StyleSheet } from 'react-native';
-import { TabBar, Tab, TabView, Layout, Text, Icon } from '@ui-kitten/components'
+import { TabBar, TopNavigation, TopNavigationAction, Tab, TabView, Layout, Text, Divider, Icon } from '@ui-kitten/components'
 import { NewsList } from './newsList.component'
 import { Calendar } from './calendar.component'
 import { Classmates } from './classmates.component'
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import moment from 'moment'
 
-export const AppNavigator = ({child}) => {
+export const Child = ({route, navigation}) => {
   const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const { child } = route.params;
 
   const NewsIcon = (props) => (
     <Icon {...props} name='activity-outline'/>
@@ -24,9 +25,21 @@ export const AppNavigator = ({child}) => {
   const SettingsIcon = (props) => (
     <Icon {...props} name='options-2-outline'/>
   )
+
+  const BackIcon = (props) => (
+    <Icon {...props} name='arrow-back' />
+  )
+  const BackAction = () => (
+    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
+  )
   
+  const navigateBack = () => {
+    navigation.goBack()
+  }
+
   return (
-    <SafeAreaView>
+    <SafeAreaView style={{ flex: 1 }}>
+      <TopNavigation title={ child.name} alignment='center' accessoryLeft={BackAction} />
       <TabView selectedIndex={selectedIndex} onSelect={index => setSelectedIndex(index)}>
         <Tab title="Nyheter" icon={NewsIcon}>
           <Layout style={styles.tabContainer}>
@@ -35,7 +48,7 @@ export const AppNavigator = ({child}) => {
         </Tab>
         <Tab title="Schema" icon={CalendarIcon}>
           <Layout style={styles.tabContainer}>
-            <Calendar calendar={[...child.calendar, ...child.schedule].filter(a => moment(a.startDate).isAfter(moment().startOf('day')) ) }></Calendar>
+            <Calendar calendar={[...child.calendar = [], ...child.schedule = []].filter(a => moment(a.startDate).isAfter(moment().startOf('day')) ) }></Calendar>
           </Layout>
         </Tab>
         <Tab title="Klassen" icon={ClassIcon}>
@@ -54,6 +67,7 @@ export const AppNavigator = ({child}) => {
           </Layout>
         </Tab>
       </TabView>
+      
     </SafeAreaView>
   )
 }
diff --git a/packages/app/components/children.component.js b/packages/app/components/children.component.js
new file mode 100644
index 00000000..f9c63b13
--- /dev/null
+++ b/packages/app/components/children.component.js
@@ -0,0 +1,129 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { SafeAreaView } from 'react-native'
+import moment from 'moment'
+import { Divider, Button, Icon, Layout, Text, TopNavigation, TopNavigationAction, List, Card, Avatar } from '@ui-kitten/components'
+import children from '../output.json'
+
+const BackIcon = (props) => (
+  <Icon {...props} name='arrow-back' />
+)
+
+const NotificationIcon = (style) => (
+  <Icon {...style} name='activity-outline' />
+)
+
+const CalendarIcon = (style) => (
+  <Icon {...style} name='calendar-outline' />
+)
+
+const PeopleIcon = (style) => (
+  <Icon {...style} name='people-outline' />
+)
+
+export const Children = ({ navigation }) => {
+
+  const abbrevations = {
+    G: 'Gymnasiet',
+    GR: 'Grundskolan',
+    F: 'Förskoleklass',
+  }
+  const navigateBack = () => {
+    navigation.goBack()
+  }
+
+  const navigateChild = (child) => {
+    navigation.navigate('Child', {child})
+  }
+
+  const BackAction = () => (
+    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
+  )
+
+  const Header = (props, info) => (
+    <View {...props}>
+      <Text category='h6'>
+        {info.item.name.split('(')[0]}
+      </Text>
+      <Text category='s1'>
+        {`${info.item.status.split(';').map(status => abbrevations[status]).join(', ')}`}
+      </Text>
+    </View>
+  )
+
+  const Footer = (props, info) => (
+    <View style={styles.itemFooter}>
+      <Button
+        style={styles.iconButton}
+        status='control'
+        size='small'
+        accessoryLeft={NotificationIcon}>
+        {`${info.item.news.length}`}
+      </Button>
+      <Button
+        style={styles.iconButton}
+        status='control'
+        size='small'
+        accessoryLeft={CalendarIcon}>
+        {`${info.item.notifications.filter(c => moment(c.startDate).isSame('day') ).length}`}
+      </Button>
+      <Button
+        style={styles.iconButton}
+        status='control'
+        size='small'
+        accessoryLeft={PeopleIcon}>
+        {`${info.item.classmates.length} i klassen`}
+      </Button>
+    </View>
+  )
+
+  const renderItem = (info) => (
+    <Card 
+      style={styles.card} 
+      header={headerProps => Header(headerProps, info)} 
+      footer={footerProps => Footer(footerProps, info)}
+      onPress={() => navigateChild(info.item)}>
+      {info.item.menu.map(menu => 
+        <Text appearance='hint' category='c1'>
+        {`${menu.title.split(' -')[0]} - ${menu.description.split('<br/>')[0]}`}
+        </Text>
+      )}
+    </Card>
+  )
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <TopNavigation title='Dina barn' alignment='center' accessoryLeft={BackAction} />
+      <Divider/>
+      <Layout style={{ flex: 1}} level='1'>
+        <List
+          style={styles.container}
+          contentContainerStyle={styles.contentContainer}
+          data={children}
+          renderItem={renderItem} />
+      </Layout>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  topContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  card: {
+    flex: 1,
+    margin: 10
+  },
+  itemDescription: {
+    zIndex: 1,
+    marginVertical: 16
+  },
+  itemFooter: {
+    flexDirection: 'row',
+    paddingHorizontal: 12
+  },
+  iconButton: {
+    paddingHorizontal: 0
+  }
+})
diff --git a/packages/app/components/contactMenu.component.js b/packages/app/components/contactMenu.component.js
index 87b84953..8163ae65 100644
--- a/packages/app/components/contactMenu.component.js
+++ b/packages/app/components/contactMenu.component.js
@@ -27,10 +27,10 @@ export const ContactMenu = ({contact}) => {
       onBackdropPress={() => setVisible(false)}>
       {contact.guardians.map((parent, i) =>
         <MenuGroup key={i} title={`${parent.firstname} ${parent.lastname}`}>
-          <MenuItem accessoryLeft={CallIcon} disabled={!parent.mobile} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
-          <MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/> 
-          <MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> 
-          <MenuItem accessoryLeft={MapIcon} title={`Hem`} onPress={e => Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/>
+          <MenuItem accessoryLeft={CallIcon} visible={!parent.mobile} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
+          <MenuItem accessoryLeft={SMSIcon} visible={!parent.mobile} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/> 
+          <MenuItem accessoryLeft={EmailIcon} visible={!parent.email} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> 
+          <MenuItem accessoryLeft={MapIcon} visible={!parent.address} title={`Hem`} onPress={e => Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/>
         </MenuGroup>
       )}
     </OverflowMenu>
diff --git a/packages/app/components/login.component.js b/packages/app/components/login.component.js
new file mode 100644
index 00000000..bbc2fd31
--- /dev/null
+++ b/packages/app/components/login.component.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { Button, Divider, Layout, TopNavigation } from '@ui-kitten/components';
+
+export const Login = ({ navigation }) => {
+
+  const navigateDetails = () => {
+    navigation.navigate('Children');
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <TopNavigation title='Skolplattformen' alignment='center'/>
+      <Divider/>
+      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Button onPress={navigateDetails}>Login</Button>
+      </Layout>
+    </SafeAreaView>
+  );
+};
\ No newline at end of file
diff --git a/packages/app/components/navigation.component.js b/packages/app/components/navigation.component.js
new file mode 100644
index 00000000..1fac2cfb
--- /dev/null
+++ b/packages/app/components/navigation.component.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { Login } from './login.component';
+import { Children } from './children.component';
+import { Child } from './child.component';
+
+const { Navigator, Screen } = createStackNavigator();
+
+const HomeNavigator = () => (
+  <Navigator headerMode='none'>
+  <Screen name='Login' component={Login}/>
+  <Screen name='Children' component={Children}/>
+  <Screen name='Child' component={Child}/>
+  </Navigator>
+);
+
+export const AppNavigator = (children) => (
+  <NavigationContainer>
+    <HomeNavigator/>
+  </NavigationContainer>
+);
diff --git a/packages/app/package-lock.json b/packages/app/package-lock.json
index 18e4a683..bc02423f 100644
--- a/packages/app/package-lock.json
+++ b/packages/app/package-lock.json
@@ -1591,6 +1591,11 @@
       "integrity": "sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==",
       "dev": true
     },
+    "@react-native-community/masked-view": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz",
+      "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ=="
+    },
     "@react-navigation/core": {
       "version": "5.14.4",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.14.4.tgz",
@@ -1643,6 +1648,15 @@
         "nanoid": "^3.1.15"
       }
     },
+    "@react-navigation/stack": {
+      "version": "5.12.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.12.8.tgz",
+      "integrity": "sha512-wUJFbU0v606RBXOUxHToCXJNmiwxtFYhN2TFvjxCZ3PJU+OWWx8HTmn99pT3rVH4Ax2cfO5BDUy9v+r74ZrIWw==",
+      "requires": {
+        "color": "^3.1.3",
+        "react-native-iphone-x-helper": "^1.3.0"
+      }
+    },
     "@types/babel__core": {
       "version": "7.1.12",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
@@ -8979,6 +8993,11 @@
         }
       }
     },
+    "react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
+    },
     "react-native-maps": {
       "version": "0.27.1",
       "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",
diff --git a/packages/app/package.json b/packages/app/package.json
index fdfdeb26..aa7bceff 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -12,8 +12,10 @@
   "dependencies": {
     "@eva-design/eva": "2.0.0",
     "@eva-design/material": "^2.0.0",
+    "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/material-top-tabs": "^5.3.10",
     "@react-navigation/native": "^5.8.10",
+    "@react-navigation/stack": "^5.12.8",
     "@ui-kitten/components": "5.0.0",
     "@ui-kitten/eva-icons": "5.0.0",
     "react": "16.11.0",

From 9fca122e3b4b8e8734c30065339bdb2213ca84a1 Mon Sep 17 00:00:00 2001
From: Christian Landgren <christian@landgren.nu>
Date: Thu, 17 Dec 2020 11:20:28 +0100
Subject: [PATCH 4/4] =?UTF-8?q?handle=20date=20parsing=20on=20server=20sid?=
 =?UTF-8?q?e=20instead=20=C2=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/api/index.js       | 2 +-
 packages/api/lib/backend.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/api/index.js b/packages/api/index.js
index b15674f6..1cc07041 100644
--- a/packages/api/index.js
+++ b/packages/api/index.js
@@ -32,7 +32,7 @@ api.registerSecurityHandler('bearerAuth', (c, req, res) => {
 // register operation handlers
 api.register({
   login: async (c, req, res) => {
-    console.log('login initiated')
+    console.log('login initiated', c.request.query.socialSecurityNumber)
     const token = await backend.login(c.request.query.socialSecurityNumber)
     return res.status(200).json(token)
   },
diff --git a/packages/api/lib/backend.js b/packages/api/lib/backend.js
index dcdbaa1d..cbd0dcef 100644
--- a/packages/api/lib/backend.js
+++ b/packages/api/lib/backend.js
@@ -40,7 +40,7 @@ const getNews = (childId, cookie) => fetchJson(urls.news(childId), cookie)
   .catch(err => ({err}))
 
 const getCalendar = (childId, cookie) => fetchJson(urls.calendar(childId), cookie)
-  .then(calendar => calendar.map(({title, id, description, location, longEventDateTime: startDate, longEndDateTime: endDate, allDayEvent: allDay}) => ({title, id, description, location, startDate, endDate, allDay})))
+  .then(calendar => calendar.map(({title, id, description, location, longEventDateTime: startDate, longEndDateTime: endDate, allDayEvent: allDay}) => ({title, id, description, location, startDate: moment(startDate, 'YYYY-MM-DD hh:mm').toISOString(), endDate: moment(endDate, 'YYYY-MM-DD hh:mm').toISOString(), allDay})))
   .catch(err => ({err}))
 
 const getNotifications = (childId, cookie) => fetchJson(urls.notifications(childId), cookie)
@@ -49,7 +49,7 @@ const getNotifications = (childId, cookie) => fetchJson(urls.notifications(child
   
 const getMenu = (childId, cookie) => fetchJson(urls.menu(childId), cookie).catch(err => ({err}))
 const getSchedule = (childId, cookie) => fetchJson(urls.schedule(childId, moment().format('YYYY-MM-DD'), moment().add(7, 'days').format('YYYY-MM-DD')), cookie)
-  .then(schedule => schedule.map(({title, id, description, location, longEventDateTime: startDate, longEndDateTime: endDate, allDayEvent: allDay, mentor}) => ({title, id, description, location, startDate, endDate, allDay, mentor})))
+  .then(schedule => schedule.map(({title, id, description, location, longEventDateTime: startDate, longEndDateTime: endDate, allDayEvent: allDay, mentor}) => ({title, id, description, location, startDate: moment(startDate, 'YYYY-MM-DD hh:mm').toISOString(), endDate: moment(endDate, 'YYYY-MM-DD hh:mm').toISOString(), allDay, mentor})))
   .catch(err => ({err}))
 
 const getClassmates = (childId, cookie) => fetchJson(urls.classmates(childId), cookie)