Revize 1980ed09

Search page finished
re #10606

app.json

@@ -1 +1 @@
 {
   "expo": {
     "name": "RudolfII",
-    "slug": "RudolfII",
+    "slug": "inventaria-rudolphina",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -21 +21 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "cz.zcu.kiv.tsp.inventaria_rudolphina"
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "extra": {
+      "eas": {
+        "projectId": "9cbe973a-6a5e-4b5e-85dd-02a80f7e38cc"
+      }
+    },
+    "owner": "mschwob"
   }
 }

eas.json

@@ +1 @@
+{
+  "cli": {
+    "version": ">= 3.12.1"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "preview2": {
+      "android": {
+        "gradleCommand": ":app:assembleRelease"
+      }
+    },
+    "preview3": {
+      "developmentClient": true
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

package-lock.json

@@ -18 +18 @@
         "native-base": "^3.4.28",
         "react": "18.2.0",
         "react-dom": "^18.2.0",
-        "react-native": "0.71.6",
+        "react-native": "0.71.8",
         "react-native-deck-swiper": "^2.0.13",
         "react-native-gesture-handler": "~2.9.0",
         "react-native-logs": "^5.0.1",
@@ -13337 +13337 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-native": {
-      "version": "0.71.6",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.71.6.tgz",
-      "integrity": "sha512-gHrDj7qaAaiE41JwaFCh3AtvOqOLuRgZtHKzNiwxakG/wvPAYmG73ECfWHGxjxIx/QT17Hp37Da3ipCei/CayQ==",
+      "version": "0.71.8",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.71.8.tgz",
+      "integrity": "sha512-ftMAuhpgTkbHU9brrqsEyxcNrpYvXKeATY+if22Nfhhg1zW+6wn95w9otwTnA3xHkljPCbng8mUhmmERjGEl7g==",
       "dependencies": {
         "@jest/create-cache-key-function": "^29.2.1",
         "@react-native-community/cli": "10.2.2",
@@ -13366 +13366 @@
         "promise": "^8.3.0",
         "react-devtools-core": "^4.26.1",
         "react-native-codegen": "^0.71.5",
-        "react-native-gradle-plugin": "^0.71.17",
+        "react-native-gradle-plugin": "^0.71.18",
         "react-refresh": "^0.4.0",
         "react-shallow-renderer": "^16.15.0",
         "regenerator-runtime": "^0.13.2",
@@ -13449 +13449 @@
       }
     },
     "node_modules/react-native-gradle-plugin": {
-      "version": "0.71.17",
-      "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz",
-      "integrity": "sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA=="
+      "version": "0.71.18",
+      "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.18.tgz",
+      "integrity": "sha512-7F6bD7B8Xsn3JllxcwHhFcsl9aHIig47+3eN4IHFNqfLhZr++3ElDrcqfMzugM+niWbaMi7bJ0kAkAL8eCpdWg=="
     },
     "node_modules/react-native-logs": {
       "version": "5.0.1",
@@ -25956 +25956 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "react-native": {
-      "version": "0.71.6",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.71.6.tgz",
-      "integrity": "sha512-gHrDj7qaAaiE41JwaFCh3AtvOqOLuRgZtHKzNiwxakG/wvPAYmG73ECfWHGxjxIx/QT17Hp37Da3ipCei/CayQ==",
+      "version": "0.71.8",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.71.8.tgz",
+      "integrity": "sha512-ftMAuhpgTkbHU9brrqsEyxcNrpYvXKeATY+if22Nfhhg1zW+6wn95w9otwTnA3xHkljPCbng8mUhmmERjGEl7g==",
       "requires": {
         "@jest/create-cache-key-function": "^29.2.1",
         "@react-native-community/cli": "10.2.2",
@@ -25985 +25985 @@
         "promise": "^8.3.0",
         "react-devtools-core": "^4.26.1",
         "react-native-codegen": "^0.71.5",
-        "react-native-gradle-plugin": "^0.71.17",
+        "react-native-gradle-plugin": "^0.71.18",
         "react-refresh": "^0.4.0",
         "react-shallow-renderer": "^16.15.0",
         "regenerator-runtime": "^0.13.2",
@@ -26063 +26063 @@
       }
     },
     "react-native-gradle-plugin": {
-      "version": "0.71.17",
-      "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz",
-      "integrity": "sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA=="
+      "version": "0.71.18",
+      "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.18.tgz",
+      "integrity": "sha512-7F6bD7B8Xsn3JllxcwHhFcsl9aHIig47+3eN4IHFNqfLhZr++3ElDrcqfMzugM+niWbaMi7bJ0kAkAL8eCpdWg=="
     },
     "react-native-logs": {
       "version": "5.0.1",

package.json

@@ -19 +19 @@
     "native-base": "^3.4.28",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.71.8",
     "react-native-deck-swiper": "^2.0.13",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-logs": "^5.0.1",

src/components/listView/ItemPreview.tsx

@@ -1 @@
-import { Center, HStack, Image, Pressable, Text, VStack } from "native-base"
+import { Center, HStack, Image, Pressable, ScrollView, Text, VStack } from "native-base"
 import { useEffect } from "react"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "../Navigation"
@@ -36 +36 @@
                     />
                     <VStack h={70}>
                         <Text fontSize={"sm"} italic>{ props.name }</Text>
-                        <Text fontSize={"sm"} bold>{ props.caption }</Text>
+                        <Text fontSize={"sm"} bold noOfLines={1}>{ props.caption }</Text>
                         <Text fontSize={"xs"}>{ props.title }</Text>
                     </VStack>
                 </HStack>

src/components/listView/ListView.tsx

@@ -18 +18 @@
 
     return (
         <>
-            {inventories.map((inventory) => (
-                <ListViewInventoryGroup inventory={inventory.name} navigation={props.navigation}/>
+            <Text fontSize={ 16 } fontWeight={ "bold" } color={"primary.500"}>Search results:</Text>
+            { inventories && inventories.length > 0 ?
+                (inventories.length > 1 ?
+                    inventories.map((inventory) => (
+                            <ListViewInventoryGroup
+                                inventory={ inventory.label }
+                                navigation={ props.navigation }
+                            />
+                        )
+                    ) : (
+                        <ListViewInventoryGroup
+                            inventory={ inventories[0].label }
+                            navigation={ props.navigation }
+                            defaultOpen={ true }
+                        />
+                    )) : (
+                    <Text alignSelf={ "center" }>No results found</Text>
                 )
-            )}
+            }
         </>
     )
 }

src/components/listView/ListViewInventoryGroup.tsx

@@ -1 @@
-import { Badge, Pressable, VStack } from "native-base"
+import { Badge, Button, Pressable, VStack, Text, Fab } from "native-base"
 import { ItemPreviewType } from "../../types/listViewTypes"
 import ItemPreview from "./ItemPreview"
 import { useDispatch, useSelector } from "react-redux"
@@ -9 +9 @@
 interface ListViewInventoryGroupProps {
     inventory: string
     navigation: any
+    defaultOpen?: boolean
 }
 
 const ListViewInventoryGroup = (props: ListViewInventoryGroupProps) => {
     const items = useSelector((state: RootState) => state.listView.data[props.inventory])
     const loading = useSelector((state: RootState) => state.listView.loading)
-    const [isExpanded, setIsExpanded] = useState(false)
+    const [isExpanded, setIsExpanded] = useState(props.defaultOpen ? props.defaultOpen : false)
     const pagination = useSelector((state: RootState) => state.listView.loadedPages[props.inventory])
 
     const dispatch = useDispatch<AppDispatch>()
@@ -75 +76 @@
         }
     }, [loading])
 
+    useEffect(() => {
+        if (props.defaultOpen) {
+            if (!items || items.length == 0) {
+                dispatch(loadItemsByInventory(props.inventory))
+            }
+        }
+    }, [])
+
     return (
         <>
-            <VStack mb={2}>
-                <Pressable
-                    onPress={() => setIsExpanded(!isExpanded) }
+            <VStack mb={ 2 }>
+                <Button
+                    onPress={ () => setIsExpanded(!isExpanded) }
+                    alignSelf={ "start" }
+                    variant="solid"
+                    bg={ "primary.500" }
+                    mb={ 2 }
+                    p={ 1 }
+                    size={ "md" }
                 >
-                    <Badge
-                        colorScheme="primary"
-                        variant="solid"
-                    >
-                        { props.inventory }
-                    </Badge>
-                </Pressable>
+                    { props.inventory }
+                </Button>
                 { isExpanded && items && items.map((item) => (
                     <ItemPreview
                         // @ts-ignore
@@ -100 +110 @@
                     />
                 )) }
                 { isExpanded && items && pagination && pagination.cursor < pagination.records && (
-                    <Pressable
-                        onPress={() => dispatch(loadItemsByInventory(props.inventory))}
-                        mt={2}
-                        >
-                        <Badge colorScheme={"primary"} variant={"outline"}>
-                            Load more
-                        </Badge>
-                    </Pressable>
-                )}
+                    <Button
+                        onPress={ () => dispatch(loadItemsByInventory(props.inventory)) }
+                        variant={ "Link" }
+                        mt={ 2 }
+                        size={ "sm" }
+                        color={ "primary.500" }
+                        textDecoration={ "underline" }
+                    >
+                        <Text fontSize={ "sm" } color={ "primary.6 00" } underline>Load more</Text>
+                    </Button>
+                ) }
 
             </VStack>
         </>

src/components/search/SearchForm.tsx

@@ -1 +1 @@
 import {
     Box,
-    Button,
-    CloseIcon,
-    ScrollView,
+    Button, ChevronDownIcon, ChevronUpIcon,
+    CloseIcon, FormControl, HStack, Input,
+    ScrollView, Text,
     VStack
 } from "native-base"
 import { useDispatch, useSelector } from "react-redux"
@@ -42 +42 @@
     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 [searchQuery, setSearchQuery] = useState<string>("")
 
     const [isSchoolOfPrague, setIsSchoolOfPrague] = useState(false)
     const [isOriginal, setIsOriginal] = useState(false)
@@ -66 +67 @@
             isOriginal,
             isCopy,
             isHighQuality,
-            isLowQuality
+            isLowQuality,
+            searchQuery: searchQuery,
         }
         dispatch(setFilterState(filterState))
         dispatch(search(filterState))
