Revize 56626a63

#re 10797 NotesListView set replying optimize

src/components/item/ItemView.tsx

@@ -1 +1 @@
 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 React, { useCallback, useEffect, useState } from "react"
 import { Item } from "../../types/item"
 import { Note } from "../../types/note"
 import LoadingBox from "../loading/LoadingBox"
@@ -145 +145 @@
         }
     }
 
-    const handleCreateItemComment = (newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
-        if (!requestPending) {
-            // creating new comment
-            if (replyingTo != null) {
-                dispatch(createNote({
-                    newNote: { note: newComment, reply_to: replyingTo.messageId } as Note
-                }))
+    const handleCreateItemComment = useCallback(
+        (newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
+            if (!requestPending) {
+                // creating new comment
+                if (replyingTo != null) {
+                    dispatch(createNote({ newNote: { note: newComment, reply_to: replyingTo.messageId } as Note }));
+                } else {
+                    dispatch(createNote({ newNote: { note: newComment, items: props.item.id } as any }));
+                }
             }
-            else {
-                dispatch(createNote({
-                    newNote: { note: newComment, items: props.item.id } as any
-                }))
-            }
-        }
-    }
+        },
+        [props.item.id]
+    );
 
     return (
 

src/components/notes/NoteView.tsx

@@ -4 +4 @@
 import { AVATAR_URL } from "../../api/constants";
 import { useState } from "react";
 import React from "react";
-import { ConfirmDialog } from "../general/Dialogs";
 
-const NoteView = (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 }) => {
     const note = props.note;
 
     const [isEdited, setIsEdited] = useState(false);
 
     const [text, setText] = useState(note.note);
 
+    console.log("rerender");
+
     const getDateString = (timestamp: Date): string => {
         return new Date(timestamp).toLocaleString("en-US",
             { year: "numeric", month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false }
@@ -142 +143 @@
             </VStack>
         </HStack>
     );
-}
+})
 
 export default NoteView
 

src/components/notes/NotesListView.tsx

@@ -2 +2 @@
 import { Note } from "../../types/note";
 import NoteView from "./NoteView";
 import { MessageIcon } from "../general/Icons";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { updateNote, deleteNote } from "../../stores/actions/notesThunks";
 import { ConfirmDialog } from "../general/Dialogs";
 import { AppDispatch } from "../../stores/store";
@@ -28 +28 @@
         onSubmit?: () => void;
     } | null>(null);
 
-    const handleReply = (messageId: string, userName: string) => {
-        setReplyingTo({ messageId, userName })
-    }
-
-    const handleEdit = (note: Note) => {
-        if (!props.requestPending)
+    const handleReply = useCallback((messageId: string, userName: string) => {
+        setReplyingTo({ messageId, userName });
+    }, [setReplyingTo]);
+    
+    const handleEdit = useCallback((note: Note) => {
+        if (!props.requestPending) {
             dispatch(updateNote(note));
-    }
-
-    const handleDelete = (messageId: string) => {
-        if (!props.requestPending)
-            dispatch(deleteNote({ noteId: messageId }))
-    }
+        }
+    }, [dispatch, props.requestPending]);
+    
+    const handleDelete = useCallback((messageId: string) => {
+        if (!props.requestPending) {
+            dispatch(deleteNote({ noteId: messageId }));
+        }
+    }, [dispatch, props.requestPending]);
 
     return (
         <VStack>

src/stores/actions/itemThunks.ts

@@ -123 +123 @@
                             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, 
                             updatedTime: (note as any).updated,
                             noteColor: (note as any).note_color,

src/stores/actions/notesThunks.ts

@@ -93 +93 @@
                             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,
                             updatedTime: (note as any).updated,
                             noteColor: (note as any).note_color,

src/types/note.ts

@@ -5 +5 @@
     note: string // text
     avatarUrl: string
     items: string[]
+    replies?: Note[]
     createdTime: Date 
     updatedTime: Date
     noteColor: string
-    reply_to: string // parent id
+    reply_to?: string // parent id
 }