Revize 356c8bce

re #10454: ItemView: concordances switch fix

src/components/item/ItemDetail.tsx

@@ -1 +1 @@
 import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, Divider } from "native-base"
 import React, { useState } from "react"
 import { Item } from "../../types/item"
+import { Note } from "../../types/note"
 
 interface ItemDetailProps {
-    item: Item
+    item: Item,
+    notes: Note[]
 }
 
 
-const ItemView = (props: ItemDetailProps) => {
+const ItemView = (props: {item: Item}) => {
     const item = props.item;
     return (
         <Center>

src/pages/ItemViewPage.tsx

@@ -26 +26 @@
 
   const { item, notes, concordances, selectedConcordance } = useSelector((state: RootState) => state.itemViewState)
 
-  const [index, setIndex] = React.useState(0);
 
-
-  // load main item
+  // initial: load main item
   useEffect(() => {
     // TODO remove login from here
     dispatch(login({ username: "Viktorie", password: "Golem123." }));
     dispatch(getItem(props.itemId));
   }, [props.itemId]);
 
-  console.log(item.id);
-
 
-  // concordances changed
+  // concordances are loaded
   useEffect(() => {
     if (item && concordances && concordances.length > 0) {
       let concordanceRoutes = [];
-      concordanceRoutes.push({
-        key: item.id,
-        title: item.id
-      })
 
       for (let i = 0; i < concordances.length; i++) {
         let concordance = concordances[i];
@@ -59 +51 @@
     }
   }, [concordances]);
 
-  // change tab
-  useEffect(() => {
+  const handleTabChange = (index: number) => {
     dispatch(setSelectedConcordance(index));
-  }, [index]);
+  };
 
+  // selected concordance changes
   useEffect(() => {
     if (concordances && concordances.length > 0) {
       dispatch(getItem(concordances[selectedConcordance].id));
     }
+
   }, [selectedConcordance]);
 
-    // item changes
-    useEffect(() => {
+  // item changes
+  useEffect(() => {
+    
+    if (item && item.id) {
       if (selectedConcordance == 0) {
         dispatch(setConcordances(item.concordances));
       }
-  
       // set item notes if item is loaded
       if (item && item.id) {
         dispatch(getItemNotes(item.id));
       }
-  
-    }, [item]);
+    }
+
+  }, [item]);
 
   return (
     <TabView
-      navigationState={{ index, routes }}
+      navigationState={{ index: selectedConcordance, routes }}
       renderScene={() => <ItemDetail item={item} />}
-      onIndexChange={setIndex}
+      onIndexChange={handleTabChange}
       initialLayout={{ width: layout.width }}
     />
-
-
   );
 }
 

src/stores/actions/itemThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
 import { getItemRequest } from "../../api/itemservice"
 import { getItemNotesRequest } from "../../api/notesservice"
-import { Concordance, ItemViewState } from "../../types/item";
+import { Certainty, Concordance } from "../../types/item";
 
 
 export const getItem = createAsyncThunk(
@@ -11 +11 @@
             console.log("GET item/getItem/" + itemId);
 
             const response = await getItemRequest(itemId);
-            
         
             // data with image
             if (response.status === 200 && response.data.object.length > 1) {
+                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 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
+                };
+                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;
+                
                 return {
                     id: itemId,
                     fullView: true,
-
-                    concordances: response.data.concordances,
-
-                    authorDisplayName: response.data.object[0].name[0].getty_data.display_name,
-                    workName: response.data.object[0].caption,
-
-                    inventoryItem: response.data.text,
-                    searchSubjects: response.data.search_subject,
-
-                    // additional fields
-                    authorName: response.data.object[1].name[0].getty_data.display_name,
-
-                    imageUrl: response.data.object[1].images[0].file,
-                    title: response.data.object[1].images[0].text,
-
-                    institution: {
-                        name: response.data.object[1].institution,
-                        inventoryNumber: response.data.object[1].id_number,
-                        country: response.data.object[1].country,
-                        city: response.data.object[1].city
-                    },
-                    repository: response.data.object[1].repository,
-                    provenance: response.data.object[1].provenance,
-                    description: response.data.object[1].physical_description
+                    concordances:  [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}].concat(response.data.concordances),
+                    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,
+                    authorName,
+                    imageUrl,
+                    title,
+                    institution,
+                    repository,
+                    provenance,
+                    description
                 }
             }
             // data without image
@@ -49 +49 @@
                 return {
                     id: itemId,
                     fullView: false,
-                    concordances: response.data.concordances,
-
-                    authorDisplayName: response.data.object[0].name[0].getty_data.display_name,
-                    workName: response.data.object[0].caption,
-                    inventoryItem: response.data.text,
-                    searchSubjects: response.data.search_subject,
+                    concordances: [{id: itemId, cert: Certainty.Unknown}].concat(response.data.concordances),
+                    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,
                 }
             }
             else {
+                console.log("Error " + response.data);
                 return Promise.reject(response.data ? response.data : "Error")
             }
         } catch (err: any) {
+            
+            console.log(err);
             return Promise.reject(err.response.data)
         }
     }
@@ -107 +109 @@
     "item/getItemNotes",
     async (itemId: string) => {
         try {
-            console.log("¨GET notes/getNotes/" + itemId);
+            console.log("GET notes/getNotes/" + itemId);
 
             const response = await getItemNotesRequest(itemId);
 

src/stores/reducers/itemSlice.ts

@@ -8 +8 @@
     high: { certainty: Certainty.High, color: "#FF0000" },
     medium: { certainty: Certainty.Medium, color: "#FFFF00" },
     low: { certainty: Certainty.Low, color: "#00FF00" },
+    unknown : { certainty: Certainty.Unknown, color: "#000000"}
 };
 
 const initialState: ItemViewState = {
@@ -33 +34 @@
         // getItem
         builder.addCase(getItem.fulfilled, (state, action) => {
 
-            state.item.id = action.payload.id;
-            state.item.authorDisplayName = action.payload.authorDisplayName;
-            state.item.workName = action.payload.workName;
-            state.item.concordances = action.payload.concordances;
-            state.item.searchSubjects = action.payload.searchSubjects;
-            state.item.inventoryItem = action.payload.inventoryItem;
-            state.item.fullView = action.payload.fullView;
+            state.item = {
+                id : action.payload.id,
+                authorDisplayName : action.payload.authorDisplayName,
+                workName : action.payload.workName,
+                concordances : action.payload.concordances,
+                searchSubjects : action.payload.searchSubjects,
+                inventoryItem : action.payload.inventoryItem,
+                fullView : action.payload.fullView,
+            }
 
             if (action.payload.fullView) {
                 state.item.institution = action.payload.institution;

src/types/item.ts

@@ -44 +44 @@
     High = "high",
     Medium = "medium",
     Low = "low",
+    Unknown = "unknown"
 }