Revize c1161e82

re #10819 ItemView prevent error states

src/components/item/ItemTabBar.tsx

@@ -1 +1 @@
 import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon } from "native-base";
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
-import { Concordance } from "../../types/item";
+import { Certainty, Concordance } from "../../types/item";
 import LoadingBox from "../loading/LoadingBox";
 
 // custom render Tab
@@ -46 +46 @@
                                                 <CircleIcon
                                                     marginLeft="5"
                                                     size="2"
-                                                    color={CertaintyWithColors[concordances[i].cert].color}
+                                                    color={CertaintyWithColors[concordances[i].cert ?? Certainty.Unknown].color}
                                                 />
                                                 <Text marginLeft="5%">
                                                     {i == index ? <Text bold>{concordances[i].id}</Text> : concordances[i].id}
@@ -64 +64 @@
                                                 <CircleIcon
                                                     marginLeft="42%"
                                                     size="2"
-                                                    color={CertaintyWithColors[concordances[0].cert].color}
+                                                    color={CertaintyWithColors[concordances[0].cert ?? Certainty.Unknown].color}
                                                 />
                                                 <Text marginLeft="2%">
                                                     <Text bold>{concordances[0].id}</Text>

src/components/item/ItemView.tsx

@@ -47 +47 @@
                                 </VStack>
                                 <Box marginLeft="auto" marginTop={0}> {/* marginLeft: "auto" pushes the Box to the right */}
                                     <Button variant="outline" size="md">
-                                        {item.concordances[0].id}
+                                        {item?.concordances?.[0]?.id}
                                     </Button>
                                 </Box>
                             </HStack>
@@ -59 +59 @@
                                             {item.inventoryItem}
                                         </Text>
                                         <Text italic marginTop="2.5%">
