Skip to content

Commit

Permalink
fix: 馃悰 Updated api dependencies (#71)
Browse files Browse the repository at this point in the history 
* fix: 馃悰 Updated api dependencies

* feat: 馃幐 Image component with cookie injection
  • Loading branch information
@JohanObrink
JohanObrink committed Feb 11, 2021
1 parent 27229cc commit 82cbb09
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 169 deletions.
42 changes: 21 additions & 21 deletions packages/app/components/childListItem.component.js
View file
@@ -1,6 +1,6 @@
import React from 'react'
import {StyleSheet, View, Image, SafeAreaView} from 'react-native'
import {DateTime} from 'luxon'
import { StyleSheet, View } from 'react-native'
import { DateTime } from 'luxon'
import moment from 'moment'
import {
useNotifications,
Expand All @@ -10,7 +10,7 @@ import {
useMenu,
useSchedule,
} from '@skolplattformen/api-hooks'
import {Button, Icon, Text, Card, Avatar} from '@ui-kitten/components'
import { Button, Icon, Text, Card, Avatar } from '@ui-kitten/components'

const NotificationsIcon = (props) => (
<Icon {...props} name="alert-circle-outline" />
Expand All @@ -22,18 +22,18 @@ const CalendarIcon = (props) => <Icon {...props} name="calendar-outline" />

const PeopleIcon = (props) => <Icon {...props} name="people-outline" />

export const ChildListItem = ({navigation, child, color}) => {
const {data: notifications, status: notificationsStatus} = useNotifications(
export const ChildListItem = ({ navigation, child, color }) => {
const { data: notifications, status: notificationsStatus } = useNotifications(
child,
)
const {data: news, status: newsStatus} = useNews(child)
const {data: classmates, status: classmatesStatus} = useClassmates(child)
const {data: calendar, status: calendarStatus} = useCalendar(child)
const {data: menu, status: menuStatus} = useMenu(child)
const {data: schedule, status: scheduleStatus} = useSchedule(
const { data: news, status: newsStatus } = useNews(child)
const { data: classmates, status: classmatesStatus } = useClassmates(child)
const { data: calendar, status: calendarStatus } = useCalendar(child)
const { data: menu, status: menuStatus } = useMenu(child)
const { data: schedule, status: scheduleStatus } = useSchedule(
child,
DateTime.local(),
DateTime.local().plus({days: 7}),
DateTime.local().plus({ days: 7 }),
)

const getClassName = () => {
Expand All @@ -55,11 +55,11 @@ export const ChildListItem = ({navigation, child, color}) => {
}

const Header = (props) => (
<View {...props} style={{flexDirection: 'row'}}>
<View style={{margin: 20}}>
<View {...props} style={{ flexDirection: 'row' }}>
<View style={{ margin: 20 }}>
<Avatar source={require('../assets/avatar.png')} shape="square" />
</View>
<View style={{margin: 20}}>
<View style={{ margin: 20 }}>
<Text category="h6">{child.name?.split('(')[0]}</Text>
<Text category="s1">{`${getClassName()}`}</Text>
</View>
Expand All @@ -73,7 +73,7 @@ export const ChildListItem = ({navigation, child, color}) => {
status="control"
size="small"
onPress={() =>
navigation.navigate('Child', {child, color, selectedTab: 0})
navigation.navigate('Child', { child, color, selectedTab: 0 })
}
accessoryLeft={NewsIcon}>
{`${(news || []).length}`}
Expand All @@ -83,7 +83,7 @@ export const ChildListItem = ({navigation, child, color}) => {
status="control"
size="small"
onPress={() =>
navigation.navigate('Child', {child, color, selectedTab: 1})
navigation.navigate('Child', { child, color, selectedTab: 1 })
}
accessoryLeft={NotificationsIcon}>
{`${(notifications || []).length}`}
Expand All @@ -93,7 +93,7 @@ export const ChildListItem = ({navigation, child, color}) => {
status="control"
size="small"
onPress={() =>
navigation.navigate('Child', {child, color, selectedTab: 2})
navigation.navigate('Child', { child, color, selectedTab: 2 })
}
accessoryLeft={CalendarIcon}>
{`${(notifications || []).length}`}
Expand All @@ -103,7 +103,7 @@ export const ChildListItem = ({navigation, child, color}) => {
status="control"
size="small"
onPress={() =>
navigation.navigate('Child', {child, color, selectedTab: 3})
navigation.navigate('Child', { child, color, selectedTab: 3 })
}
accessoryLeft={PeopleIcon}>
{`${(classmates || []).length}`}
Expand All @@ -113,12 +113,12 @@ export const ChildListItem = ({navigation, child, color}) => {

return (
<Card
style={{...styles.card}}
style={{ ...styles.card }}
appearance="filled"
status={color}
header={Header}
footer={Footer}
onPress={() => navigation.navigate('Child', {child, color})}>
onPress={() => navigation.navigate('Child', { child, color })}>
{[...(calendar ?? []), ...(schedule ?? [])]
.filter((a) => moment(a.startDate).isSame('week'))
.slice(0, 3)
Expand All @@ -127,7 +127,7 @@ export const ChildListItem = ({navigation, child, color}) => {
appearance="hint"
category="c1"
key={i}
style={{textColor: styles.loaded(notificationsStatus)}}>
style={{ textColor: styles.loaded(notificationsStatus) }}>
{`${calendarItem.title}`}
</Text>
))}
Expand Down
40 changes: 18 additions & 22 deletions packages/app/components/children.component.js
View file
@@ -1,25 +1,21 @@
import React from 'react'
import {StyleSheet, View, Image, SafeAreaView} from 'react-native'
import {useChildList} from '@skolplattformen/api-hooks'
import { StyleSheet, View, Image, SafeAreaView } from 'react-native'
import { useChildList } from '@skolplattformen/api-hooks'
import {
Divider,
Button,
Icon,
Layout,
Text,
TopNavigation,
TopNavigationAction,
List,
Card,
Avatar,
Spinner,
} from '@ui-kitten/components'
import {ChildListItem} from './childListItem.component'
import { ChildListItem } from './childListItem.component'
const colors = ['primary', 'success', 'info', 'warning', 'danger']

const BackIcon = (props) => <Icon {...props} name="arrow-back" />
export const Children = ({navigation}) => {
const {data: childList, status, error, reload} = useChildList()
export const Children = ({ navigation }) => {
const { data: childList, status, error, reload } = useChildList()
const navigateBack = () => {
navigation.goBack()
}
Expand All @@ -36,7 +32,7 @@ export const Children = ({navigation}) => {
accessoryLeft={BackAction}
/>
<Divider />
<Layout style={{flex: 1}}>
<Layout style={{ flex: 1 }}>
{status === 'loaded' ? (
<Layout style={styles.childList}>
{childList.map((child, i) => (
Expand All @@ -49,19 +45,19 @@ export const Children = ({navigation}) => {
))}
</Layout>
) : (
<Layout style={styles.loading}>
<Image
source={require('../assets/girls.png')}
style={{height: 400, width: '100%'}}
/>
<View style={{flexDirection: 'row'}}>
<Spinner size="large" status="warning" />
<Text category="h1" style={{marginLeft: 10, marginTop: -7}}>
Laddar...
<Layout style={styles.loading}>
<Image
source={require('../assets/girls.png')}
style={{ height: 400, width: '100%' }}
/>
<View style={{ flexDirection: 'row' }}>
<Spinner size="large" status="warning" />
<Text category="h1" style={{ marginLeft: 10, marginTop: -7 }}>
Laddar...
</Text>
</View>
</Layout>
)}
</View>
</Layout>
)}
</Layout>
</SafeAreaView>
)
Expand Down
18 changes: 18 additions & 0 deletions packages/app/components/image.component.js
View file
@@ -0,0 +1,18 @@
import React from 'react'
import { Image as ImageBase } from 'react-native'
import { useApi } from '@skolplattformen/api-hooks'

export const Image = ({ key, src, style }) => {
const { api } = useApi()
const cookie = api.getSessionCookie()
return (
<ImageBase
key={key}
source={{
uri: src,
headers: { cookie },
}}
style={style}
/>
)
}

1 comment on commit 82cbb09

@vercel
Copy link

@vercel vercel bot commented on 82cbb09 Feb 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.