Revize ca53e9f1

Demo of listview implemented
re #10342

src/api/searchService.ts

@@ -6 +6 @@
 }
 
 export const searchRequest = async (params: SearchParams) => {
-    return await axiosInstance.get(`/api/search_v2/${ (params.inventory ? `inventory=${ params.inventory }` : "")}`)
+    return await axiosInstance.get(`/search_v2${ (params.inventory ? `?inventory=${ params.inventory }` : "")}`)
 }

src/components/listView/ItemPreview.tsx

@@ -1 @@
-import { Center } from "native-base"
+import { Center, HStack, Image, Text, VStack } from "native-base"
 
 interface ItemPreviewProps {
     caption: string
     title: string
-    name: string
-    image: string
+    name?: string
+    image?: string
 }
 
 const ItemPreview = (props: ItemPreviewProps) => {
 
     return (
         <>
-            <Center>
 
-            </Center>
+            <HStack
+                space={ 2 }
+                flex={ 1 }
+                alignItems={ "start" }
+            >
+                <Image
+                    source={ {uri: `http:/147.228.173.159/static/images/${ props.image ? props.image : "thumb-Rel-78.png" }`} }
+                    size={ "sm" }
+                    alt={ props.image ? props.image : "thumb-Rel-78.png" }
+                />
+                <VStack>
+                    <Text>{ props.name }</Text>
+                    <Text>{ props.caption }</Text>
+                    <Text>{ props.title }</Text>
+                </VStack>
+            </HStack>
         </>
     )
 }

src/components/listView/ListView.tsx

@@ -1 +1 @@
 import { useEffect, useState } from "react"
-import { Text } from "native-base"
+import { ScrollView, Text, VStack } from "native-base"
 import { useSelector } from "react-redux"
 import { RootState } from "../../stores/store"
+import ItemPreview from "./ItemPreview"
 
 const ListView = () => {
     const items = useSelector((state: RootState) => state.listView.data)
 
     return (
-        <>
-            <Text>ListView</Text>
-        </>
+        <VStack
+            space={ 2 }
+            flex={ 1 }
+            p={ 4 }
+            alignItems={ "start" }
+        >
+            { items.map((item) => (
+                <ItemPreview
+                    caption={ item.object[0].caption }
+                    title={ item.text }
+                    name={
+                        item.object[0].name ?
+                            item.object[0].name[0].getty_data ?
+                                item.object[0].name[0].getty_data.display_name
+                                :
+                                item.object[0].name[0].value
+                            :
+                            undefined
+                    }
+                    image={ item.object[1] && item.object[1].images && item.object[1].images ? item.object[1].images[0].file : undefined }
+                />
+            )) }
+        </VStack>
     )
 }
 

src/components/search/SearchForm.tsx

@@ -50 +50 @@
 
 
     const searchSubmit = () => {
-        console.log("search")
         dispatch(search({inventory: selectedInventories ? selectedInventories[0] : undefined}))
     }
 

src/pages/LoginPage.tsx

@@ -80 +80 @@
                             <FormControl.Label>Username</FormControl.Label>
                             <Input
                                 // value={username}
+                                textContentType={"username"}
+                                autoComplete={"username"}
+                                onSubmitEditing={ () => { loginUser() } }
                                 onChangeText={ (username) => setUsername(username) }
                             />
                         </FormControl>
                         <FormControl>
                             <FormControl.Label>Password</FormControl.Label>
-                            <Input type="password"
-                                // value={password}
-                                   onChangeText={ (password) => setPassword(password) }
+                            <Input
+                                type="password"
+                                autoComplete={ "password" }
+                                id={ "password" }
+                                returnKeyType={ "done" }
+                                onSubmitEditing={ () => loginUser() }
+                                onChangeText={ (password) => setPassword(password) }
                             />
-                            <Link _text={ {
-                                fontSize: "xs",
-                                fontWeight: "500",
-                                color: "indigo.500"
-                            } } alignSelf="flex-end" mt="1">
-                                Forget Password?
-                            </Link>
                         </FormControl>
                         <Button
                             mt="2"
                             colorScheme="indigo"
-                            onPress={ () => loginUser() }
+                            onPress={ loginUser }
                         >
                             Sign in
                         </Button>

src/pages/SearchPage.tsx

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

src/types/listViewTypes.ts

@@ -23 +23 @@
     src?: ItemSource
 }
 
-export type Item = {
-    caption: string
-    type: string
-    name?: PersonName[]
-    images?: ItemImage[]
-    origDate?: string
-
-}
+export type Item = [
+    {
+        caption: string
+        type: string
+        name?: PersonName[]
+    },
+    {
+        images?: ItemImage[]
+        origDate?: string
+    }
+]
 
 export type PersonName = {
     value?: string