aswi2023one-team-to-rule-them-all-gitlab/src/pages/HomePage.tsx @ 08be9ecd

import { Center, Image, Pressable, ScrollView, Text, useToast } from "native-base"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import { useContext, useEffect, useState } from "react"
import { fetchData } from "../stores/actions/homePageThunks"
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
import LoadingBox from "../components/loading/LoadingBox"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { RootDrawerParamList } from "./Navigation"
import { log } from "../logging/logger"
import { HOME_PAGE_IMG_URL } from "../api/constants"
import { ErrorToast } from "../components/toast/ErrorToast"
// import { Image } from "react-native"

const HomePage = ({navigation}: DrawerScreenProps<RootDrawerParamList, 'Home'>) => {
    const data = useSelector((state: RootState) => state.homePage.data)
    const loading = useSelector((state: RootState) => state.homePage.loading)
    const lastError = useSelector((state: RootState) => state.itemViewState.lastError)
    const toast = useToast();
  
    useEffect(() => {
        if (lastError) {
            toast.closeAll()
            toast.show({
                render: ({
                    id
                }) => {
                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
                },
                duration: 3000
            });
        }
    }, [lastError])

    const [aspectRatio, setAspectRatio] = useState(1.0)

    const dispatch = useDispatch<AppDispatch>()

    useEffect(() => {
        if (data === null || data.length === 0 && !loading) {
            dispatch(fetchData())
        }

    }, [])



    return (
        <Center m={2} mb={10}>
            { loading ? (
                <LoadingBox text={ "Loading..." }/>
            ) : (
                <>
                    <ApplicationHeading/>
                    <ScrollView mb={5} >
                    <Image
                        source={ {uri: HOME_PAGE_IMG_URL} }
                        w={"100%"} h={ 200 }
                        resizeMode={"contain"}
                        alignSelf={ "center" }
                        alt={ "Rudolf-Aachen" }
                    />
                    { data && data.length > 0 && (
                        <Text
                            mx={ 2 }
                            fontSize={ "sm" }
                            lineHeight={"sm"}
                            color={"gray.500"}
                            textAlign={"justify"}
                        >
                            {data[0]["general"].text}
                        </Text>
                    )}
                        <Text
                            mt={ 2 }
                            bold
                            fontSize={"xl"}
                            color={"primary.500"}
                        >
                            Inventories
                        </Text>
                    { data && data.length > 1 && data.slice(1).map((item) => (
                        <Pressable
                            onPress={() => navigation.navigate("Search", {inventoryId: Object.keys(item)[0]}) }
                            key={ Object.values(item)[0].label }
                            rounded={ "md" }
                            borderWidth={ 1 }
                            borderColor={ "gray.300" }
                            m = { 2 }
                            p={ 3 }
                        >
                            <Text
                                bold
                                fontSize={ "md" }
                                mb={1}
                            >
                                { Object.values(item)[0].label }
                            </Text>
                            <Text
                                fontSize={ "sm" }
                                lineHeight={"sm"}
                                color={"gray.500"}
                                textAlign={"justify"}
                            >
                                { Object.values(item)[0].text }
                            </Text>
                        </Pressable>
                    )) }

                    </ScrollView>
                </>
            ) }
        </Center>
    )
}

export default HomePage