aswi2023one-team-to-rule-them-all-gitlab/src/components/listView/ListView.tsx @ c0af5101

import { useEffect, useState } from "react"
import { ScrollView, Text, VStack, useToast } from "native-base"
import { useSelector } from "react-redux"
import { RootState } from "../../stores/store"
import ItemPreview from "./ItemPreview"
import { ItemPreviewType } from "../../types/listViewTypes"
import { log } from "../../logging/logger"
import ListViewInventoryGroup from "./ListViewInventoryGroup"
import { ErrorToast } from "../toast/ErrorToast"
import LoadingBox from "../loading/LoadingBox"

type ListViewProps = {
    navigation: any
}

const ListView = (props: ListViewProps) => {

    const inventories = useSelector((state: RootState) => state.listView.inventories)
    const numberOfResults = useSelector((state: RootState) => state.listView.numOfResults)
    const loading = useSelector((state: RootState) => state.listView.loading)

    const lastError = useSelector((state: RootState) => state.listView.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])

    return (
        <>
            <Text fontSize={16} fontWeight={"bold"} color={"primary.500"}>Search results{numberOfResults ? ` (${numberOfResults})` : ""}:</Text>
            {loading ? (
                <LoadingBox text={"Loading..."} />
            )  :
            inventories && inventories.length > 0 ?
                (inventories.length > 1 ?
                    inventories.map((inventory) => (
                        <ListViewInventoryGroup
                            inventoryName={inventory.name}
                            inventoryLabel={inventory.label}
                            navigation={props.navigation}
                        />
                    )
                    ) : (
                        <ListViewInventoryGroup
                            inventoryName={inventories[0].name}
                            inventoryLabel={inventories[0].label}
                            navigation={props.navigation}
                            defaultOpen={true}
                        />
                    )) : (
                    <Text alignSelf={"center"}>No results found</Text>
                )

            }
        </>
    )
}

export default ListView