Revize 96066e3b

Revert "Merge branch 'searchpage' into 'main'"

This reverts merge request !5

src/components/search/SearchForm.tsx

@@ -1 @@
-import {
-    Box,
-    Button,
-    CloseIcon,
-    ScrollView,
-    VStack
-} from "native-base"
+import { Button, Center, CheckIcon, FormControl, KeyboardAvoidingView, ScrollView, Select, Text } from "native-base"
 import { useDispatch, useSelector } from "react-redux"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { AppDispatch, RootState } from "../../stores/store"
 import { Inventory } from "../../types/searchFormTypes"
+import {
+    fetchArtists, fetchCities, fetchCountries, fetchInstitutions,
+    fetchInventories,
+    fetchNationalities,
+    fetchPlans,
+    fetchSubjects
+} from "../../stores/actions/searchFormThunks"
+import SearchFormControl from "./SearchFormControl"
+import { Platform } from "react-native"
 import { search } from "../../stores/actions/listViewThunks"
-import MultiSelect from "./MultiSelect"
-import SwitchWithLabel from "./SwitchWithLabel"
-import { log } from "../../logging/logger"
 
-interface SearchFormProps {
-    isFilterOpen: boolean,
-}
 
-
-const SearchForm = (props: SearchFormProps) => {
+const SearchForm = () => {
     const inventories: Inventory[] = useSelector((state: RootState) => state.searchForm.inventories)
     const nationalities = useSelector((state: RootState) => state.searchForm.nationalities)
     const artists = useSelector((state: RootState) => state.searchForm.artists)
     const subjects = useSelector((state: RootState) => state.searchForm.subjects)
     const rooms = useSelector((state: RootState) => state.searchForm.rooms)
-    const techniques = useSelector((state: RootState) => state.searchForm.techniques)
     const countries = useSelector((state: RootState) => state.searchForm.countries)
     const cities = useSelector((state: RootState) => state.searchForm.cities)
     const institutions = useSelector((state: RootState) => state.searchForm.institutions)
 
-    const [selectedInventories, setSelectedInventories] = useState<{ label: string, value: string }[]>([])
-    const [selectedNationalities, setSelectedNationalities] = useState<{ label: string, value: string }[]>([])
-    const [selectedArtists, setSelectedArtists] = useState<{ label: string, value: string }[]>([])
-    const [selectedSubjects, setSelectedSubjects] = useState<{ label: string, value: string }[]>([])
-    const [selectedRooms, setSelectedRooms] = useState<{ label: string, value: string }[]>([])
-    const [selectedTechniques, setSelectedTechniques] = useState<{ label: string, value: string }[]>([])
-    const [selectedCountries, setSelectedCountries] = useState<{ label: string, value: string }[]>([])
-    const [selectedCities, setSelectedCities] = useState<{ label: string, value: string }[]>([])
-    const [selectedInstitutions, setSelectedInstitutions] = useState<{ label: string, value: string }[]>([])
 
-    const [isSchoolOfPrague, setIsSchoolOfPrague] = useState(false)
-    const [isOriginal, setIsOriginal] = useState(false)
-    const [isCopy, setIsCopy] = useState(false)
-    const [isHighQuality, setIsHighQuality] = useState(false)
-    const [isLowQuality, setIsLowQuality] = useState(false)
+    const [selectedInventories, setSelectedInventories] = useState<string[]>([])
+    const [selectedNationalities, setSelectedNationalities] = useState<string[]>([])
+    const [selectedArtists, setSelectedArtists] = useState<string[]>([])
+    const [selectedSubjects, setSelectedSubjects] = useState<string[]>([])
+    const [selectedRooms, setSelectedRooms] = useState<string[]>([])
+    const [selectedCountries, setSelectedCountries] = useState<string[]>([])
+    const [selectedCities, setSelectedCities] = useState<string[]>([])
+    const [selectedInstitutions, setSelectedInstitutions] = useState<string[]>([])
 
     const dispatch = useDispatch<AppDispatch>()
 
-    const searchSubmit = () => {
-        dispatch(search({
-            inventories: selectedInventories.map(i => i.value),
-            nationalities: selectedNationalities.map(n => n.value),
-            artists: selectedArtists.map(a => a.value),
-            subjects: selectedSubjects.map(s => s.value),
-            rooms: selectedRooms.map(r => r.value),
-            techniques: selectedTechniques.map(t => t.value),
-            countries: selectedCountries.map(c => c.value),
-            cities: selectedCities.map(c => c.value),
-            institutions: selectedInstitutions.map(i => i.value),
-            isSchoolOfPrague,
-            isOriginal,
-            isCopy,
-            isHighQuality,
-            isLowQuality
-        }))
-    }
+    useEffect(() => {
+        dispatch(fetchInventories())
+        dispatch(fetchNationalities())
+        dispatch(fetchArtists())
+        dispatch(fetchSubjects())
+        dispatch(fetchPlans())
+        dispatch(fetchCountries())
+        dispatch(fetchCities())
+        dispatch(fetchInstitutions())
+    }, [dispatch])
 
-    const clearForm = () => {
-        log.debug("SearchForm", "clearForm")
 
-        setSelectedInventories([])
-        setSelectedNationalities([])
-        setSelectedArtists([])
-        setSelectedSubjects([])
-        setSelectedRooms([])
-        setSelectedTechniques([])
-        setSelectedCountries([])
-        setSelectedCities([])
-        setSelectedInstitutions([])
+    const searchSubmit = () => {
+        dispatch(search({inventory: selectedInventories ? selectedInventories[0] : undefined}))
     }
 
     return (
-        <>
-            { props.isFilterOpen && (
-                <>
-                    <MultiSelect
-                        data={ inventories.map((inventory, index) => {
-                            return {label: inventory.label, value: inventory.name, index}
-                        }) }
-                        label="Inventory (OR)"
-                        selectedItems={ selectedInventories }
-                        onSelectedItemsChange={ setSelectedInventories }
-                    />
-                    <MultiSelect
-                        data={ rooms.map((room, index) => {
-                            return {label: `${ room.id } - ${ room.label }`, value: room.id.toString(), index}
-                        }) }
-                        label="Rooms (OR)"
-                        selectedItems={ selectedRooms }
-                        onSelectedItemsChange={ setSelectedRooms }
-                    />
-                    <MultiSelect
-                        data={ artists.map((art, index) => {
-                            return {label: art.display_name, value: art.getty_id, index}
-                        }) }
-                        label="Artists/Copyists (OR)"
-                        selectedItems={ selectedArtists }
-                        onSelectedItemsChange={ setSelectedArtists }
-                    />
-                    <MultiSelect
-                        data={ nationalities.map((nat, index) => {
-                            return {label: nat, value: nat, index}
-                        }) }
-                        label="Artist`s Origin (OR)"
-                        selectedItems={ selectedNationalities }
-                        onSelectedItemsChange={ setSelectedNationalities }
-                    />
-                    <MultiSelect
-                        data={ subjects.map((subj, index) => {
-                            return {label: subj, value: subj, index}
-                        }) }
-                        label="Subject (AND)"
-                        selectedItems={ selectedSubjects }
-                        onSelectedItemsChange={ setSelectedSubjects }
-                    />
-                    <MultiSelect
-                        data={ techniques.map((tech, index) => {
-                            return {label: tech, value: tech, index}
-                        }) }
-                        label="Technique (OR)"
-                        selectedItems={ selectedTechniques }
-                        onSelectedItemsChange={ setSelectedTechniques }
-                    />
-                    <MultiSelect
-                        data={ institutions.map((institution, index) => {
-                            return {label: institution, value: institution, index}
-                        }) }
-                        label="Institution (OR)"
-                        selectedItems={ selectedInstitutions }
-                        onSelectedItemsChange={ setSelectedInstitutions }
-                    />
-                    <MultiSelect
-                        data={ cities.map((city, index) => {
-                            return {label: city, value: city, index}
-                        }) }
-                        label="City (OR)"
-                        selectedItems={ selectedCities }
-                        onSelectedItemsChange={ setSelectedCities }
-                    />
-                    <MultiSelect
-                        data={ countries.map((country, index) => {
-                            return {label: country, value: country, index}
-                        }) }
-                        label="Country (OR)"
-                        selectedItems={ selectedCountries }
-                        onSelectedItemsChange={ setSelectedCountries }
-                    />
-                    <VStack space={ 2 } mt={ 1 }>
-                        <SwitchWithLabel label={ "School of Prague" } value={ isSchoolOfPrague }
-                                         onValueChange={ setIsSchoolOfPrague }/>
-                        <SwitchWithLabel label={ "Original" } value={ isOriginal } onValueChange={ setIsOriginal }/>
-                        <SwitchWithLabel label={ "Copy" } value={ isCopy } onValueChange={ setIsCopy }/>
-                        <SwitchWithLabel label={ "High Quality" } value={ isHighQuality }
-                                         onValueChange={ setIsHighQuality }/>
-                        <SwitchWithLabel label={ "Low Quality" } value={ isLowQuality }
-                                         onValueChange={ setIsLowQuality }/>
-                    </VStack>
-                    <Box
-                        flex={ 1 }
-                        flexDirection="row"
-                        justifyContent={ "flex-end" }
-                        pt={ 2 }
+        <Center>
+            <ScrollView>
+                <SearchFormControl
+                    data={ inventories.map(inventory => {
+                        return {label: inventory.label, value: inventory.name, key: inventory.name}
+                    }) }
+                    label="Inventory"
+                    placeholder="Choose Inventory"
+                    selectedItems={ selectedInventories }
+                    onSelectedItemsChange={ setSelectedInventories }
+                />
+                <SearchFormControl
+                    data={ rooms.map(room => {
+                        return {label: room.label, value: room.id.toString(), key: room.id.toString()}
+                    }) }
+                    label="Rooms"
+                    placeholder="Room..."
+                    selectedItems={ selectedRooms }
+                    onSelectedItemsChange={ setSelectedRooms }
+                />
+                <SearchFormControl
+                    data={ artists.map(art => {
+                        return {label: art.display_name, value: art.display_name, key: art.display_name}
+                    }) }
+                    label="Artists/Copyists"
+                    placeholder="Artist/Copyist..."
+                    selectedItems={ selectedArtists }
+                    onSelectedItemsChange={ setSelectedArtists }
+                />
+                <SearchFormControl
+                    data={ nationalities.map(nat => {
+                        return {label: nat, value: nat, key: nat}
+                    }) }
+                    label="Artist`s Origin"
+                    placeholder="Nationality..."
+                    selectedItems={ selectedNationalities }
+                    onSelectedItemsChange={ setSelectedNationalities }
+                />
+                <FormControl key={ "lab" }>
+                    <FormControl.Label>label</FormControl.Label>
+                    <Select
+                        placeholder={ "Select" }
+                        minWidth="100"
+                        accessibilityLabel="Choose Service"
+                        _selectedItem={ {
+                            bg: "teal.600",
+                            endIcon: <CheckIcon size={ 5 }/>
+                        } }
+                        mt="1"
+                        key={ "props.label" }
+
                     >
-                        <Button
-                            borderRadius={ 10 }
-                            startIcon={
-                                <CloseIcon size="xs"/>
-                            }
-                            onPress={ clearForm }
-                            variant="outline"
-                            color="primary.500"
-                            borderColor="primary.500"
-                            mr={ 2 }
-                            size={ "sm" }
-                        >
-                            Reset
-                        </Button>
-                        <Button
-                            borderRadius={ 10 }
-                            onPress={ () => searchSubmit() }
-                            colorScheme="primary"
-                            background={ "primary.500" }
-                            variant="solid"
-                            size={ "sm" }
-                        >
-                            Search
-                        </Button>
-                    </Box>
-                </>
-            ) }
-        </>
+                        { inventories.map((row) => (
+                            <Select.Item label={ row.label } value={ row.name } key={ row.name }/>
+                        )) }
+                    </Select>
+                </FormControl>
+                <Button
+                    onPress={ () => searchSubmit()}
+                    colorScheme="primary.100"
+                >
+                    Submit
+                </Button>
+            </ScrollView>
+
+        </Center>
     )
 }