Revize a27b3427

#re 10797 NoteView: Note replies base

src/components/notes/NoteView.tsx

@@ -1 @@
-import { HStack, Box, Text, Image, VStack, Flex, Pressable, DeleteIcon, Button, Center, Avatar, TextArea, AlertDialog } from "native-base";
+import { HStack, Box, Text, Image, VStack, Flex, Pressable, DeleteIcon, Button, Center, Avatar, TextArea, AlertDialog, ScrollView } from "native-base";
 import { Note } from "../../types/note";
 import { EditIcon } from "../general/Icons";
 import { AVATAR_URL } from "../../api/constants";
 import { useState } from "react";
 import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import NotesListView from "./NotesListView";
 
-const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any }) => {
+const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any, parentId?: string }) => {
     const note = props.note;
 
     const [isEdited, setIsEdited] = useState(false);
 
+    const [showReplies, setShowReplies] = useState(false);
+
     const [text, setText] = useState(note.note);
 
-    console.log("rerender");
 
     const getDateString = (timestamp: Date): string => {
         return new Date(timestamp).toLocaleString("en-US",
@@ -30 +31 @@
         return "UK"; // Unknown
     }
 
+
+    const toggleShowReplies = () => {
+        console.log("Toggle showReplies");
+        setShowReplies(!showReplies)
+    }
+
     const toggleEdited = () => {
         console.log("Toggle edit");
         if (isEdited) {
@@ -127 +134 @@
                             <Pressable onPress={() => props.handleReply(note.uuid, note.username)}>
                                 <Text color="light.500">Reply</Text>
                             </Pressable>}
+                        {!props.parentId && note.replies && note.replies.length > 0 &&
+                            <Pressable marginLeft={3} onPress={() => toggleShowReplies()}>
+                                {!showReplies ?
+                                    <Text color="light.500">{note.replies.length} replies</Text>
+                                    :
+                                    <Text color="light.500">Hide</Text>
+                                }
+
+                            </Pressable>}
                     </Flex>
 
                     <Flex direction="row" alignItems="center" justify="flex-end">
@@ -150 +166 @@
                             </Pressable>}
                     </Flex>
                 </HStack>
+                {showReplies &&
+                    <VStack style={{borderLeftColor: '#FFC107', borderLeftWidth: 1, paddingLeft: 5, marginTop: 5}}>
+                        {note.replies?.map((note, index) => {
+                            return (
+                                <NoteView key={index} note={note} handleReply={null} handleDelete={props.handleDelete} handleEdit={props.handleEdit} setConfirmDialog={props.setConfirmDialog} navigation={props.navigation} />
+                            )
+                        })}
+                    </VStack>
+                }
             </VStack>
         </HStack>
     );

src/components/notes/NotesListView.tsx

@@ -56 +56 @@
                         notes && notes.length > 0 ? (
                             <VStack>
                                 {notes.map((note, index) => {
-                                    if(index >= 5){
-                                        return null;
-                                    }
+                                    // if(index >= 5){
+                                    //     return null;
+                                    // }
                                     return (
                                         <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
                                     )

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(
@@ -11 +12 @@
             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;
@@ -26 +27 @@
                 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 ?
-                         [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}].concat(response.data.concordances)
-                         :
-                         [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}],
+                        [{ 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,
@@ -53 +54 @@
                     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}],
+                        [{ 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,
@@ -67 +68 @@
                 return Promise.reject(response.data ? response.data : "Error")
             }
         } catch (err: any) {
-            
+
             console.log(err);
             return Promise.reject(err.response.data)
         }
     }
 )
 
-  export const setConcordances = (concordances: Concordance[]) => {
+export const setConcordances = (concordances: Concordance[]) => {
     return {
-      type: "item/setConcordances",
-      payload: {
-        concordances,
-      },
+        type: "item/setConcordances",
+        payload: {
+            concordances,
+        },
     };
-  };
+};
 
 // export const getItemConcordances = createAsyncThunk(
 //     "item/getItemConcordances",
@@ -104 +105 @@
 
 export const getItemNotes = createAsyncThunk(
     "item/getItemNotes",
-    async ({item, relatedComments}: {item: Item, relatedComments: boolean}) => {
+    async ({ item, relatedComments }: { item: Item, relatedComments: boolean }) => {
         try {
             console.log("GET notes/getNotes/" + item.id);
 
             const response = await getItemNotesRequest(item, relatedComments);
 
             if (response.status === 200) {
-                if(response.data.length > 0){
+                if (response.data.length > 0) {
 
                     let notes = [];
-                    for(let i = 0; i < response.data.length; i++){
+                    for (let i = 0; i < response.data.length; i++) {
                         let note = response.data[i];
+                        let replies : any = undefined
+
+                        // convert replies
+                        if(note.replies){
+                            replies = [];
+                            for(let i = 0; i < note.replies.length; i++){
+                                const reply = note.replies[i];
+                                replies.push({
+                                    uuid: (reply as any).uuid,
+                                    username: (reply as any).created_by,
+                                    userId: (reply as any).created_by_id,
+                                    note: (reply as any).note,
+                                    avatarUrl: (reply as any).avatar,
+                                    items: (reply as any).items,
+                                    createdTime: (reply as any).created,
+                                    updatedTime: (reply as any).updated,
+                                    noteColor: (reply as any).note_color,
+                                    reply_to: note.uuid
+                                })
+                            }
+                        }
+
                         notes.push({
                             uuid: (note as any).uuid,
                             username: (note as any).created_by,
@@ -123 +146 @@
                             note: (note as any).note,
                             avatarUrl: (note as any).avatar,
                             items: (note as any).items,
-                            replies: (note as any).replies ?? undefined,
-                            createdTime: (note as any).created, 
+                            replies: replies,
+                            createdTime: (note as any).created,
                             updatedTime: (note as any).updated,
                             noteColor: (note as any).note_color,
                             reply_to: (note as any).reply_to
@@ -135 +158 @@
                         notes,
                     }
                 }
-                else{
+                else {
                     // no notes for this item
                     return {
                         notes: [],

src/stores/actions/notesThunks.ts

@@ -86 +86 @@
                     let notes = [];
                     for (let i = 0; i < response.data.length; i++) {
                         let note = response.data[i];
+                        let replies : any = undefined
+
+                        // convert replies
+                        if(note.replies){
+                            replies = [];
+                            for(let i = 0; i < note.replies.length; i++){
+                                const reply = note.replies[i];
+                                replies.push({
+                                    uuid: (reply as any).uuid,
+                                    username: (reply as any).created_by,
+                                    userId: (reply as any).created_by_id,
+                                    note: (reply as any).note,
+                                    avatarUrl: (reply as any).avatar,
+                                    items: (reply as any).items,
+                                    createdTime: (reply as any).created,
+                                    updatedTime: (reply as any).updated,
+                                    noteColor: (reply as any).note_color,
+                                    reply_to: note.uuid
+                                })
+                            }
+                        }
+
                         notes.push({
                             uuid: (note as any).uuid,
                             username: (note as any).created_by,
@@ -93 +115 @@
                             note: (note as any).note,
                             avatarUrl: (note as any).avatar,
                             items: (note as any).items,
-                            replies: (note as any).replies ?? undefined,
+                            replies: replies,
                             createdTime: (note as any).created,
                             updatedTime: (note as any).updated,
                             noteColor: (note as any).note_color,