1
|
import { Center, Image, Pressable, ScrollView, Text } from "native-base"
|
2
|
import { useDispatch, useSelector } from "react-redux"
|
3
|
import { AppDispatch, RootState } from "../stores/store"
|
4
|
import { useEffect, useState } from "react"
|
5
|
import { fetchData } from "../stores/actions/homePageThunks"
|
6
|
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
|
7
|
import LoadingBox from "../components/loading/LoadingBox"
|
8
|
import { DrawerScreenProps } from "@react-navigation/drawer"
|
9
|
import { RootDrawerParamList } from "./Navigation"
|
10
|
import { log } from "../logging/logger"
|
11
|
import { HOME_PAGE_IMG_URL } from "../api/constants"
|
12
|
// import { Image } from "react-native"
|
13
|
|
14
|
const HomePage = ({navigation}: DrawerScreenProps<RootDrawerParamList, 'Home'>) => {
|
15
|
const data = useSelector((state: RootState) => state.homePage.data)
|
16
|
const loading = useSelector((state: RootState) => state.homePage.loading)
|
17
|
const error = useSelector((state: RootState) => state.homePage.lastError)
|
18
|
const [aspectRatio, setAspectRatio] = useState(1.0)
|
19
|
|
20
|
const dispatch = useDispatch<AppDispatch>()
|
21
|
|
22
|
useEffect(() => {
|
23
|
if (data === null || data.length === 0 && !loading) {
|
24
|
dispatch(fetchData())
|
25
|
}
|
26
|
|
27
|
}, [])
|
28
|
|
29
|
return (
|
30
|
<Center m={2} mb={10}>
|
31
|
{ loading ? (
|
32
|
<LoadingBox text={ "Loading..." }/>
|
33
|
) : (
|
34
|
<>
|
35
|
<ApplicationHeading/>
|
36
|
<ScrollView mb={5} >
|
37
|
<Image
|
38
|
source={ {uri: HOME_PAGE_IMG_URL} }
|
39
|
w={"100%"} h={ 200 }
|
40
|
resizeMode={"contain"}
|
41
|
alignSelf={ "center" }
|
42
|
alt={ "Rudolf-Aachen" }
|
43
|
/>
|
44
|
{ data && data.length > 0 && (
|
45
|
<Text
|
46
|
mx={ 2 }
|
47
|
fontSize={ "sm" }
|
48
|
lineHeight={"sm"}
|
49
|
color={"gray.500"}
|
50
|
textAlign={"justify"}
|
51
|
>
|
52
|
{data[0]["general"].text}
|
53
|
</Text>
|
54
|
)}
|
55
|
<Text
|
56
|
mt={ 2 }
|
57
|
bold
|
58
|
fontSize={"xl"}
|
59
|
color={"primary.500"}
|
60
|
>
|
61
|
Inventories
|
62
|
</Text>
|
63
|
{ data && data.length > 1 && data.slice(1).map((item) => (
|
64
|
<Pressable
|
65
|
onPress={() => navigation.navigate("Search", {inventoryId: Object.keys(item)[0]}) }
|
66
|
key={ Object.values(item)[0].label }
|
67
|
rounded={ "md" }
|
68
|
borderWidth={ 1 }
|
69
|
borderColor={ "gray.300" }
|
70
|
m = { 2 }
|
71
|
p={ 3 }
|
72
|
>
|
73
|
<Text
|
74
|
bold
|
75
|
fontSize={ "md" }
|
76
|
mb={1}
|
77
|
>
|
78
|
{ Object.values(item)[0].label }
|
79
|
</Text>
|
80
|
<Text
|
81
|
fontSize={ "sm" }
|
82
|
lineHeight={"sm"}
|
83
|
color={"gray.500"}
|
84
|
textAlign={"justify"}
|
85
|
>
|
86
|
{ Object.values(item)[0].text }
|
87
|
</Text>
|
88
|
</Pressable>
|
89
|
)) }
|
90
|
|
91
|
</ScrollView>
|
92
|
</>
|
93
|
) }
|
94
|
</Center>
|
95
|
)
|
96
|
}
|
97
|
|
98
|
export default HomePage
|