Revize 7c4cd2cd

re #10454: ItemView: getting all required fields from api

App.tsx

@@ -13 +13 @@
         <VStack space={4} alignItems="center">
           {/* TODO: remove placeholder pro navbar */}
           <Center w="100%" h="40" bg="indigo.300" rounded="md" shadow={3} />
-          <ItemViewPage itemId={'PrgA-811'} />
+          {/* <ItemViewPage itemId={'BxlA-2'} /> */}
+          <ItemViewPage itemId={'BxlA-5'} />
         </VStack>
       </NativeBaseProvider>
     </Provider>

src/pages/ItemViewPage.tsx

@@ -1 +1 @@
 import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer } from "native-base"
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch } from "../stores/store"
 import { getPreviousConcordance, getNextConcordance, getItem } from "../stores/actions/itemThunks"
-import { Item, ItemState } from "../stores/reducers/itemSlice"
+import { Item, ItemState } from "../types/item"
+import { login } from "../stores/actions/userThunks"
 
 interface ItemViewProps {
   itemId: string
@@ -13 +14 @@
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const itemState = useSelector((state: ItemState) => state)
-
-  useEffect(() => {
-    dispatch(getItem(props.itemId));
-  }, []);
+  const itemViewState = useSelector((itemState: ItemState) => itemState)
 
   const handleGetPreviousConcordance = async () => {
-    await dispatch(getPreviousConcordance());
+    dispatch(getPreviousConcordance());
   };
 
   const handleGetNextConcordance = async () => {
-    await dispatch(getNextConcordance());
+    dispatch(getNextConcordance());
   };
 
+  useEffect(() => { 
+    dispatch(login({ username: "Viktorie", password: "Golem123." }));
+    dispatch(getItem(props.itemId));
+  }, []);
 
+  console.log(itemViewState.item);
 
   return (
     <VStack>
@@ -38 +40 @@
           color="coolGray.800"
           _dark={{ color: "warmGrey.50" }}
         >
-          {item.authorName}
+          {itemViewState.item.authorName}
         </Heading>
 
         <Text fontSize="xl" mt="2">
-          {item.caption}
+          {itemViewState.item.workName}
         </Text>
 
         <HStack>
@@ -57 +59 @@
   );
 }
 
-export default ItemViewPage
-
-function useEffect(arg0: () => void, arg1: (string | (import("redux-thunk").ThunkDispatch<{ user: import("../stores/reducers/userSlice").UserState; item: import("../stores/reducers/itemSlice").ItemState }, undefined, import("redux").AnyAction> & import("redux").Dispatch<...>))[]) {
-  throw new Error("Function not implemented.")
-}
+export default ItemViewPage;

src/stores/actions/itemThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
 import { getItemRequest } from "../../api/itemservice"
 import { getItemNotesRequest } from "../../api/notesservice"
