Revize 9c55d3bb

SearchPage implementations with base of list view for results of the search
re #10342

package.json

@@ -22 +22 @@
     "react-native": "0.71.6",
     "react-native-deck-swiper": "^2.0.13",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-multiple-select": "^0.5.12",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
+    "react-native-vector-icons": "^9.2.0",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "typescript": "^4.9.4"

src/api/searchFormService.ts

@@ +1 @@
+import { axiosInstance } from "./api"
+
+export const fetchInventoriesRequest = async () => {
+    return await axiosInstance.get("/inventories")
+}
+
+export const fetchCountriesRequest = async () => {
+    return await axiosInstance.get("/form/country")
+}
+
+export const fetchInstitutionsRequest = async () => {
+    return await axiosInstance.get("/form/institution")
+}
+
+export const fetchCitiesRequest = async () => {
+    return await axiosInstance.get("/form/city")
+}
+
+export const fetchNationalitiesRequest = async () => {
+    return await axiosInstance.get("/form/nationality")
+}
+
+export const fetchTechniquesRequest = async () => {
+    return await axiosInstance.get("/form/technique")
+}
+
+export const fetchSubjectsRequest = async () => {
+    return await axiosInstance.get("/subject")
+}
+
+export const fetchArtistNamesRequest = async () => {
+    return await axiosInstance.get("/name/all")
+}
+
+export const fetchPlanRequest = async () => {
+    return await axiosInstance.get("/plan/list")
+}

src/api/searchService.ts

@@ +1 @@
+import { axiosInstance } from "./api"
+
+export interface SearchParams {
+    inventory?: string
+    //TODO: add other search params
+}
+
+export const searchRequest = async (params: SearchParams) => {
+    return await axiosInstance.get(`/api/search_v2/${ (params.inventory ? `inventory=${ params.inventory }` : "")}`)
+}

src/components/SearchFormControl.tsx

@@ -1 @@
-import { CheckIcon, FormControl, Select } from "native-base"
-import MultiSelect from "react-native-multiple-select"
-
-export interface SearchFormProps {
-    data: { label: string, value: string, key: string }[],
-    label: string,
-    placeholder: string,
-}
-
-const SearchFormControl = (props: SearchFormProps) => {
-    return (
-        <FormControl key={props.label}>
-            <FormControl.Label>{props.label}</FormControl.Label>
-            <Select
-                placeholder={props.placeholder}
-                minWidth="200"
-                accessibilityLabel="Choose Service"
-                _selectedItem={{
-                    bg: "teal.600",
-                    endIcon: <CheckIcon size={5} />
-                }}
-                mt="1"
-                key={props.label}
-            >
-                {props.data.map((row) => (
-                    <Select.Item label={row.label} value={row.value} key={row.key}/>
-                ))}
-            </Select>
-        </FormControl>
-    )
-}
-
-export default SearchFormControl

src/components/listView/ItemPreview.tsx

@@ +1 @@
+import { Center } from "native-base"
+
+interface ItemPreviewProps {
+    caption: string
+    title: string
+    name: string
+    image: string
+}
+
+const ItemPreview = (props: ItemPreviewProps) => {
+
+    return (
+        <>
+            <Center>
+
+            </Center>
+        </>
+    )
+}
+
+export default ItemPreview

src/components/listView/ListView.tsx

@@ +1 @@
+import { useEffect, useState } from "react"
+import { Text } from "native-base"
+import { useSelector } from "react-redux"
+import { RootState } from "../../stores/store"
+
+const ListView = () => {
+    const items = useSelector((state: RootState) => state.listView.data)
+
+    return (
+        <>
+            <Text>ListView</Text>
+        </>
+    )
+}
+
+export default ListView

src/components/search/SearchForm.tsx