@@ -85 +87 @@
         setSelectedCountries([])
         setSelectedCities([])
         setSelectedInstitutions([])
+        setSearchQuery("")
+    }
+
+    const getSearchHeader = () => {
+        if (inventories && inventories.length === 1) {
+            return `Search: ${ inventories[0].name }`
+        } else if (rooms && rooms.length === 1) {
+            return `Search: ${ rooms[0].label }`
+        } else {
+            return "Search:"
+        }
     }
 
     return (
         <>
+            <Text
+                fontSize={ "2xl" }
+                fontWeight={ "bold" }
+                color={ "primary.500" }
+            >
+                { getSearchHeader() }
+            </Text>
+            <Input
+                placeholder="Search"
+                size={ "md" }
+                variant="underlined"
+                value={searchQuery}
+                onChangeText={ setSearchQuery }
+            />
+            <HStack justifyContent={"space-between"}>
+                <Button
+                    alignSelf={ "start" }
+                    onPress={ () => props.setIsFilterOpen(!props.isFilterOpen) }
+                    variant="outline"
+                    endIcon={
+                        <>
+                            { props.isFilterOpen ?
+                                (<ChevronUpIcon size={ 4 } color={ "primary.500" }/>)
+                                : (<ChevronDownIcon size={ 4 } color={ "primary.500" }/>) }
+                        </>
+                    }
+                    flexWrap={ "nowrap" }
+                    borderColor={ "primary.500" }
+                    size={ "sm" }
+                    mt={ 2 }
+                    p={ 2 }
+
+                >
+                    Filter
+                </Button>
+                { !props.isFilterOpen && (
+                    <Button
+                        borderRadius={ 10 }
+                        onPress={ () => searchSubmit() }
+                        colorScheme="primary"
+                        background={ "primary.500" }
+                        variant="solid"
+                        mt={2}
+                        p={2}
+                        size={ "md" }
+                    >
+                        Search
+                    </Button>
+                )}
+            </HStack>
             { props.isFilterOpen && (
                 <>
                     <MultiSelect
@@ -206 +269 @@
                     </Box>
                 </>
             ) }
+
         </>
     )
 }