-                                            {item.searchSubjects.map((subject, index) => (
-                                                index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
+                                            {item.searchSubjects != undefined && item?.searchSubjects?.map((subject, index) => (
+                                                item.searchSubjects && index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
                                             ))}
                                         </Text>
                                     </VStack>}

src/pages/ItemViewPage.tsx

@@ -19 +19 @@
 
   const layout = useWindowDimensions();
 
-  const [routes, setRoutes] = React.useState([
+  const [routes, setRoutes] = React.useState<{key: string, title: string}[]>([
     // initial tab
     { key: 'loading', title: 'Loading item...' },
   ]);
@@ -54 +54 @@
   useEffect(() => {
     dispatch(getItem(route.params.itemId));
     log.debug("ItemViewPage", "useEffect", "getItem", route.params.itemId);
-  }, [])
-
+  }, [route.params.itemId])
 
   // concordances are loaded
   useEffect(() => {
@@ -69 +68 @@
       for (let i = 0; i < concordances.length; i++) {
         let concordance = concordances[i];
         concordanceRoutes.push({
-          key: concordance.id,
-          title: concordance.id
+          key: concordance.id ?? "",
+          title: concordance.id ?? ""
         })
         // _renderSceneDict[concordance.id] = <LoadingBox text={`Loading item ${concordance.id}...`}></LoadingBox>;
       }
@@ -86 +85 @@
 
     if (!itemLoading && item && item.id) {
       if (index == 0) {
-        dispatch(setConcordances(item.concordances));
+        dispatch(setConcordances(item.concordances ?? []));
       }
       // set item notes if item is loaded
       if (item && item.id) {
@@ -100 +99 @@
       console.log("index changed");
       setIndex(newIndex);
       if (concordances && concordances.length > 0) {
-        dispatch(getItem(concordances[newIndex].id));
+        dispatch(getItem(concordances[newIndex].id ?? ""));
       }
     }
   }

src/stores/actions/itemThunks.ts

@@ -2 +2 @@
 import { getItemRequest } from "../../api/itemservice"
 import { getItemNotesRequest } from "../../api/notesservice"
 import { Certainty, Concordance, Item } from "../../types/item";
-import { Note } from "../../types/note";
 
 
 export const getItem = createAsyncThunk(
@@ -16 +15 @@
             // 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 authorName = response.data?.object[1]?.name?.[0]?.getty_data?.display_name ?? undefined;
                 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})
+                for(let i = 1; i < response.data.object.length; i++){
+                    images.push({imageUrl: response.data.object[i]?.images?.[0]?.file, title:  response.data.object[i]?.images?.[0]?.text})
                 }
                 
                 const institution = {
-                    name: response.data.object[1]?.institution || null,
-                    inventoryNumber: response.data.object[1]?.id_number || null,
-                    country: response.data.object[1]?.country || null,
-                    city: response.data.object[1]?.city || null
+                    name: response.data?.object[1]?.institution ?? undefined,
+                    inventoryNumber: response.data?.object[1]?.id_number ?? undefined,
+                    country: response.data?.object[1]?.country ?? undefined,
+                    city: response.data?.object[1]?.city ?? undefined
                 };
-                const repository = response.data.object[1]?.repository || null;
-                const provenance = response.data.object[1]?.provenance || null;
-                const description = response.data.object[1]?.physical_description || null;
+                const repository = response.data?.object[1]?.repository ?? undefined;
+                const provenance = response.data?.object[1]?.provenance ?? undefined;
+                const description = response.data?.object[1]?.physical_description ?? undefined;
 
                 return {
                     id: itemId,
                     fullView: true,
                     concordances: response.data.concordances ?
-                        [{ id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown }].concat(response.data.concordances)
+                        [{ id: itemId, cert: response.data?.object[1]?.cert ?? Certainty.Unknown }].concat(response.data.concordances)
                         :
-                        [{ id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown }],
-                    authorDisplayName: response.data.object[0]?.name?.[0]?.getty_data?.display_name || null,
-                    workName: response.data.object[0]?.caption || null,
-                    inventoryItem: response.data.text || null,
-                    searchSubjects: response.data.search_subject || null,
+                        [{ id: itemId, cert: response.data?.object[1]?.cert ?? Certainty.Unknown }],
+                    authorDisplayName: response.data.object[0]?.name?.[0]?.getty_data?.display_name ?? undefined,
+                    workName: response.data.object[0]?.caption ?? undefined,
+                    inventoryItem: response.data.text ?? undefined,
+                    searchSubjects: response.data.search_subject ?? undefined,
                     authorName,
                     images,
                     institution,
@@ -57 +56 @@
                     id: itemId,
                     fullView: false,
                     concordances: response.data.concordances ?
-                        [{ id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown }].concat(response.data.concordances)
+                        [{ id: itemId, cert: response.data?.object[1]?.cert ?? Certainty.Unknown }].concat(response.data.concordances)
                         :
-                        [{ id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown }],
-                    authorDisplayName: response.data.object[0]?.name?.[0]?.getty_data?.display_name || null,
-                    workName: response.data.object[0]?.caption || null,
-                    inventoryItem: response.data.text || null,
-                    searchSubjects: response.data.search_subject || null,
+                        [{ id: itemId, cert: response.data?.object[1]?.cert ?? Certainty.Unknown }],
+                    authorDisplayName: response.data.object[0]?.name?.[0]?.getty_data?.display_name ?? undefined,
+                    workName: response.data.object[0]?.caption ?? undefined,
+                    inventoryItem: response.data.text ?? undefined,
+                    searchSubjects: response.data.search_subject ?? undefined,
                 }
             }
             else {
@@ -115 +114 @@
             const response = await getItemNotesRequest(item, relatedComments);
 
             if (response.status === 200) {
-                if (response.data.length > 0) {
+                if (response.data && response.data.length > 0) {
 
                     let notes = [];
                     for (let i = 0; i < response.data.length; i++) {

src/types/item.ts

@@ -2 +2 @@
 
 
 export type  Item = {
-    id: string
+    id?: string
 
-    concordances: Concordance[]
+    concordances?: Concordance[]
 
-    authorDisplayName: string
-    workName: string
-    inventoryItem: string
-    searchSubjects: string[]
+    authorDisplayName?: string
+    workName?: string
+    inventoryItem?: string
+    searchSubjects?: string[]
 
     fullView : boolean
 
@@ -37 +37 @@
 }
 
 export type Concordance = {
-    id: string
-    cert: Certainty
+    id?: string
+    cert?: Certainty
 }
 
 export enum Certainty {