Revize 2135f53d

re #10678: ItemNotes refactor NoteListView

src/components/notes/NotesListView.tsx

@@ -1 @@
-import { Center, VStack, Box, Text, HStack, ScrollView } from "native-base";
+import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea } from "native-base";
 import { Note } from "../../types/note";
 import NoteView from "./NoteView";
+import { MessageIcon } from "../general/Icons";
+import React, { useState } from "react";
+import { updateNote, deleteNote } from "../../stores/actions/notesThunks";
+import { ConfirmDialog } from "../general/Dialogs";
+import { AppDispatch } from "../../stores/store";
+import { useDispatch } from "react-redux";
 
-const NotesListView = (props: { notes: Note[], handleReply : any, handleDelete : any, handleEdit : any, setConfirmDialog: any, navigation: any}) => {
+const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean }) => {
     const notes = props.notes;
+
+    const [newComment, setNewComment] = useState<string>("");
+    const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
+
+    const cancelRef = React.useRef(null);
+
+    const dispatch = useDispatch<AppDispatch>();
+
+    const [confirmDialog, setConfirmDialog] = React.useState<{
+        headerText?: string;
+        bodyText?: string;
+        confirmText?: string;
+        confirmColor?: string;
+        cancelRef?: any;
+        onClose?: () => void;
+        onSubmit?: () => void;
+    } | null>(null);
+
+    const handleReply = (messageId: string, userName: string) => {
+        setReplyingTo({ messageId, userName })
+    }
+
+    const handleEdit = (note: Note) => {
+        if (!props.requestPending)
+            dispatch(updateNote(note));
+    }
+
+    const handleDelete = (messageId: string) => {
+        if (!props.requestPending)
+            dispatch(deleteNote({ noteId: messageId }))
+    }
+
     return (
-        <ScrollView>
+        <VStack>
+            <Box h={props.handleCreateComment == null ? "88%" : (replyingTo != null ? "65%" : "70%")}>
+                <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+                    {
+                        notes && notes.length > 0 ? (
+                            <VStack>
+                                {notes.map((note, index) => (
+                                    <NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
+                                ))}
+                            </VStack>
+                        ) : (
+                            <Text>There are no notes.</Text>
+                        )
+                    }
+                </ScrollView>
+            </Box>
+            {
+                props.handleCreateComment != null && replyingTo != null &&
+                <Flex direction="row" alignItems="center" justify="flex-end" h="5%" marginRight="10%">
+                    <Text>Replying to {replyingTo.userName}</Text>
+                    <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
+                    </IconButton>
+                </Flex>
+            }
+
             {
-                notes && notes.length > 0 ? (
+                props.handleCreateComment != null &&
+                <HStack h={replyingTo != null ? "20%" : "15%"} marginTop={replyingTo != null ? "0%" : "6%"}>
+                    <TextArea placeholder="Add comment" width="90%" fontSize={14} value={newComment} onChangeText={setNewComment} autoCompleteType={undefined} ></TextArea>
                     <VStack>
-                        {notes.map((note, index) => (
-                            <NoteView key={index} note={note} handleReply={props.handleReply} handleDelete={props.handleDelete} handleEdit={props.handleEdit} setConfirmDialog={props.setConfirmDialog} navigation={props.navigation}/>
-                        ))}
+                        <Box h={replyingTo != null ? "30%" : "45%"}></Box>
+                        <Box marginLeft="2">
+                            <Button onPress={() => props.handleCreateComment(newComment , replyingTo)} startIcon={<MessageIcon color="#FFF" />}></Button>
+                        </Box>
                     </VStack>
-                ) : (
-                    <Text>There are no notes.</Text>
-                )
+                </HStack>
             }
-        </ScrollView>
+            <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
+        </VStack>
     );
 }