Projekt

Obecné

Profil

Stáhnout (4.42 KB) Statistiky
| Větev: | Tag: | Revize:
1
import {Box, Center, Image, Pressable, ScrollView, Text, useToast} from "native-base"
2
import { useDispatch, useSelector } from "react-redux"
3
import { AppDispatch, RootState } from "../stores/store"
4
import { useContext, 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 { RootStackParamList } from "./Navigation"
10
import { log } from "../logging/logger"
11
import { HOME_PAGE_IMG_URL } from "../api/constants"
12
import { ErrorToast } from "../components/toast/ErrorToast"
13
// import { Image } from "react-native"
14

    
15
const HomePage = ({navigation}: DrawerScreenProps<RootStackParamList, 'Home'>) => {
16
    const data = useSelector((state: RootState) => state.homePage.data)
17
    const loading = useSelector((state: RootState) => state.homePage.loading)
18
    const lastError = useSelector((state: RootState) => state.itemViewState.lastError)
19
    const toast = useToast();
20
  
21
    useEffect(() => {
22
        if (lastError) {
23
            toast.closeAll()
24
            toast.show({
25
                render: ({
26
                    id
27
                }) => {
28
                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
29
                },
30
                duration: 3000
31
            });
32
        }
33
    }, [lastError])
34

    
35
    const [aspectRatio, setAspectRatio] = useState(1.0)
36

    
37
    const dispatch = useDispatch<AppDispatch>()
38

    
39
    useEffect(() => {
40
        if (data === null || data.length === 0 && !loading) {
41
            dispatch(fetchData())
42
        }
43

    
44
    }, [])
45

    
46

    
47

    
48
    return (
49
        <Center m={2} mx={4} mb={20}>
50
            { loading ? (
51
                <LoadingBox text={ "Loading..." }/>
52
            ) : (
53
                <>
54
                    <ApplicationHeading/>
55
                    <ScrollView mb={5} >
56
                    <Image
57
                        source={ {uri: HOME_PAGE_IMG_URL} }
58
                        w={"100%"} h={ 200 }
59
                        alignSelf={ "center" }
60
                        alt={ "Rudolf-Aachen" }
61
                        rounded={ "lg" }
62
                        my={ 2 }
63
                    />
64
                    { data && data.length > 0 && (
65
                        <Box m={2} p={ 3 } bg={"primary.100"} rounded={"lg"}>
66
                            <Text
67
                                fontSize={ "sm" }
68
                                lineHeight={"sm"}
69
                                textAlign={"justify"}
70
                            >
71
                                {data[0]["general"].text}
72
                        </Text>
73
                        </Box>
74
                    )}
75
                        <Text
76
                            mt={ 2 }
77
                            ml={ 2 }
78
                            mb={ -2 }
79
                            bold
80
                            fontSize={"2xl"}
81
                            color={"primary.500"}
82
                        >
83
                            Inventories
84
                        </Text>
85
                    { data && data.length > 1 && data.slice(1).map((item) => (
86
                        <Pressable
87
                            onPress={() => navigation.navigate("Search", {inventoryId: Object.keys(item)[0]}) }
88
                            key={ Object.values(item)[0].label }
89
                            rounded={ "lg" }
90
                            backgroundColor={ "primary.100" }
91
                            m = { 2 }
92
                            p={ 3 }
93
                        >
94
                            <Text
95
                                bold
96
                                fontSize={ "md" }
97
                                color={"primary.500"}
98
                                mb={1}
99
                            >
100
                                { Object.values(item)[0].label }
101
                            </Text>
102
                            <Text
103
                                fontSize={ "sm" }
104
                                lineHeight={"sm"}
105
                                textAlign={"justify"}
106
                            >
107
                                { Object.values(item)[0].text }
108
                            </Text>
109
                        </Pressable>
110
                    )) }
111

    
112
                    </ScrollView>
113
                </>
114
            ) }
115
        </Center>
116
    )
117
}
118

    
119
export default HomePage
(1-1/7)