added classmates

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>
   </>
 )

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'
+  }
 });

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%",
+  },
+});

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>
+  );
+};

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'

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>
-);
+const styles = StyleSheet.create({
+  tabContainer: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    paddingTop: 5,
+    paddingLeft: 10,
+    flexDirection: 'column'
+  },
+})