Merge remote-tracking branch 'origin/main' into fix/android-app-id-and-key

packages/app/README.md

@@ -14,7 +14,7 @@ To run the app in a simulator:
 
 ## TODO
 
-  [ ] Välj barn
-  [ ] Login
+  [x] Välj barn
+  [x] Login
   [ ] Anmäl frånvaro
   [ ] Settings

packages/app/components/children.component.js

@@ -1,9 +1,9 @@
 import React, {useState, useCallback, useEffect } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, Image } from 'react-native'
 import { useFocusEffect } from '@react-navigation/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 { Divider, Button, Icon, Layout, Text, TopNavigation, TopNavigationAction, List, Card, Avatar, Spinner } from '@ui-kitten/components'
 // import children from '../output.json'
 import useAsyncStorage from '@rnhooks/async-storage'
 
@@ -33,6 +33,7 @@ export const Children = ({ navigation }) => {
   useEffect(useCallback(() => {
     fetch(`${baseUrl}/children/`, {headers}).then(res => res.json()).then(children => {
       // TODO: performance
+      console.log('fetch children', children)
       Promise.all((children || [] ).map(async child => ({
         ...child,
         classmates: await fetch(`${baseUrl}/children/${child.sdsId}/classmates`, {headers}).then(res => res.json()),
@@ -67,13 +68,18 @@ export const Children = ({ navigation }) => {
   )
 
   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] || status).join(', ')}`}
-      </Text>
+    <View {...props} style={{flexDirection: 'row', backgroundColor: '#FFf8f6'}}>
+      <View style={{margin: 20}}>
+        <Avatar source={require('../assets/avatar.png')} />
+      </View>
+      <View style={{margin: 20}}>
+        <Text category='h6'>
+          {info.item.name.split('(')[0]}
+        </Text>
+        <Text category='s1'>
+          {`${(info.item.classmates || [])[0].className} ${info.item.status.split(';').map(status => abbrevations[status] || status).join(', ')}`}
+        </Text>
+      </View>
     </View>
   )
 
@@ -117,7 +123,7 @@ export const Children = ({ navigation }) => {
   )
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
       <TopNavigation title='Dina barn' alignment='center' accessoryLeft={BackAction} />
       <Divider/>
       <Layout style={{ flex: 1}} level='1'>
@@ -127,6 +133,8 @@ export const Children = ({ navigation }) => {
           data={children}
           renderItem={renderItem} />
           : <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+              <Image source={require('../assets/undraw_teaching_f1cm.png')} style={{height: 400, width: '100%'}}></Image>
+              <Spinner size='large'/>
               <Text category='h1'>Laddar...</Text>
             </Layout>}
       </Layout>

packages/app/components/login.component.js

@@ -1,7 +1,5 @@
 import React, { useEffect } from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-
-import {Linking} from 'react-native'
+import { SafeAreaView, StyleSheet, Image, Linking } from 'react-native';
 import { Button, Icon, Modal, Card, Text, ImageBackground, Divider, Layout, TopNavigation, Input } from '@ui-kitten/components';
 import Personnummer from 'personnummer'
 import useAsyncStorage from '@rnhooks/async-storage';
@@ -20,7 +18,7 @@ export const Login = ({ navigation }) => {
 
   useEffect(() => {
     setValid(Personnummer.valid(socialSecurityNumber))
-    // setHasBankId(Linking.canOpenUrl('bankid://'))
+    //setHasBankId(Linking.canOpenURL('bankid://'))
   }, [socialSecurityNumber])
 
   useEffect(() => {
@@ -64,10 +62,9 @@ export const Login = ({ navigation }) => {
       const token = await fetch(`${baseUrl}/login?socialSecurityNumber=${socialSecurityNumber}`, {method: 'POST'}).then(res => res.json())
 
       console.log('got token', token)
-      if (hasBankId) Linking.openURL(`bankid:///?autostarttoken=${token.token}`)
-      const {token: jwt} = await fetch(`${baseUrl}/login/${token.order}/jwt`, {timeoutInterval: 60000}).then(res => res.ok ? res : Promise.reject(res.json())).then(res => res.json())
-      console.log('got jwt', jwt)
-      await setJwt(jwt)
+      try {if (hasBankId) Linking.openURL(`bankid:///?autostarttoken=${token.token}`)} catch(err){ setHasBankId(false)}
+      const jwt = await fetch(`${baseUrl}/login/${token.order}/jwt`, {timeoutInterval: 60000}).then(res => res.ok ? res : Promise.reject(res.json())).then(res => res.json())
+      await setJwt(jwt.token || jwt)
       setVisible(false)
       if (jwt) return navigateToChildren([])
   } catch (err) {
@@ -82,24 +79,33 @@ export const Login = ({ navigation }) => {
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
       <TopNavigation title={`Skolplattformen.org - det ${argument} alternativet`} alignment='center'/>
-      {jwt ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
-        <Text category="h3">{socialSecurityNumber}</Text>
-        <Button 
-          onPress={() => logout()}>
-          Logga ut
-        </Button>
+      {jwt ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20}}>
 
+        <Image source={require('../assets/undraw_studying_s3l7.png')} style={{height: 400, width: '100%'}}></Image>
+        <Text category="h3">{socialSecurityNumber}</Text>
         <Button
           status="success"
+          size="medium"
+          style={{marginTop: 10, width: 200}}
           accessoryRight = {CheckIcon}
           onPress={() => navigateToChildren()}>
           Fortsätt
         </Button>
+        <Button 
+          onPress={() => logout()}
+          accessoryRight={LogoutIcon}
+          style={{marginTop: 10, width: 200}}
+          size="medium">
+          Logga ut
+        </Button>
+
+       
       </Layout>
-      : <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
-            <Text category="h3">Vårdnadshavare</Text>
+      : <Layout style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
+          <Image source={require('../assets/undraw_back_to_school_inwc.png')} style={{height: 400, width: '100%'}}></Image>
+          <Text category="h3">Vårdnadshavare</Text>
             <Input label='Personnummer' autoFocus={true} value={socialSecurityNumber}
               accessoryLeft = {PersonIcon}
               caption={error && error.message || ''}

packages/app/components/newsItem.component.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import { SafeAreaView, StyleSheet, View, ScrollView, Image } from 'react-native'
+import { Card, Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components'
+import Markdown from 'react-native-markdown-display'
+
+const BackIcon = (props) => (
+  <Icon {...props} name='arrow-back' />
+)
+
+export const NewsItem = ({ navigation, route }) => {
+  const { newsItem } = route.params
+
+  const navigateBack = () => {
+    navigation.goBack()
+  }
+
+  const BackAction = () => (
+    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
+  )
+
+  const renderItemHeader = (headerProps, newsItem) => (
+    <View {...headerProps}>
+      <Text category='h3'>
+        {newsItem.header}
+      </Text>
+    </View>
+  )
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }} >
+      <TopNavigation title='Nyhet från Skolplattformen' alignment='center' accessoryLeft={BackAction} />
+      <Divider/>
+      
+      <Layout style={styles.topContainer} level='1'>
+        <ScrollView>
+          <Card style={styles.card} header={headerProps => renderItemHeader(headerProps, newsItem)}>
+            <Markdown style={{ body: {color: 'black'}, heading1: {color: 'black'} }}>
+              {decodeURIComponent(newsItem.body)}
+            </Markdown>
+          </Card>
+        </ScrollView>
+      </Layout>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  topContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  card: {
+    flex: 1,
+    margin: 2
+  }
+})

packages/app/package-lock.json

@@ -9235,6 +9235,11 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-fix-image": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-fix-image/-/react-native-fix-image-2.1.0.tgz",
+      "integrity": "sha512-qn4xItNSKfwlSkMHgxH9cusUQuk5Lhag9aHqL9ESxnCDUDwqS6rsWuOYt/JlncaKhsCc9cANFomCLlY8+Ffuaw=="
+    },
     "react-native-gesture-handler": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.9.0.tgz",

packages/app/package.json

@@ -24,6 +24,7 @@
     "react": "16.11.0",
     "react-native": "0.62.2",
     "react-native-calendar-strip": "^2.0.9",
+    "react-native-fix-image": "^2.1.0",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-maps": "^0.27.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",