src/pages/LoginPage.tsx

@@ -48 +48 @@
                 >
                     <Heading
                         size="2xl"
-                        color="primary.100"
+                        color="primary.500"
                         textAlign="center"
                         _dark={ {
                             color: "primary.100"
@@ -60 +60 @@
                         mt="10"
                         textAlign="center"
                         _dark={ {
-                            color: "primary.50"
+                            color: "primary.500"
                         } }
-                        color="primary.50"
+
                         fontWeight="bold"
                         size="xl"
                     >
@@ -81 +81 @@
                             <Input
                                 // value={username}
                                 textContentType={"username"}
+                                rounded={ "xl" }
                                 autoComplete={"username"}
                                 onSubmitEditing={ () => { loginUser() } }
                                 onChangeText={ (username) => setUsername(username) }
                             />
-                        </FormControl>
-                        <FormControl>
                             <FormControl.Label>Password</FormControl.Label>
                             <Input
                                 type="password"
                                 autoComplete={ "password" }
                                 id={ "password" }
-                                returnKeyType={ "done" }
+                                returnKeyType={ "go" }
+                                rounded={ "xl" }
                                 onSubmitEditing={ () => loginUser() }
                                 onChangeText={ (password) => setPassword(password) }
                             />
+                            <Button
+                                mt="2"
+                                bg={ "primary.500" }
+                                onPress={ loginUser }
+                                rounded={ "xl"}
+                            >
+                                Sign in
+                            </Button>
                         </FormControl>
-                        <Button
-                            mt="2"
-                            colorScheme="indigo"
-                            onPress={ loginUser }
-                        >
-                            Sign in
-                        </Button>
-                        <HStack mt="6" justifyContent="center">
-                            <Text fontSize="sm" color="coolGray.600" _dark={ {
-                                color: "warmGray.200"
-                            } }>
-                                I'm a new user.{ " " }
-                            </Text>
-                            <Link _text={ {
-                                color: "indigo.500",
-                                fontWeight: "medium",
-                                fontSize: "sm"
-                            } } href="#">
-                                Sign Up
-                            </Link>
-                        </HStack>
                     </VStack>
                 </Box>
             </Center>

src/pages/SearchPage.tsx

@@ -43 +43 @@
     }, [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>
+        <Center m={ 2 } mr={0} mb={6} flex={1}>
+
             <ScrollView flex={1} w={"100%"} >
-                <VStack space={ 1 }>
+                <VStack space={ 1 } mr={ 4 }>
                     <SearchForm isFilterOpen={ isFilterOpen } setIsFilterOpen={setIsFilterOpen}/>
                     <ListView navigation={navigation}/>
                 </VStack>

src/theme/nativeBaseTheme.ts

@@ -14 +14 @@
             800: '#8B5800',
             900: '#5D3A00',
         },
+        buttonBackground: 'primary.500'
 
     }
 })