Revize 88d2df9a

re #10454: ItemView getItemNotes

App.tsx

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

src/pages/ItemViewPage.tsx

@@ -2 +2 @@
 import React, { useState, useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
-import { getItem, setConcordances, setSelectedConcordance } from "../stores/actions/itemThunks"
+import { getItem, getItemNotes, setConcordances, setSelectedConcordance } from "../stores/actions/itemThunks"
 import { Item, ItemViewState } from "../types/item"
 import { login } from "../stores/actions/userThunks"
 
@@ -14 +14 @@
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const { item, concordances, selectedConcordance } = useSelector((state: RootState) => state.itemViewState)
+  const { item, notes, concordances, selectedConcordance } = useSelector((state: RootState) => state.itemViewState)
 
   const handleGetPreviousConcordance = async () => {
     if (selectedConcordance - 1 >= 0) {
@@ -30 +30 @@
     }
   };
 
-  // initialize with base item (set concordances from it)
+  // load main item
   useEffect(() => {
     // TODO remove login from here
     dispatch(login({ username: "Viktorie", password: "Golem123." }));
     dispatch(getItem(props.itemId));
-    dispatch(setConcordances(item.concordances));
   }, []);
 
+  // item changes
+  useEffect(() => {
+
+    if (selectedConcordance == 0) {
+      dispatch(setConcordances(item.concordances));
+    }
+
+    // set item notes if item is loaded
+    if(item.id){
+      dispatch(getItemNotes(item.id));
+    }
+
+  }, [item]);
+
+  console.log(notes);
 
   return (
     <VStack>
       <Center>
-        <VStack>
-          <Text>
-            Concordances: {concordances.map((concordance) => concordance.id).join(', ')}
-          </Text>
-          <Text>
-            {/* Selected: {concordances[selectedConcordance].id} */}
-            Selected: {selectedConcordance}
-          </Text>
-          <HStack>
-            <Button onPress={handleGetPreviousConcordance} mr={2}>
-              Previous Concordance
-            </Button>
-            <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
-          </HStack>
-          <Text>
-            current item: {item.workName}
-          </Text>
-        </VStack>
+        {concordances && concordances.length > 0 && item && ( // concordances && item are loaded
+          <VStack>
+            <Text>
+              Concordances: {concordances.map((concordance) => concordance.id).join(', ')}
+            </Text>
+            <Text>
+              {/* Selected: {concordances[selectedConcordance].id} */}
+              Selected: {concordances[selectedConcordance].id}
+            </Text>
+            <HStack>
+              <Button onPress={handleGetPreviousConcordance} mr={2}>
+                Previous Concordance
+              </Button>
+              <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
+            </HStack>
+            <Text>
+              current item: {item.workName}
+            </Text>
+          </VStack>
+        )}
 
         <Divider my="2" />
       </Center>

src/stores/actions/itemThunks.ts

@@ -11 +11 @@
 
             console.log("¨GET item/getItem/" + itemId);
 
-            const response = await getItemRequest(itemId)
+            const response = await getItemRequest(itemId);
 
 
             // data with image
@@ -57 +57 @@
                     inventoryItem: response.data.text,
                     searchSubjects: response.data.search_subject,
                 }
-            } {
+            }
+            else {
                 return Promise.reject(response.data ? response.data : "Error")
             }
         } catch (err: any) {
@@ -107 +108 @@
     "item/getItemNotes",
     async (itemId: string) => {
         try {
-            const response = await getItemNotesRequest(itemId)
-            console.log(response)
+            console.log("¨GET notes/getNotes/" + itemId);
+
+            const response = await getItemNotesRequest(itemId);
+
             if (response.status === 200) {
-                return {
-                    // TODO set item notes
+                if(response.data.length > 0){
+
+                    let notes = [];
+                    for(let i = 0; i < response.data.length; i++){
+                        let note = response.data[i];
+                        notes.push({
+                            username: (note as any).created_by,
+                            userId: (note as any).created_by_id,
+                            avatarUrl: (note as any).avatar,
+                            items: (note as any).items,
+                            createdTime: (note as any).created, 
+                            updatedTime: (note as any).updated,
+                            noteColor: (note as any).note_color,
+                        })
+                    }
+                    
+                    return {
+                        notes,
+                    }
+                }
+                else{
+                    // no notes for this item
+                    return {
+                        notes: [],
+                    }
                 }
-            } else {
+            }
+            else {
                 return Promise.reject(response.data ? response.data : "Error")
             }
         } catch (err: any) {

src/stores/reducers/itemSlice.ts

@@ -59 +59 @@
                 state.item.provenance = undefined;
                 state.item.description = undefined;
             }
-
-            // // set concordances from item, if selected concordance is 0
-            // if (state.selectedConcordance === 0) {
-            //     state.concordances = action.payload.concordances;
-            // }
         })
         builder.addCase(getItem.rejected, (state, action) => {
             state.lastError = action.error.message
         })
 
+        // getItemNotes
+        builder.addCase(getItemNotes.fulfilled, (state, action) => {
+            state.notes = action.payload.notes;
+        })
+        builder.addCase(getItemNotes.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
     }
 })
 

src/types/note.ts

@@ -6 +6 @@
     createdTime: Date 
     updatedTime: Date
     noteColor: string
-    lastError?: string
 }