commit d3c12593c0aaabd6806580e3eefeb2c2d9a11b89
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Thu May 25 16:08:06 2023 +0200

    re #10678 ItemViewUpdate: show related notes

diff --git a/src/api/notesservice.ts b/src/api/notesservice.ts
index a890e8a..e6627dc 100644
--- a/src/api/notesservice.ts
+++ b/src/api/notesservice.ts
@@ -1,11 +1,21 @@
 import { SortOptions } from "../types/general"
+import { Item } from "../types/item";
 import { Note } from "../types/note"
 import { axiosInstance } from "./api"
 
 
-export const getItemNotesRequest = async (itemId : string) => {
+export const getItemNotesRequest = async (item : Item, relatedComments : boolean) => {
+    
+    let url =  `/notes/?item_id[]=${item.id}`;
+
+    if(relatedComments && item.concordances && item.concordances.length > 0){
+        for(let i = 0; i < item.concordances.length; i++){
+            url += `&item_id[]=${item.concordances[i].id}` 
+        }
+    }
+    console.log(url);
     return await axiosInstance.get(
-        `/notes/?item_id[]=${itemId}`
+        url
     )
 }
 
diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index c2dc7ad..b740686 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -1,10 +1,15 @@
-import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading } from "native-base"
-import React from "react"
+import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex } from "native-base"
+import React, { useEffect, useState } from "react"
 import { Item } from "../../types/item"
 import { Note } from "../../types/note"
 import LoadingBox from "../loading/LoadingBox"
 import NotesListView from "../notes/NotesListView"
 import { IMAGE_URL } from "../../api/constants"
+import { log } from "../../logging/logger"
+import { getAllNotes } from "../../stores/actions/notesThunks"
+import { AppDispatch } from "../../stores/store"
+import { useDispatch } from "react-redux"
+import { getItemNotes } from "../../stores/actions/itemThunks"
 
 interface ItemDetailProps {
     item: Item,
@@ -14,101 +19,138 @@ interface ItemDetailProps {
     navigation: any
 }
 
-const ItemDetail = (props: { item: Item }) => {
+const ItemDetail = (props: { item: Item, itemLoading: boolean }) => {
     const item = props.item;
 
     return (<>
         {
-            item && (
-                <VStack>
-                    <HStack marginTop="5%">
-                        <VStack width="75%">
-                            <Text>
-                                {item.authorDisplayName ? item.authorDisplayName : item.authorName}
-                            </Text>
-                            <Heading size="sm">
-                                {item.workName}
-                            </Heading>
-
-                        </VStack>
-                        <Box width="25%">
-                            <Button variant="outline" size="md">
-                                {item.concordances[0].id}
-                            </Button>
-                        </Box>
-                    </HStack>
-                    <Card shadow="1" marginTop="5%">
-                        {item.inventoryItem &&
-                            <VStack>
-                                <Text italic>
-                                    <Text color="light.500">Inventory item: </Text>
-                                    {item.inventoryItem}
-                                </Text>
-                                <Text italic marginTop="2.5%">
-                                    {item.searchSubjects.map((subject, index) => (
-                                        index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
-                                    ))}
+
+            item && props.itemLoading ?
+                (<LoadingBox text="Item loading..." />)
+                :
+                (
+                    <VStack>
+                        <HStack marginTop="5%">
+                            <VStack width="75%">
+                                <Text>
+                                    {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                 </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 && (
-                        <Card shadow="1" marginTop="5%" marginBottom="5%">
-                            {item.authorName &&
-                                <HStack>
-                                    <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 color="light.500">Title: </Text>
-                                        {item.title}
-                                    </Text>
-                                </HStack>}
-                            {item.institution &&
-                                <HStack>
-                                    <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 color="light.500">Repository: </Text>
-                                        {item.repository}
-                                    </Text>
-                                </HStack>}
-                            {item.provenance &&
-                                <HStack>
-                                    <Text italic marginTop="2.5%">
-                                        <Text color="light.500">Provenance: </Text>
-                                        {item.provenance}
+                                <Heading size="sm">
+                                    {item.workName}
+                                </Heading>
+
+                            </VStack>
+                            <Box width="25%">
+                                <Button variant="outline" size="md">
+                                    {item.concordances[0].id}
+                                </Button>
+                            </Box>
+                        </HStack>
+                        <Card shadow="1" marginTop="5%">
+                            {item.inventoryItem &&
+                                <VStack>
+                                    <Text italic>
+                                        <Text color="light.500">Inventory item: </Text>
+                                        {item.inventoryItem}
                                     </Text>
-                                </HStack>}
-                            {item.description &&
-                                <HStack>
                                     <Text italic marginTop="2.5%">
-                                        <Text color="light.500">Description: </Text>
-                                        {item.description}
+                                        {item.searchSubjects.map((subject, index) => (
+                                            index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
+                                        ))}
                                     </Text>
-                                </HStack>}
-                        </Card>)}
-                </VStack>
-            )
+                                </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 && (
+                            <Card shadow="1" marginTop="5%" marginBottom="5%">
+                                {item.authorName &&
+                                    <HStack>
+                                        <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 color="light.500">Title: </Text>
+                                            {item.title}
+                                        </Text>
+                                    </HStack>}
+                                {item.institution &&
+                                    <HStack>
+                                        <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 color="light.500">Repository: </Text>
+                                            {item.repository}
+                                        </Text>
+                                    </HStack>}
+                                {item.provenance &&
+                                    <HStack>
+                                        <Text italic marginTop="2.5%">
+                                            <Text color="light.500">Provenance: </Text>
+                                            {item.provenance}
+                                        </Text>
+                                    </HStack>}
+                                {item.description &&
+                                    <HStack>
+                                        <Text italic marginTop="2.5%">
+                                            <Text color="light.500">Description: </Text>
+                                            {item.description}
+                                        </Text>
+                                    </HStack>}
+                            </Card>)}
+                    </VStack>
+                )
         }</>
     );
 }
 
 
 
+const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, navigation: any }) => {
+
+    const [showRelatedComments, setShowRelatedComments] = useState(true);
+
+    const dispatch = useDispatch<AppDispatch>();
+
+    const toggleRelatedComments = () => {
+        if (!props.notesLoading) {
+
+            let value = !showRelatedComments;
+
+            setShowRelatedComments(value);
+            dispatch(getItemNotes({ item: props.item, relatedComments: value }));
+        }
+    }
+
+    return (
+
+        props.notesLoading ?
+            (<LoadingBox text="Notes loading..." />)
+            :
+            (<VStack>
+                <Flex direction="row" alignItems="center" justify="flex-end">
+                    <Text fontSize={"12"}>Show related comments</Text>
+                    <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="md" />
+                </Flex>
+                <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")} setConfirmDialog={() => { }} navigation={props.navigation} />
+            </VStack>)
+    );
+}
+
+
+
 const ItemView = (props: ItemDetailProps) => {
 
     // item shown / note shown
@@ -129,15 +171,9 @@ const ItemView = (props: ItemDetailProps) => {
             <ScrollView flex="1">
                 <Box width="92%" marginLeft="5%">
                     {itemShown ? (
-                        itemLoading ?
-                            <LoadingBox text="Item loading" />
-                            :
-                            <ItemDetail item={props.item} />
+                        <ItemDetail itemLoading={itemLoading} item={props.item} />
                     ) : (
-                        notesLoading ?
-                            <LoadingBox text="Notes loading" />
-                            :
-                            <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")} setConfirmDialog={() => { }} navigation={navigation} />
+                        <ItemNotes item={props.item} notesLoading={props.notesLoading} notes={props.notes} navigation={props.navigation} />
                     )}
                 </Box>
             </ScrollView>
diff --git a/src/pages/ItemViewPage.tsx b/src/pages/ItemViewPage.tsx
index 8591b29..c5f2235 100644
--- a/src/pages/ItemViewPage.tsx
+++ b/src/pages/ItemViewPage.tsx
@@ -71,7 +71,7 @@ const ItemViewPage = ({route, navigation}: DrawerScreenProps<RootDrawerParamList
       }
       // set item notes if item is loaded
       if (item && item.id) {
-        dispatch(getItemNotes(item.id));
+        dispatch(getItemNotes({item: item, relatedComments: true}));
       }
     }
   }, [item]);
