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

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

const SearchPage = ({navigation}: DrawerScreenProps<RootDrawerParamList, 'Search'>) => {
    const [isFilterOpen, setIsFilterOpen] = useState(true)

    const dispatch = useDispatch<AppDispatch>()

    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])

    return (
        <Center m={ 2 } mr={ 4 } flex={1}>
            <Button
                alignSelf={ "start" }
                onPress={ () => setIsFilterOpen(!isFilterOpen) }
                variant="outline"
                endIcon={
                    <>
                        { isFilterOpen ?
                            (<ChevronUpIcon size={ 4 } color={ "primary.500" }/>)
                            : (<ChevronDownIcon size={ 4 } color={ "primary.500" }/>) }
                    </>
                }
                flexWrap={ "nowrap" }
                borderColor={ "primary.500" }
                mb={ 2 }
            >
                Filter
            </Button>
            <ScrollView flex={1} w={"100%"} >
                <VStack space={ 1 }>
                    <SearchForm isFilterOpen={ isFilterOpen }/>
                    <ListView navigation={navigation}/>
                </VStack>
            </ScrollView>
        </Center>
    )
}

export default SearchPage