1
|
import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea } from "native-base";
|
2
|
import { Note } from "../../types/note";
|
3
|
import NoteView from "./NoteView";
|
4
|
import { MessageIcon } from "../general/Icons";
|
5
|
import React, { useCallback, useState } from "react";
|
6
|
import { updateNote, deleteNote } from "../../stores/actions/notesThunks";
|
7
|
import { ConfirmDialog } from "../general/Dialogs";
|
8
|
import { AppDispatch } from "../../stores/store";
|
9
|
import { useDispatch } from "react-redux";
|
10
|
|
11
|
const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean }) => {
|
12
|
const notes = props.notes;
|
13
|
|
14
|
const [newComment, setNewComment] = useState<string>("");
|
15
|
const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
|
16
|
|
17
|
const cancelRef = React.useRef(null);
|
18
|
|
19
|
const dispatch = useDispatch<AppDispatch>();
|
20
|
|
21
|
const [confirmDialog, setConfirmDialog] = React.useState<{
|
22
|
headerText?: string;
|
23
|
bodyText?: string;
|
24
|
confirmText?: string;
|
25
|
confirmColor?: string;
|
26
|
cancelRef?: any;
|
27
|
onClose?: () => void;
|
28
|
onSubmit?: () => void;
|
29
|
} | null>(null);
|
30
|
|
31
|
const handleReply = useCallback((messageId: string, userName: string) => {
|
32
|
setReplyingTo({ messageId, userName });
|
33
|
}, [setReplyingTo]);
|
34
|
|
35
|
const handleEdit = useCallback((note: Note) => {
|
36
|
if (!props.requestPending) {
|
37
|
dispatch(updateNote(note));
|
38
|
}
|
39
|
}, [dispatch, props.requestPending]);
|
40
|
|
41
|
const handleDelete = useCallback((messageId: string) => {
|
42
|
if (!props.requestPending) {
|
43
|
dispatch(deleteNote({ noteId: messageId }));
|
44
|
}
|
45
|
}, [dispatch, props.requestPending]);
|
46
|
|
47
|
return (
|
48
|
<VStack>
|
49
|
<Box h={props.handleCreateComment == null ? "88%" : (replyingTo != null ? "65%" : "70%")}>
|
50
|
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
51
|
{
|
52
|
notes && notes.length > 0 ? (
|
53
|
<VStack>
|
54
|
{notes.map((note, index) => (
|
55
|
<NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
|
56
|
))}
|
57
|
</VStack>
|
58
|
) : (
|
59
|
<Text>There are no notes.</Text>
|
60
|
)
|
61
|
}
|
62
|
</ScrollView>
|
63
|
</Box>
|
64
|
{
|
65
|
props.handleCreateComment != null && replyingTo != null &&
|
66
|
<Flex direction="row" alignItems="center" justify="flex-end" h="5%" marginRight="10%">
|
67
|
<Text>Replying to {replyingTo.userName}</Text>
|
68
|
<IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
|
69
|
</IconButton>
|
70
|
</Flex>
|
71
|
}
|
72
|
|
73
|
{
|
74
|
props.handleCreateComment != null &&
|
75
|
<HStack h={replyingTo != null ? "20%" : "15%"} marginTop={replyingTo != null ? "0%" : "6%"}>
|
76
|
<TextArea placeholder="Add comment" width="90%" fontSize={14} value={newComment} onChangeText={setNewComment} autoCompleteType={undefined} ></TextArea>
|
77
|
<VStack>
|
78
|
<Box h={replyingTo != null ? "30%" : "45%"}></Box>
|
79
|
<Box marginLeft="2">
|
80
|
<Button onPress={() => props.handleCreateComment(newComment , replyingTo)} startIcon={<MessageIcon color="#FFF" />}></Button>
|
81
|
</Box>
|
82
|
</VStack>
|
83
|
</HStack>
|
84
|
}
|
85
|
<ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
|
86
|
</VStack>
|
87
|
);
|
88
|
}
|
89
|
|
90
|
export default NotesListView
|