-import { ItemState } from "../reducers/itemSlice"
+import { ItemState } from "../../types/item";
+
 
 export const getItem = createAsyncThunk(
     "item/getItem",
     async (itemId: string) => {
         try {
+
+            console.log("¨GET item/getItem/" + itemId);
+
             const response = await getItemRequest(itemId)
-            console.log(response)
-            if (response.status === 200) {
+
+
+            // data with image
+            if (response.status === 200 && response.data.object.length > 1) {
+                return {
+                    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
+                }
+            }
+            // data without image
+            else if (response.status === 200 && response.data.object.length == 1) {
                 return {
-                    authorName: response.data.object[0].getty_data.display_name,
-                    caption: response.data.object[0].caption,
-                    concordances: response.data.concordances
+                    fullView: false,
+
+                    concordances: response.data.concordances,
+
+                    authorName: response.data.object[0].name[0].getty_data.display_name,
+                    workName: response.data.object[0].caption,
                 }
-            } else {
+            } {
                 return Promise.reject(response.data ? response.data : "Error")
             }
         } catch (err: any) {

src/stores/actions/userThunks.ts

@@ -5 +5 @@
     "user/login",
     async (payload: { username: string, password: string }) => {
         try {
+            console.log("POST user/login");
             const response = await loginRequest(payload.username, payload.password)
-            console.log(response)
             if (response.status === 200) {
                 return {
                     username: payload.username,

src/stores/reducers/itemSlice.ts

@@ -1 +1 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 import { getItem, getItemNotes, getNextConcordance, getPreviousConcordance } from "../actions/itemThunks"
-import { Note } from "./notesSlice"
+import { Certainty, ItemState, Item } from "../../types/item";
 
 
-export interface Item {
-    authorName: string
-    caption: string
-
-
-    concordances: Concordance[]
-}
-
-export interface ItemState {
-    item: Item
-    concordances: Concordance[]
-    selectedConcordance: number
-    notes: Note[]
-    lastError?: string
-}
-
-export interface Concordance {
-    id: string
-    certainty: Certainty
-}
-
-enum Certainty {
-    SameAs = "same_as",
-    High = "high",
-    Medium = "medium",
-    Low = "low",
-}
-
 export const CertaintyWithColors: Record<Certainty, { certainty: Certainty; color: string }> = {
     same_as: { certainty: Certainty.SameAs, color: "#000000" },
     high: { certainty: Certainty.High, color: "#FF0000" },
@@ -53 +25 @@
     },
     extraReducers: (builder) => {
         // getItem
-        builder.addCase(getItem.fulfilled, (state, action) => {
+        builder.addCase(getItem.fulfilled, (state, action) => { 
 
             // set concordances from item, if selected concordance is 0
             if (state.selectedConcordance === 0) {
                 state.concordances = action.payload.concordances;
             }
 
-            state.item = {
-                authorName: action.payload.authorName,
-                caption: action.payload.caption,
-                concordances: action.payload.concordances
+            if(action.payload.fullView){
+                state.item = {
+                    fullView: true,
+                    
+                    authorDisplayName: action.payload.authorDisplayName,
+                    workName: action.payload.workName,
+                    concordances: action.payload.concordances,
+                    searchSubjects: action.payload.searchSubjects,
+                    inventoryItem: action.payload.inventoryItem,
+
+                    // additional
+                    institution: action.payload.institution,
+                    authorName: action.payload.authorName,
+                    imageUrl: action.payload.imageUrl,
+                    title: action.payload.title,
+                    repository: action.payload.repository,
+                    provenance: action.payload.provenance,
+                    description: action.payload.description
+                }
+            }
+            else{
+                state.item = {
+                    fullView: false,
+                    authorDisplayName: action.payload.authorDisplayName,
+                    workName: action.payload.workName,
+                    concordances: action.payload.concordances,
+                    searchSubjects: action.payload.searchSubjects,
+                    inventoryItem: action.payload.inventoryItem
+                }
             }
-
         })
         builder.addCase(getItem.rejected, (state, action) => {
             state.lastError = action.error.message

src/stores/reducers/notesSlice.ts

@@ -1 @@
-
-export interface Note {
-    username: string
-    userId: string
-    avatarUrl: string
-    items: string[]
-    createdTime: Date 
-    updatedTime: Date
-    noteColor: string
-    lastError?: string
-}

src/types/item.ts

@@ +1 @@
+import { Note } from "./note"
+
+export type  Item = {
+    concordances: Concordance[]
+
+    authorDisplayName: string
+    workName: string
+
+    inventoryItem: string
+    searchSubjects: string[]
+
+    fullView : boolean
+
+    authorName?: string
+    imageUrl?: string
+
+    title?: string
+    institution?: { 
+        name :string,
+        inventoryNumber: number,
+        country: string,
+        city: string
+    }
+    repository?: string
+    provenance?: string
+    description?: string
+}
+
+export type ItemState = {
+    item: Item
+    concordances: Concordance[]
+    selectedConcordance: number
+    notes: Note[]
+    lastError?: string
+}
+
+export type Concordance = {
+    id: string
+    cert: Certainty
+}
+
+export enum Certainty {
+    SameAs = "same_as",
+    High = "high",
+    Medium = "medium",
+    Low = "low",
+}

src/types/note.ts

@@ +1 @@
+export interface Note {
+    username: string
+    userId: string
+    avatarUrl: string
+    items: string[]
+    createdTime: Date 
+    updatedTime: Date
+    noteColor: string
+    lastError?: string
+}