@@ +1 @@
+import { Button, Center, CheckIcon, FormControl, KeyboardAvoidingView, ScrollView, Select, Text } from "native-base"
+import { useDispatch, useSelector } from "react-redux"
+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"
+
+
+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 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<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>()
+
+    useEffect(() => {
+        dispatch(fetchInventories())
+        dispatch(fetchNationalities())
+        dispatch(fetchArtists())
+        dispatch(fetchSubjects())
+        dispatch(fetchPlans())
+        dispatch(fetchCountries())
+        dispatch(fetchCities())
+        dispatch(fetchInstitutions())
+    }, [dispatch])
+
+
+    const searchSubmit = () => {
+        console.log("search")
+        dispatch(search({inventory: selectedInventories ? selectedInventories[0] : undefined}))
+    }
+
+    return (
+        <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" }
+
+                    >
+                        { 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>
+    )
+}
+
+export default SearchForm

src/components/search/SearchFormControl.tsx

@@ +1 @@
+import { CheckIcon, FormControl, Select, View } from "native-base"
+import MultiSelect from "react-native-multiple-select"
+
+export interface SearchFormProps {
+    data: { label: string, value: string, key: string }[],
+    label: string,
+    placeholder: string,
+    selectedItems: string[],
+    onSelectedItemsChange: (selectedItems: string[]) => void,
+}
+
+const SearchFormControl = (props: SearchFormProps) => {
+    return (
+        <View w={350}>
+            <MultiSelect
+                items={ props.data }
+                uniqueKey="key"
+                onSelectedItemsChange={ props.onSelectedItemsChange }
+                selectedItems={ props.selectedItems }
+                selectText={ props.label }
+                searchInputPlaceholderText={ props.placeholder }
+                displayKey="label"
+                submitButtonText={ "Submit" }
+                onChangeInput={ (text: string) => console.log(text) }
+                tagRemoveIconColor="#CCC"
+                tagBorderColor="#CCC"
+                tagTextColor="#CCC"
+                selectedItemTextColor="#CCC"
+                selectedItemIconColor="#CCC"
+                itemTextColor="#000"
+                searchInputStyle={ { color: "#CCC" } }
+                submitButtonColor="#CCC"
+
+            />
+        </View>
+    )
+}
+
+export default SearchFormControl

src/pages/SearchPage.tsx

@@ -1 @@
-import { Center, Text } from "native-base"
+import { Center, KeyboardAvoidingView, Text } from "native-base"
+import ListView from "../components/listView/ListView"
+import SearchForm from "../components/search/SearchForm"
+import { Platform } from "react-native"
 
 const SearchPage = () => {
 
     return (
-        <Center>
-            <Text>Search Page</Text>
-        </Center>
+        <KeyboardAvoidingView
+            h={ {
+                base: "400px",
+                lg: "auto"
+            } }
+            behavior={ Platform.OS === "ios" ? "padding" : "height" }
+        >
+            <Center>
+                <SearchForm/>
+                <ListView/>
+            </Center>
+        </KeyboardAvoidingView>
     )
 }
 

src/stores/actions/listViewThunks.ts

