Add use-async-storage

packages/app/components/children.component.js

@@ -5,8 +5,10 @@ import useFetch from 'use-http'
 import moment from 'moment'
 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'
-import {api} from '../lib/backend'
+import {useAsyncStorage} from 'use-async-storage'
+import {api, loadChildrenDetails} from '../lib/backend'
+import faker from 'faker'
+faker.locale = 'sv'
 
 const colors = ['primary', 'success', 'info', 'warning', 'danger']
 
@@ -26,40 +28,33 @@ const PeopleIcon = (style) => (
   <Icon {...style} name='people-outline' />
 )
 
+const fake = fullChildren => fullChildren.map(child => ({
+  ...child,
+  name: faker.fake('{{name.firstName}} {{name.lastName}} (elev)'),
+  classmates: child.classmates.map(classmate => ({...classmate, ...faker.helper.createCard()}))
+}))
+
 export const Children = ({navigation}) => {
-  const [savedChildren, setSavedChildren, clearSavedChildren] = useAsyncStorage('@children', '[]')
-  const [children, setChildren] = useState(JSON.parse(savedChildren) || []) 
+  const [children, setChildren] = useAsyncStorage('@children', [])
 
   useEffect(() => {
     const load = async () => {
       try {
-        const children = await api.getChildren()
-
-        if (!children.length) {
+        const childrenList = children?.length || await api.getChildren()
+        if (!childrenList.length) {
           return navigation.navigate('Login', {error: 'Hittar inga barn med det personnumret'})
         }
-        console.log('got children', children)
-        //setChildren(children) 
 
-        //TODO: lazy load these 
-        const fullChildren = await Promise.all(children.map(async child => ({
-          ...child,
-          news: await api.getNews(child),
-          calendar: await api.getCalendar(child),
-          classmates: await api.getClassmates(child),
-          schedule: await api.getSchedule(child, moment().startOf('day'), moment().add(7,'days').endOf('day')),
-          menu: await api.getMenu(child),
-          notifications:  await api.getNotifications(child),
-        })))
-        console.log('full', fullChildren)
+        // Update the list with all details we get the most often updated info first
+        const fullChildren = await loadChildrenDetails(childrenList, {calendar: true, schedule: true, news: true, menu:true, notifications: true, classmates: true})
         setChildren(fullChildren)
-        setSavedChildren(JSON.stringify(savedChildren))
   
       } catch (err) {
+        console.log('err', err)
         navigation.navigate('Login', {error: 'Fel uppstod, försök igen'})
       }
     }
-    load()
+    if (api.isLoggedIn) load()
   }, [])
 
   return <ChildrenView navigation={navigation} children={children}></ChildrenView>
@@ -149,7 +144,7 @@ export const ChildrenView = ({ navigation, children, eva }) => {
 
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
-      <TopNavigation title='Dina barn' alignment='center' accessoryLeft={BackAction} />
+      <TopNavigation title='Dina barn' alignment='center' accessoryLeft={BackAction}  />
       <Divider/>
       <Layout style={{ flex: 1 }} level='1'>
         {children.length ? <List

packages/app/components/login.component.js

@@ -3,7 +3,7 @@ import { Platform } from 'react-native'
 import { SafeAreaView, StyleSheet, Image, Linking, KeyboardAvoidingView, View } 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'
+import {useAsyncStorage} from 'use-async-storage'
 import { ScrollView } from 'react-native-gesture-handler'
 import {api} from '../lib/backend'
 
@@ -17,7 +17,7 @@ export const Login = ({ navigation, route }) => {
   const [argument, setArgument] = React.useState('öppna')
   const [error, setError] = React.useState(null)
   const [hasBankId, setHasBankId] = React.useState(false)
-  const [socialSecurityNumber, setSocialSecurityNumber, clearSocialSecurityNumber] = useAsyncStorage('@socialSecurityNumber')
+  const [socialSecurityNumber, setSocialSecurityNumber] = useAsyncStorage('@socialSecurityNumber')
   const [cookie, setCookie, clearCookie] = useAsyncStorage('@cookie')
 
   useEffect(() => {
@@ -107,8 +107,8 @@ export const Login = ({ navigation, route }) => {
       <TopNavigation title={`Skolplattformen.org - det ${argument} alternativet`} alignment='center'/>
       {loggedIn ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
 
-        <Image source={require('../assets/man.png')} style={{maxHeight: 300, width: '100%' }}></Image>
-        <View style={{ margin: 30, justifyContent: 'flex-start', alignItems: 'flex-start', flex: 1}}>
+        <Image source={require('../assets/man.png')} style={{maxHeight: 300, width: '100%', borderBottomWidth:1 }}></Image>
+        <View style={{ marginTop: 80, justifyContent: 'flex-start', alignItems: 'flex-start', flex: 1}}>
           <Text category="h4">{socialSecurityNumber}</Text>
           <Text>{error ? error : 'Hurra, du är inloggad!'}</Text>
           <Button
@@ -136,6 +136,7 @@ export const Login = ({ navigation, route }) => {
             <Input label='Personnummer' autoFocus={true} value={socialSecurityNumber}
             style={{minHeight:70}}
               accessoryLeft = {PersonIcon}
+              keyboardType='numeric'
               caption={error && error.message || ''}
               onChangeText = {text => handleInput(text)}
               placeholder="Ditt personnr (10 eller 12 siffror)"/>

packages/app/components/navigation.component.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
-import useAsyncStorage from '@rnhooks/async-storage'
+import { useAsyncStorage } from 'use-async-storage'
 import { Login } from './login.component'
 import { Children } from './children.component'
 import { Child } from './child.component'

packages/app/lib/backend.js

@@ -1,3 +1,15 @@
+import moment from 'moment'
 import init from "@skolplattformen/embedded-api"
 export const api = init(fetch)  // keep a static version of this object so we can keep the session alive
 
+
+export const loadChildrenDetails = async (children, what = {news: true}) => await Promise.all(children.map(async child => ({
+  ...child,
+  news: !what.news ? child.news : await api.getNews(child),
+  calendar: !what.calendar ? child.calendar : await api.getCalendar(child),
+  notifications:  !what.notifications ? child.notifications : await api.getNotifications(child),
+  schedule: !what.schedule ? child.schedule : await api.getSchedule(child, moment().startOf('day'), moment().add(7,'days').endOf('day')),
+  classmates: !what.classmates ? child.classmates : await api.getClassmates(child),
+  menu: !what.menu ? child.menu : await api.getMenu(child),
+})))
+

packages/app/package.json

@@ -22,6 +22,7 @@
     "@ui-kitten/components": "5.0.0",
     "@ui-kitten/eva-icons": "5.0.0",
     "buffer": "^6.0.3",
+    "faker": "^5.1.0",
     "personnummer": "^3.1.1",
     "react": "16.11.0",
     "react-native": "0.62.2",
@@ -36,6 +37,7 @@
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",
     "react-native-tab-view": "^2.15.2",
+    "use-async-storage": "^1.2.0",
     "use-http": "^1.0.16"
   },
   "devDependencies": {