commit e0741b928b4f1dd9fad89bc902e7e86eae41df97
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Wed Oct 18 15:34:39 2023 +0200

    re #10819 ItemView refactor layout, optimize

diff --git a/src/components/item/ItemTabBar.tsx b/src/components/item/ItemTabBar.tsx
index 0335a6e..c90c63f 100644
--- a/src/components/item/ItemTabBar.tsx
+++ b/src/components/item/ItemTabBar.tsx
@@ -44,7 +44,7 @@ const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: C
                                         <Pressable key={i} onPress={() => { onIndexChange(i) }}>
                                             <HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
                                                 <CircleIcon
-                                                    marginLeft="20%"
+                                                    marginLeft="5"
                                                     size="2"
                                                     color={CertaintyWithColors[concordances[i].cert].color}
                                                 />
diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index 9003717..c94d7e9 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -1,4 +1,4 @@
-import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex } from "native-base"
+import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon } from "native-base"
 import React, { useCallback, useEffect, useState } from "react"
 import { Item } from "../../types/item"
 import { Note } from "../../types/note"
@@ -24,6 +24,10 @@ interface ItemDetailProps {
 const ItemDetail = (props: { item: Item, itemLoading: boolean }) => {
     const item = props.item;
 
+    const [selectedImage, setSelectedImage] = useState<number>(0);
+
+    console.log("rerender")
+
     return (<>
         {
             item && props.itemLoading ?
@@ -32,23 +36,22 @@ const ItemDetail = (props: { item: Item, itemLoading: boolean }) => {
                 (
                     <ScrollView flex="1">
                         <VStack>
-                            <HStack marginTop="5%">
-                                <VStack width="75%">
+                            <HStack marginLeft={2.5} alignItems={"center"}>
+                                <VStack flex={1} marginTop={3.5}>
                                     <Text>
                                         {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                     </Text>
                                     <Heading size="sm">
                                         {item.workName}
                                     </Heading>
-
                                 </VStack>
-                                <Box width="25%">
+                                <Box marginLeft="auto" marginTop={0}> {/* marginLeft: "auto" pushes the Box to the right */}
                                     <Button variant="outline" size="md">
                                         {item.concordances[0].id}
                                     </Button>
                                 </Box>
                             </HStack>
-                            <Card shadow="1" marginTop="5%">
+                            <Card shadow="1" marginTop={5}>
                                 {item.inventoryItem &&
                                     <VStack>
                                         <Text italic>
@@ -62,51 +65,64 @@ const ItemDetail = (props: { item: Item, itemLoading: boolean }) => {
                                         </Text>
                                     </VStack>}
                             </Card>
-                            {item.fullView && item.imageUrl && (
-                                <Center background="primary.100" marginTop="5%">
-                                    <Text>Resembling object</Text>
-                                    <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }} />
-                                </Center>)}
+                            {item.fullView && item.images && item.images.length > 0 && (
+                                <VStack background="primary.100" marginTop={5} alignItems="center" justifyContent="center">
+                                    <Text marginBottom={2}>Resembling objects {selectedImage + 1 + "/" + item.images.length}</Text>
+                                    <HStack space={4}>
+                                        <Button variant="ghost" size="lg" onPress={() => {
+                                            if (item.images && selectedImage - 1 >= 0) {
+                                                setSelectedImage(selectedImage - 1);
+                                            }
+                                        }} leftIcon={<ChevronLeftIcon size="lg" />} />
+                                        <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.images[selectedImage].imageUrl }} />
+                                        <Button variant="ghost" size="lg" onPress={() => {
+                                            if (item.images && selectedImage + 1 < item.images.length) {
+                                                setSelectedImage(selectedImage + 1);
+                                            }
+                                        }} leftIcon={<ChevronRightIcon size="lg" />} />
+                                    </HStack>
+                                </VStack>
+                            )}
                             {item.fullView && (
-                                <Card shadow="1" marginTop="5%" marginBottom="5%">
+                                <Card shadow={1} marginTop={5} marginBottom={5}>
                                     {item.authorName &&
                                         <HStack>
-                                            <Text italic marginTop="2.5%">
+                                            <Text italic marginTop={2.5}>
                                                 <Text color="light.500">Author name: </Text>
                                                 {item.authorName}
                                             </Text>
                                         </HStack>}
                                     {item.title &&
                                         <HStack>
-                                            <Text italic marginTop="2.5%">
+                                            <Text italic marginTop={2.5}>
                                                 <Text color="light.500">Title: </Text>
                                                 {item.title}
                                             </Text>
                                         </HStack>}
                                     {item.institution &&
                                         <HStack>
-                                            <Text italic marginTop="2.5%">
+                                            <Text italic marginTop={2.5}>
                                                 <Text color="light.500">Institution: </Text>
                                                 {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
                                             </Text>
                                         </HStack>}
                                     {item.repository &&
                                         <HStack>
-                                            <Text italic marginTop="2.5%">
+                                            <Text italic marginTop={2.5}>
                                                 <Text color="light.500">Repository: </Text>
                                                 {item.repository}
                                             </Text>
                                         </HStack>}
                                     {item.provenance &&
                                         <HStack>
-                                            <Text italic marginTop="2.5%">
+                                            <Text italic marginTop={2.5}>
                                                 <Text color="light.500">Provenance: </Text>
                                                 {item.provenance}
                                             </Text>
                                         </HStack>}
                                     {item.description &&
                                         <HStack>
-                                            <Text italic marginTop="2.5%">
+                                            <Text italic marginTop={2.5}>
                                                 <Text color="light.500">Description: </Text>
                                                 {item.description}
                                             </Text>
@@ -131,7 +147,7 @@ const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, na
 
     // trigger refresh on triggerRefresh increment
     useEffect(() => {
-        if(triggerRefresh > 0){
+        if (triggerRefresh > 0) {
             log.debug("NotesViewPage", "useEffect", "getNotes");
             dispatch(getItemNotes({ item: props.item, relatedComments: showRelatedComments }));
         }
@@ -166,13 +182,13 @@ const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, na
         props.notesLoading ?
             (<LoadingBox text="Notes loading..." />)
             :
-            (<VStack height="90%">
+            (<VStack>
                 <Flex direction="row" alignItems="center" justify="flex-end">
                     <Text fontSize={"12"}>Show related comments</Text>
                     <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="md" />
                 </Flex>
-                <Box height="120%">
-                    <NotesListView height={Dimensions.get('window').height - 70 - 160} requestPending={requestPending} notes={props.notes} navigation={props.navigation} handleCreateComment={handleCreateItemComment} />
+                <Box >
+                    <NotesListView height={Dimensions.get('window').height - 355} requestPending={requestPending} notes={props.notes} navigation={props.navigation} handleCreateComment={handleCreateItemComment} />
                 </Box>
             </VStack>)
     );
@@ -196,9 +212,9 @@ const ItemView = (props: ItemDetailProps) => {
     }
 
     return (
-        <Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
+        <Box marginLeft={2.5} marginRight={2.5}>
 
-            <Box width="92%" marginLeft="5%" height="92%">
+            <Box height={Dimensions.get('window').height - 210}>
                 {itemShown ? (
                     <ItemDetail itemLoading={itemLoading} item={props.item} />
                 ) : (
@@ -206,8 +222,6 @@ const ItemView = (props: ItemDetailProps) => {
                 )}
             </Box>
 
-
-
             {/* item notes switch tab */}
             <HStack alignItems="center">
                 <Button
diff --git a/src/stores/actions/itemThunks.ts b/src/stores/actions/itemThunks.ts
index eeaf17b..acfde50 100644
--- a/src/stores/actions/itemThunks.ts
+++ b/src/stores/actions/itemThunks.ts
@@ -15,9 +15,13 @@ export const getItem = createAsyncThunk(
 
             // data with image
             if (response.status === 200 && response.data.object.length > 1) {
+                // TODO IMAGES to array :-)
                 const authorName = response.data.object[1]?.name?.[0]?.getty_data?.display_name || null;
-                const imageUrl = response.data.object[1]?.images?.[0]?.file || null;
-                const title = response.data.object[1]?.images?.[0]?.text || null;
+                const images : {imageUrl: string, title: string}[] = []
+                for(let i = 0; i < response.data.object[1]?.images.length; i++){
+                    images.push({imageUrl: response.data.object[1]?.images?.[i]?.file, title:  response.data.object[1]?.images?.[i]?.text})
+                }
+                
                 const institution = {
                     name: response.data.object[1]?.institution || null,
                     inventoryNumber: response.data.object[1]?.id_number || null,
@@ -40,8 +44,7 @@ export const getItem = createAsyncThunk(
                     inventoryItem: response.data.text || null,
                     searchSubjects: response.data.search_subject || null,
                     authorName,
-                    imageUrl,
-                    title,
+                    images,
                     institution,
                     repository,
                     provenance,
diff --git a/src/stores/reducers/itemSlice.ts b/src/stores/reducers/itemSlice.ts
index 3e89df7..9d5c80e 100644
--- a/src/stores/reducers/itemSlice.ts
+++ b/src/stores/reducers/itemSlice.ts
@@ -45,8 +45,8 @@ export const itemSlice = createSlice({
             if (action.payload.fullView) {
                 state.item.institution = action.payload.institution;
                 state.item.authorName = action.payload.authorName;
-                state.item.imageUrl = action.payload.imageUrl;
-                state.item.title = action.payload.title;
+                state.item.images = action.payload.images;
+                state.item.title = action.payload.images?.[0].title ?? undefined;
                 state.item.repository = action.payload.repository;
                 state.item.provenance = action.payload.provenance;
                 state.item.description = action.payload.description;
@@ -54,7 +54,7 @@ export const itemSlice = createSlice({
             else {
                 state.item.institution = undefined;
                 state.item.authorName = undefined;
-                state.item.imageUrl = undefined;
+                state.item.images = undefined;
                 state.item.title = undefined;
                 state.item.repository = undefined;
                 state.item.provenance = undefined;
diff --git a/src/types/item.ts b/src/types/item.ts
index 7de47d5..24221e5 100644
--- a/src/types/item.ts
+++ b/src/types/item.ts
@@ -14,7 +14,7 @@ export type  Item = {
     fullView : boolean
 
     authorName?: string
-    imageUrl?: string
+    images?: {imageUrl : string, title : string}[]
     title?: string
     institution?: { 
         name :string,
