navigation and api working

packages/app/components/children.component.js

@@ -126,7 +126,9 @@ export const Children = ({ navigation }) => {
           contentContainerStyle={styles.contentContainer}
           data={children}
           renderItem={renderItem} />
-          : <Text category="c1">Laddar...</Text>}
+          : <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+              <Text category='h1'>Laddar...</Text>
+            </Layout>}
       </Layout>
     </SafeAreaView>
   )
@@ -142,7 +144,9 @@ const styles = StyleSheet.create({
     margin: 10
   },
   itemDescription: {
-    zIndex: 1,
+    marginVertical: 16
+  },
+  loading: {
     marginVertical: 16
   },
   itemFooter: {

packages/app/components/details.component.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { SafeAreaView } from 'react-native';
-import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';
-
-const BackIcon = (props) => (
-  <Icon {...props} name='arrow-back' />
-);
-
-export const DetailsScreen = ({ navigation }) => {
-
-  const navigateBack = () => {
-    navigation.goBack();
-  };
-
-  const BackAction = () => (
-    <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
-  );
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <TopNavigation title='MyApp' alignment='center' accessoryLeft={BackAction}/>
-      <Divider/>
-      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <Text category='h1'>DETAILS</Text>
-      </Layout>
-    </SafeAreaView>
-  );
-};

packages/app/components/login.component.js

@@ -20,16 +20,14 @@ export const Login = ({ navigation }) => {
 
   useEffect(() => {
     setValid(Personnummer.valid(socialSecurityNumber))
-    if (jwt) navigateDetails([])
-
-    //setHasBankId(Linking.canOpenUrl('bankid://'))
+    // setHasBankId(Linking.canOpenUrl('bankid://'))
   }, [socialSecurityNumber])
 
   useEffect(() => {
     setArgument(funArguments[Math.floor(Math.random() * funArguments.length)])
   }, [])
 
-  const navigateDetails = (children) => {
+  const navigateToChildren = (children) => {
     console.log('continuing..')
     navigation.navigate('Children', {children});
   };
@@ -67,28 +65,14 @@ export const Login = ({ navigation }) => {
 
       console.log('got token', token)
       if (hasBankId) Linking.openURL(`bankid:///?autostarttoken=${token.token}`)
-      const jwt = await fetch(`${baseUrl}/login/${token.order}/jwt`, {timeoutInterval: 60000}).then(res => res.json())
+      const 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)
-      console.log('requesting children...')
       setVisible(false)
-      if (jwt) return navigateDetails([])
-   } catch (err) {
+      if (jwt) return navigateToChildren([])
+  } catch (err) {
       console.error(err)
-      setError(err.message)
-    }
-  }
-
-  // TODO - move this logic to other file than login...
-  const getChildren = async (jwt) => {
-    const headers = {authorization: 'Bearer ' + jwt}
-    try {
-      console.log('requesting children...', {headers})
-      const children = await fetch(`${baseUrl}/children`, {headers}).then(res => res.json())
-      console.log('got children', children)
-      return children
-    } catch (err) {
-      setError(children.err)
+      setError(err.message || err)
     }
   }
 
@@ -100,29 +84,45 @@ export const Login = ({ navigation }) => {
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <TopNavigation title={`Skolplattformen.org - det ${argument} alternativet`} alignment='center'/>
-      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
-      <Text category="h3">Vårdnadshavare</Text>
-        <Input label='Personnummer' autoFocus={true} value={socialSecurityNumber}
-          accessoryLeft = {PersonIcon}
-          caption={error && error.message || ''}
-          onChangeText = {text => handleInput(text)}
-          placeholder="Ditt personnr (12 siffror)"/>
-        <Button onPress={startLogin} style={{marginTop: 7, width: "100%"}} 
-          appearence='ghost' 
-          disabled={!valid}
-          status='primary'
-          accessoryRight={SecureIcon}
-          size='medium'>
-          Öppna BankID
+      {jwt ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
+        <Text category="h3">{socialSecurityNumber}</Text>
+        <Button 
+          onPress={() => logout()}>
+          Logga ut
+        </Button>
+
+        <Button
+          status="success"
+          accessoryRight = {CheckIcon}
+          onPress={() => navigateToChildren()}>
+          Fortsätt
         </Button>
       </Layout>
-      <Modal
+      : <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
+            <Text category="h3">Vårdnadshavare</Text>
+            <Input label='Personnummer' autoFocus={true} value={socialSecurityNumber}
+              accessoryLeft = {PersonIcon}
+              caption={error && error.message || ''}
+              onChangeText = {text => handleInput(text)}
+              placeholder="Ditt personnr (10 eller 12 siffror)"/>
+            <Button onPress={startLogin} style={{marginTop: 7, width: "100%"}} 
+              appearence='ghost' 
+              disabled={!valid}
+              status='primary'
+              accessoryRight={SecureIcon}
+              size='medium'>
+              Öppna BankID
+            </Button>
+          </Layout>
+        }
+        <Modal
         visible={visible}
         style={styles.modal}
         backdropStyle={styles.backdrop}
         onBackdropPress={() => setVisible(false)}>
         <Card disabled={true}>
           {hasBankId ? <Text style={{margin: 10}}>Öppnar BankID. Växla tillbaka till denna app sen.</Text> : <Text style={{margin: 10}}>Väntar på BankID...</Text>}
+          
           <Button 
             visible={!jwt}
             onPress={() => setVisible(false)}>

packages/app/components/navigation.component.js

@@ -4,21 +4,21 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { Login } from './login.component';
 import { Children } from './children.component';
 import { Child } from './child.component';
-import { DetailsScreen } from './details.component';
+import { NewsItem } from './newsItem.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}/>
-  <Screen name='Details' component={DetailsScreen}/>
+    <Screen name='Login' component={Login}/>
+    <Screen name='Children' component={Children}/>
+    <Screen name='Child' component={Child}/>
+    <Screen name='NewsItem' component={NewsItem}/>
   
   </Navigator>
 );
 
-export const AppNavigator = (children) => (
+export const AppNavigator = () => (
   <NavigationContainer>
     <HomeNavigator/>
   </NavigationContainer>

packages/app/components/newsList.component.js

@@ -1,26 +1,26 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Card, List, Text, Layout } from '@ui-kitten/components'
-import Markdown from 'react-native-markdown-display'
 import { Image } from 'react-native-svg'
+import { NavigationContainer } from '@react-navigation/native'
+import { useNavigation } from '@react-navigation/native'
 
 
 export const NewsList = ({news}) => {
+  const navigation = useNavigation()
 
   const renderItemHeader = (headerProps, info) => (
     <View {...headerProps} >
       <Text category='h6'>{info.item.header}</Text>
-      <Text category='s1'>By Wikipedia</Text>
+      <Text category='s1'>Publicerad på Skolplattformen</Text>
     </View>
   )
 
   const renderItem = (info) => (
     <Card
       style={styles.card}
+      onPress={() => navigation.navigate('NewsItem', {newsItem: info.item})}
       header={headerProps => renderItemHeader(headerProps, info)}>
-      <Markdown style={{ body: {color: 'black', fontSize: 15}, heading1: {color: 'black'} }}>
-        {decodeURIComponent(info.item.body)}
-      </Markdown>
     </Card>
   )