@@ +1 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { SearchParams, searchRequest } from "../../api/searchService"
+import { SearchResponse } from "../../types/listViewTypes"
+
+
+export const search = createAsyncThunk(
+    "listView/search",
+    async (searchParams: SearchParams, thunkAPI) => {
+        try {
+            const response = await searchRequest(searchParams)
+            if (response.status === 200) {
+                return response.data as SearchResponse
+            } else {
+                return Promise.reject(response.data ? response.data : "Search failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)

src/stores/actions/searchFormThunks.ts

@@ +1 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import {
+    fetchArtistNamesRequest,
+    fetchCitiesRequest,
+    fetchCountriesRequest,
+    fetchInstitutionsRequest,
+    fetchInventoriesRequest,
+    fetchNationalitiesRequest,
+    fetchPlanRequest,
+    fetchSubjectsRequest,
+    fetchTechniquesRequest
+} from "../../api/searchFormService"
+
+export const fetchInventories = createAsyncThunk(
+    "searchForm/fetchInventories",
+    async () => {
+        try {
+            const response = await fetchInventoriesRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch inventories failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchCountries = createAsyncThunk(
+    "searchForm/fetchCountries",
+    async () => {
+        try {
+            const response = await fetchCountriesRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch countries failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchInstitutions = createAsyncThunk(
+    "searchForm/fetchInstitutions",
+    async () => {
+        try {
+            const response = await fetchInstitutionsRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch institutions failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchArtists = createAsyncThunk(
+    "searchForm/fetchArtists",
+    async () => {
+        try {
+            const response = await fetchArtistNamesRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch artists failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchTechniques = createAsyncThunk(
+    "searchForm/fetchTechniques",
+    async () => {
+        try {
+            const response = await fetchTechniquesRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch techniques failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchNationalities = createAsyncThunk(
+    "searchForm/fetchNationalities",
+    async () => {
+        try {
+            const response = await fetchNationalitiesRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch nationalities failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchCities = createAsyncThunk(
+    "searchForm/fetchCities",
+    async () => {
+        try {
+            const response = await fetchCitiesRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch cities failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchSubjects = createAsyncThunk(
+    "searchForm/fetchSubjects",
+    async () => {
+        try {
+            const response = await fetchSubjectsRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch subjects failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const fetchPlans = createAsyncThunk(
+    "searchForm/fetchPlans",
+    async () => {
+        try {
+            const response = await fetchPlanRequest()
+            if (response.status === 200) {
+                return response.data
+            } else {
+                return Promise.reject(response.data ? response.data : "Fetch plans failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+

src/stores/reducers/listViewSlice.ts

@@ +1 @@
+import { createSlice } from "@reduxjs/toolkit"
+import { Inventory } from "../../types/searchFormTypes"
+import { ItemPreview } from "../../types/listViewTypes"
+import { search } from "../actions/listViewThunks"
+
+export interface ListViewState {
+    inventories: Inventory[]
+    data: ItemPreview[]
+    loading: boolean
+    lastError?: string
+}
+
+const initialState: ListViewState = {
+    inventories: [],
+    data: [],
+    loading: false,
+}
+
+export const listViewSlice = createSlice({
+    name: "listView",
+    initialState: initialState,
+    reducers: {
+        resetListView: () => initialState,
+    },
+    extraReducers: (builder) => {
+        builder.addCase(search.fulfilled, (state, action) => {
+            state.inventories = action.payload.pagination.inventories
+            state.data = action.payload.data
+            state.loading = false
+        })
+        builder.addCase(search.pending, (state, action) => {
+            state.loading = true
+        })
+        builder.addCase(search.rejected, (state, action) => {
+            state.lastError = action.error.message
+            state.loading = false
+        })
+
+
+    }
+})
+
+export const { resetListView } = listViewSlice.actions
+export default listViewSlice.reducer

src/stores/reducers/searchFormSlice.ts

@@ +1 @@
+import { createSlice } from "@reduxjs/toolkit"
+import { Artist, Inventory, Room } from "../../types/searchFormTypes"
+import {
+    fetchArtists, fetchCities,
+    fetchCountries,
+    fetchInstitutions,
+    fetchInventories,
+    fetchNationalities, fetchPlans, fetchSubjects, fetchTechniques
+} from "../actions/searchFormThunks"
+
+export interface SearchFormState {
+    inventories: Inventory[]
+    rooms: Room[]
+    artists: Artist[]
+    nationalities: string[]
+    techniques: string[]
+    institutions: string[]
+    countries: string[]
+    cities: string[]
+    subjects: string[]
+    lastError?: string
+}
+
+const initialState: SearchFormState = {
+    inventories: [],
+    rooms: [],
+    artists: [],
+    nationalities: [],
+    techniques: [],
+    institutions: [],
+    countries: [],
+    cities: [],
+    subjects: [],
+}
+
+export const searchFormSlice = createSlice({
+    name: "searchForm",
+    initialState: initialState,
+    reducers: {
+        resetSearchForm: () => initialState,
+        setInventories: (state, action) => {
+            state.inventories = action.payload
+        },
+        setRooms: (state, action) => {
+            state.rooms = action.payload
+        },
+        setArtists: (state, action) => {
+            state.artists = action.payload
+        },
+        setNationalities: (state, action) => {
+            state.nationalities = action.payload
+        },
+    },
+    extraReducers: (builder) => {
+        // ------------ Inventories ------------
+        builder.addCase(fetchInventories.fulfilled, (state, action) => {
+            state.inventories = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchInventories.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Institutions ------------
+        builder.addCase(fetchInstitutions.fulfilled, (state, action) => {
+            state.institutions = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchInstitutions.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Nationalities ------------
+        builder.addCase(fetchNationalities.fulfilled, (state, action) => {
+            state.nationalities = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchNationalities.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Countries ------------
+        builder.addCase(fetchCountries.fulfilled, (state, action) => {
+            state.countries = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchCountries.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Artists ------------
+        builder.addCase(fetchArtists.fulfilled, (state, action) => {
+            state.artists = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchArtists.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Rooms ------------
+        builder.addCase(fetchPlans.fulfilled, (state, action) => {
+            state.rooms = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchPlans.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Subjects ------------
+        builder.addCase(fetchSubjects.fulfilled, (state, action) => {
+            state.subjects = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchSubjects.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Cities ------------
+        builder.addCase(fetchCities.fulfilled, (state, action) => {
+            state.cities = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchCities.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // ------------ Techniques ------------
+        builder.addCase(fetchTechniques.fulfilled, (state, action) => {
+            state.techniques = action.payload
+            state.lastError = ""
+        })
+        builder.addCase(fetchTechniques.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+    }
+})
+
+export const { resetSearchForm, setInventories, setRooms, setArtists, setNationalities } = searchFormSlice.actions
+
+export default searchFormSlice.reducer

src/stores/store.ts

@@ -1 +1 @@
 import { configureStore } from "@reduxjs/toolkit"
 import userReducer from "./reducers/userSlice"
+import searchFormReducer from "./reducers/searchFormSlice"
+import listViewReducer from "./reducers/listViewSlice"
 
 const store = configureStore({
     reducer: {
         user: userReducer,
+        searchForm: searchFormReducer,
+        listView: listViewReducer,
     },
 })
 

src/types/listViewTypes.ts

@@ +1 @@
+import { Inventory } from "./searchFormTypes"
+
+
+export type SearchResponse = {
+    pagination: Pagination
+    data: ItemPreview[]
+}
+
+export type Pagination = {
+    cursor: number
+    records: number
+    items: number
+    inventories: Inventory[]
+}
+
+export type ItemPreview = {
+    xml_id: string
+    iconclass_external_id: string
+    text: string
+    title: string
+    object: Item
+    inventory: Inventory
+    src?: ItemSource
+}
+
+export type Item = {
+    caption: string
+    type: string
+    name?: PersonName[]
+    images?: ItemImage[]
+    origDate?: string
+
+}
+
+export type PersonName = {
+    value?: string
+    role: string
+    getty_external_id: string
+    getty_data: GettyData
+}
+
+export type GettyData = {
+    display_name: string
+}
+
+export type ItemImage = {
+    file: string
+    text: string
+}
+
+export type ItemSource = {
+    value: string
+}

src/types/searchFormTypes.ts

@@ +1 @@
+export type Inventory = {
+    count?: number
+    name: string
+    label: string
+    order: number
+}
+
+export type Room = {
+    id: number
+    in_plan: boolean
+    label: string
+    places?: RoomPlace[]
+}
+
+export type RoomPlace = {
+    id: number
+    label: string
+}
+
+export type Artist = {
+    display_name: string
+    getty_id: string
+}