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

import {
    Center,
    ScrollView,
    VStack
} from "native-base"
import ListView from "../components/listView/ListView"
import SearchForm from "../components/search/SearchForm"
import { useEffect } from "react"
import {
    fetchArtists,
    fetchCities,
    fetchCountries,
    fetchInstitutions,
    fetchInventories,
    fetchNationalities,
    fetchPlans,
    fetchSubjects,
    fetchTechniques
} from "../stores/actions/searchFormThunks"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import { log } from "../logging/logger"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { RootDrawerParamList } from "./Navigation"
import { loadItemsByInventory } from "../stores/actions/listViewThunks"


const SearchPage = ({route, navigation}: DrawerScreenProps<RootDrawerParamList, 'Search'>) => {
    const dispatch = useDispatch<AppDispatch>()

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

    const data = useSelector((state: RootState) => state.listView.data)
    const dataLoading = useSelector((state: RootState) => state.listView.inventoriesDataLoading)
    const pagination = useSelector((state: RootState) => state.listView.loadedPages)


    useEffect(() => {
        log.debug("SearchPage", "useEffect", "fetchEverything")

        dispatch(fetchInventories())
        dispatch(fetchNationalities())
        dispatch(fetchArtists())
        dispatch(fetchSubjects())
        dispatch(fetchPlans())
        dispatch(fetchTechniques())
        dispatch(fetchCountries())
        dispatch(fetchCities())
        dispatch(fetchInstitutions())

        log.debug("SearchPage", "useEffect", "fetchEverything", "done")
    }, [dispatch])


    useEffect(() => {
        log.debug("SearchPage", "props", route.params.inventoryId)
    }, [])

    console.log(data)

    return (
        <Center m={ 2 } mr={0} mb={6} flex={1}>

            <ScrollView flex={1} w={"100%"} >
                <VStack space={ 1 } mr={ 4 }>
                    <SearchForm inventoryId={route.params.inventoryId}/>
                    <ListView navigation={navigation} 
                    
                    inventories={inventories} 
                    numOfResults={numberOfResults}

                    data={data} 
                    loadedPages={pagination} 
                    inventoriesDataLoading={dataLoading} 
                    handleLoadMoreItems={(inventoryName: string, cursor: number) => {
                        dispatch(loadItemsByInventory(inventoryName))
                    } }/>
                </VStack>
            </ScrollView>
        </Center>
    )
}

export default SearchPage