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

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, LoadedPagesOfInventories } from "../../types/listViewTypes"
import { log } from "../../logging/logger"
import ListViewInventoryGroup from "./ListViewInventoryGroup"
import { ErrorToast } from "../toast/ErrorToast"
import LoadingBox from "../loading/LoadingBox"
import { Inventory } from "../../types/searchFormTypes"

type ListViewProps = {
    navigation: any

    inventories: Inventory[]
    numOfResults?: number

    lastError?: string

    data: {[key: string]: ItemPreviewType[]}
    loadedPages: LoadedPagesOfInventories
    inventoriesDataLoading: {[key: string]: boolean}

    handleLoadMoreItems: (inventoryName: string, cursor: number) => void;

    hideHeaderText?: boolean
}

const ListView = (props: ListViewProps) => {

    const inventories = props.inventories
    const numberOfResults = props.numOfResults

    const data = props.data
    const loadedPages = props.loadedPages
    const inventoriesDataLoading = props.inventoriesDataLoading
    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 (
        <>
            {!props.hideHeaderText && <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}

                            // items
                            items={data[inventory.name]}
                            loading={inventoriesDataLoading[inventory.name]}
                            loadedPages={loadedPages[inventory.name]}

                            handleLoadMoreItems={props.handleLoadMoreItems }
                            />
                    )
                    ) : (
                        <ListViewInventoryGroup
                            inventoryName={inventories[0].name}
                            inventoryLabel={inventories[0].label}
                            navigation={props.navigation}
                            defaultOpen={true}

                            // items
                            items={data[inventories[0].name]}
                            loading={inventoriesDataLoading[inventories[0].name]}
                            loadedPages={loadedPages[inventories[0].name]}

                            handleLoadMoreItems={props.handleLoadMoreItems }                         />
                    )) : (
                    <Text alignSelf={"center"}>No results found</Text>
                )

            }
        </>
    )
}

export default ListView