Revize 4da7b143

HomePage connected to new backend endpoint, SearchPage edited to take argument to display inventory content on open
re #10715

src/pages/HomePage.tsx

@@ -1 @@
-import { Center, Image, Text } from "native-base"
+import { Center, Image, Pressable, ScrollView, Text } from "native-base"
+import { useDispatch, useSelector } from "react-redux"
+import { AppDispatch, RootState } from "../stores/store"
+import { 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 { 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 error = useSelector((state: RootState) => state.homePage.lastError)
+    const [aspectRatio, setAspectRatio] = useState(1.0)
+
+    const dispatch = useDispatch<AppDispatch>()
+
+    useEffect(() => {
+        if (data === null || data.length === 0 && !loading) {
+            dispatch(fetchData())
+        }
+        // Image.getSize("http:/147.228.173.159/static/home/Rudolf-Aachen-crop.png", (width, height) => {
+        //     setAspectRatio(width / height)
+        // })
+
+    }, [])
 
-const HomePage = () => {
     return (
-        <Center>
-            <Text>Home Page</Text>
-            <Image
-                source={{uri: "http:/147.228.173.159/static/home/Rudolf-Aachen-crop.png"}}
-                w={"100%"}
-                h={"50%"}
-                alt={"Rudolf-Aachen"}
-            />
+        <Center m={2} mb={10}>
+            { loading ? (
+                <LoadingBox text={ "Loading..." }/>
+            ) : (
+                <>
+                    <ApplicationHeading/>
+                    <ScrollView >
+                    <Image
+                        source={ {uri: "http:/147.228.173.159/static/home/Rudolf-Aachen-crop.png"} }
+                        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>
     )
 }