Merge pull request #23 from kolplattformen/image
feat: 🎸 Using new fullImageUrl and cookie features for news img
This commit is contained in:
commit
09b79213d4
|
@ -26,7 +26,11 @@ export const Children = ({ navigation }) => {
|
|||
{status === 'loaded' ?
|
||||
<Layout style={styles.childList}>
|
||||
{childList.map((child, i) => (
|
||||
<ChildListItem child={child} color={colors[i % colors.length]} navigation={navigation} />
|
||||
<ChildListItem
|
||||
key={child.id}
|
||||
child={child}
|
||||
color={colors[i % colors.length]}
|
||||
navigation={navigation} />
|
||||
))}
|
||||
</Layout>
|
||||
: <Layout style={styles.loading}>
|
||||
|
@ -48,13 +52,13 @@ const styles = StyleSheet.create({
|
|||
flex: 1,
|
||||
backgroundColor: '#fff'
|
||||
},
|
||||
loading: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
loading: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
childList: {
|
||||
flex: 1,
|
||||
childList: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-start'
|
||||
}
|
||||
})
|
||||
|
|
|
@ -2,6 +2,7 @@ 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'
|
||||
import { useApi } from '@skolplattformen/react-native-embedded-api'
|
||||
|
||||
const BackIcon = (props) => (
|
||||
<Icon {...props} name='arrow-back' />
|
||||
|
@ -9,6 +10,7 @@ const BackIcon = (props) => (
|
|||
|
||||
export const NewsItem = ({ navigation, route }) => {
|
||||
const { newsItem } = route.params
|
||||
const { cookie } = useApi()
|
||||
|
||||
const navigateBack = () => {
|
||||
navigation.goBack()
|
||||
|
@ -23,7 +25,12 @@ export const NewsItem = ({ navigation, route }) => {
|
|||
<Text category='h3'>
|
||||
{newsItem.header}
|
||||
</Text>
|
||||
<Image source={{ uri: `https://etjanst.stockholm.se/Vardnadshavare/inloggad2/NewsBanner?url=${newsItem.imageUrl}` }} style={styles.image} />
|
||||
<Image
|
||||
source={{
|
||||
uri: newsItem.fullImageUrl,
|
||||
headers: { cookie },
|
||||
}}
|
||||
style={styles.image} />
|
||||
</View>
|
||||
)
|
||||
|
||||
|
|
|
@ -1,46 +1,26 @@
|
|||
import React from 'react'
|
||||
import { SafeAreaView, StyleSheet, View, Image } from 'react-native'
|
||||
import { Card, List, Text, Layout } from '@ui-kitten/components'
|
||||
import { NavigationContainer } from '@react-navigation/native'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleSheet } from 'react-native'
|
||||
import { List } from '@ui-kitten/components'
|
||||
import { NewsListItem } from './newsListItem.component'
|
||||
|
||||
|
||||
export const NewsList = ({news}) => {
|
||||
const navigation = useNavigation()
|
||||
|
||||
const renderItemHeader = (headerProps, info) => (
|
||||
<View {...headerProps} >
|
||||
<Text category='h6'>{info.item.header}</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)}>
|
||||
<Image source={{ uri: `https://etjanst.stockholm.se/Vardnadshavare/inloggad2/NewsBanner?url=${info.item.imageUrl}`}} style={{height: 300}}></Image>
|
||||
</Card>
|
||||
)
|
||||
|
||||
export const NewsList = ({ news }) => {
|
||||
return (
|
||||
<List
|
||||
style={styles.container}
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
data={news}
|
||||
renderItem={renderItem} />
|
||||
renderItem={(info) => (
|
||||
<NewsListItem key={info.item.id} item={info.item} />
|
||||
)} />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
flex: 1,
|
||||
margin: 2,
|
||||
},
|
||||
container: {},
|
||||
contentContainer: {
|
||||
paddingRight: 10,
|
||||
paddingBottom: 330
|
||||
}
|
||||
});
|
||||
})
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { useApi } from '@skolplattformen/react-native-embedded-api'
|
||||
import { Card, Text } from '@ui-kitten/components'
|
||||
import { StyleSheet, View, Image } from 'react-native'
|
||||
|
||||
export const NewsListItem = ({ item }) => {
|
||||
const navigation = useNavigation()
|
||||
const { cookie } = useApi()
|
||||
|
||||
return (
|
||||
<Card
|
||||
style={styles.card}
|
||||
onPress={() => navigation.navigate('NewsItem', { newsItem: item })}
|
||||
header={(headerProps) => (
|
||||
<View {...headerProps} >
|
||||
<Text category='h6'>{item.header}</Text>
|
||||
<Text category='s1'>Publicerad på Skolplattformen</Text>
|
||||
</View>
|
||||
)}>
|
||||
<Image
|
||||
source={{ uri: item.fullImageUrl, headers: { cookie } }}
|
||||
style={{ height: 300 }}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
flex: 1,
|
||||
margin: 2,
|
||||
},
|
||||
})
|
|
@ -487,4 +487,4 @@ SPEC CHECKSUMS:
|
|||
|
||||
PODFILE CHECKSUM: b23c996f6d50dc3e4f20060bfcf3fb5be14643fd
|
||||
|
||||
COCOAPODS: 1.9.3
|
||||
COCOAPODS: 1.10.0
|
||||
|
|
|
@ -2019,9 +2019,9 @@
|
|||
}
|
||||
},
|
||||
"@skolplattformen/embedded-api": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@skolplattformen/embedded-api/-/embedded-api-0.12.0.tgz",
|
||||
"integrity": "sha512-ESPBq29V6blh2P5qVmQPlrwdY2fa44dj8RlLJnWdz9MF9MozDQQQBbonvkwIMRTuttsTYLoXY1t+Eiap0SiKhw==",
|
||||
"version": "0.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@skolplattformen/embedded-api/-/embedded-api-0.13.0.tgz",
|
||||
"integrity": "sha512-Hg89+VxYE3VoYxcpWPzvOuO6hrVz9ZNqoVZTLObPJWus6wZP739eMe6H7EywfDdVwQsH91tTKIHA1+L21Dbv8A==",
|
||||
"requires": {
|
||||
"camelcase-keys": "^6.2.2",
|
||||
"events": "^3.2.0",
|
||||
|
@ -2031,14 +2031,14 @@
|
|||
}
|
||||
},
|
||||
"@skolplattformen/react-native-embedded-api": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@skolplattformen/react-native-embedded-api/-/react-native-embedded-api-0.4.0.tgz",
|
||||
"integrity": "sha512-iGjpRPfq2Zr4OPiY77raMamaboYEAiDZ1t7yEfrCHRCUVkVDmyqi0PkZiR2JkVUy3bX+b0bJlUZ3SqEZcKY1LQ==",
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@skolplattformen/react-native-embedded-api/-/react-native-embedded-api-0.5.1.tgz",
|
||||
"integrity": "sha512-b1gOs5Ufvya8vcy48SnFUw8aNRpfHbh5Szv3nn0TujGoVyNKsPE9iIwC1ZHRAuZi3krwDs41fIZZKyA+ZDA9gg==",
|
||||
"requires": {
|
||||
"@react-native-async-storage/async-storage": "^1.13.2",
|
||||
"@react-native-community/cookies": "^5.0.1",
|
||||
"@reduxjs/toolkit": "^1.5.0",
|
||||
"@skolplattformen/embedded-api": "^0.12.0",
|
||||
"@skolplattformen/embedded-api": "^0.13.0",
|
||||
"luxon": "^1.25.0",
|
||||
"react": "^16.11.0",
|
||||
"react-native": "^0.62.2",
|
||||
|
@ -2238,11 +2238,36 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-1.19.1.tgz",
|
||||
"integrity": "sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ=="
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
|
||||
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
|
||||
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.14.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz",
|
||||
"integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/react-native": {
|
||||
"version": "0.63.43",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.43.tgz",
|
||||
"integrity": "sha512-zFD+rFf7xmk3ZL5laaGdWB8NLNoN36TjHc2M5PcT5gXcDk7ZJBPsiabNcPDQPSIU/om8YPwBpaFdd1IiyuIM+g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/stack-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||
|
@ -3685,6 +3710,12 @@
|
|||
"cssom": "0.3.x"
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
|
||||
"integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
|
||||
"dev": true
|
||||
},
|
||||
"dashdash": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
"@react-navigation/material-top-tabs": "^5.3.10",
|
||||
"@react-navigation/native": "^5.8.10",
|
||||
"@react-navigation/stack": "^5.12.8",
|
||||
"@skolplattformen/react-native-embedded-api": "^0.4.0",
|
||||
"@skolplattformen/react-native-embedded-api": "^0.5.1",
|
||||
"@ui-kitten/components": "5.0.0",
|
||||
"@ui-kitten/eva-icons": "5.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
|
@ -43,6 +43,8 @@
|
|||
"@babel/core": "^7.6.2",
|
||||
"@babel/runtime": "^7.6.2",
|
||||
"@react-native-community/eslint-config": "^1.0.0",
|
||||
"@types/react": "^16.8.24",
|
||||
"@types/react-native": "^0.63.43",
|
||||
"@ui-kitten/metro-config": "5.0.0",
|
||||
"babel-jest": "^24.9.0",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
|
|
Loading…
Reference in New Issue