diff --git a/src/pages/NotesViewPage.tsx b/src/pages/NotesViewPage.tsx
index e336ed3..56308e6 100644
--- a/src/pages/NotesViewPage.tsx
+++ b/src/pages/NotesViewPage.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
-import { RootDrawerParamList } from "../components/Navigation"
 import { Box, Button, ChevronDownIcon, ChevronUpIcon, CloseIcon, Flex, HStack, Icon, IconButton, MinusIcon, Popover, Pressable, ScrollView, Switch, Text, TextArea, VStack } from "native-base"
 import { SortOptions } from "../types/general"
 import { Note } from "../types/note"
@@ -14,6 +13,7 @@ import { AppDispatch, RootState } from "../stores/store"
 import LoadingBox from "../components/loading/LoadingBox"
 import { createNote, deleteNote, getAllNotes, updateNote } from "../stores/actions/notesThunks"
 import { login } from "../stores/actions/userThunks"
+import { RootDrawerParamList } from "./Navigation"
 const NotesViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
 
   const { notes, notesLoading, requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)
diff --git a/src/stores/actions/itemThunks.ts b/src/stores/actions/itemThunks.ts
index 6e281fe..35043a6 100644
--- a/src/stores/actions/itemThunks.ts
+++ b/src/stores/actions/itemThunks.ts
@@ -1,7 +1,7 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
 import { getItemRequest } from "../../api/itemservice"
 import { getItemNotesRequest } from "../../api/notesservice"
-import { Certainty, Concordance } from "../../types/item";
+import { Certainty, Concordance, Item } from "../../types/item";
 
 
 export const getItem = createAsyncThunk(
@@ -104,11 +104,11 @@ export const getItem = createAsyncThunk(
 
 export const getItemNotes = createAsyncThunk(
     "item/getItemNotes",
-    async (itemId: string) => {
+    async ({item, relatedComments}: {item: Item, relatedComments: boolean}) => {
         try {
-            console.log("GET notes/getNotes/" + itemId);
+            console.log("GET notes/getNotes/" + item.id);
 
-            const response = await getItemNotesRequest(itemId);
+            const response = await getItemNotesRequest(item, relatedComments);
 
             if (response.status === 200) {
                 if(response.data.length > 0){
