1 |
2135f53d
|
Fantič
|
import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea } from "native-base";
|
2 |
cb25df10
|
Fantič
|
import { Note } from "../../types/note";
|
3 |
|
|
import NoteView from "./NoteView";
|
4 |
2135f53d
|
Fantič
|
import { MessageIcon } from "../general/Icons";
|
5 |
56626a63
|
Fantič
|
import React, { useCallback, useState } from "react";
|
6 |
2135f53d
|
Fantič
|
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 |
b5ac7218
|
Fantič
|
import { Dimensions } from "react-native";
|
11 |
cb25df10
|
Fantič
|
|
12 |
2135f53d
|
Fantič
|
const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean }) => {
|
13 |
cb25df10
|
Fantič
|
const notes = props.notes;
|
14 |
2135f53d
|
Fantič
|
|
15 |
|
|
const [newComment, setNewComment] = useState<string>("");
|
16 |
|
|
const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
|
17 |
|
|
|
18 |
|
|
const cancelRef = React.useRef(null);
|
19 |
|
|
|
20 |
|
|
const dispatch = useDispatch<AppDispatch>();
|
21 |
|
|
|
22 |
b5ac7218
|
Fantič
|
const windowHeight = Dimensions.get('window').height;
|
23 |
|
|
|
24 |
2135f53d
|
Fantič
|
const [confirmDialog, setConfirmDialog] = React.useState<{
|
25 |
|
|
headerText?: string;
|
26 |
|
|
bodyText?: string;
|
27 |
|
|
confirmText?: string;
|
28 |
|
|
confirmColor?: string;
|
29 |
|
|
cancelRef?: any;
|
30 |
|
|
onClose?: () => void;
|
31 |
|
|
onSubmit?: () => void;
|
32 |
|
|
} | null>(null);
|
33 |
|
|
|
34 |
56626a63
|
Fantič
|
const handleReply = useCallback((messageId: string, userName: string) => {
|
35 |
|
|
setReplyingTo({ messageId, userName });
|
36 |
|
|
}, [setReplyingTo]);
|
37 |
b5ac7218
|
Fantič
|
|
38 |
56626a63
|
Fantič
|
const handleEdit = useCallback((note: Note) => {
|
39 |
|
|
if (!props.requestPending) {
|
40 |
2135f53d
|
Fantič
|
dispatch(updateNote(note));
|
41 |
56626a63
|
Fantič
|
}
|
42 |
|
|
}, [dispatch, props.requestPending]);
|
43 |
b5ac7218
|
Fantič
|
|
44 |
56626a63
|
Fantič
|
const handleDelete = useCallback((messageId: string) => {
|
45 |
|
|
if (!props.requestPending) {
|
46 |
|
|
dispatch(deleteNote({ noteId: messageId }));
|
47 |
|
|
}
|
48 |
|
|
}, [dispatch, props.requestPending]);
|
49 |
2135f53d
|
Fantič
|
|
50 |
cb25df10
|
Fantič
|
return (
|
51 |
2135f53d
|
Fantič
|
<VStack>
|
52 |
b5ac7218
|
Fantič
|
<Box height={windowHeight - 70 - 160 - (replyingTo ? 40 : 0)} marginBottom={2}>
|
53 |
|
|
{/* Notes */}
|
54 |
2135f53d
|
Fantič
|
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
55 |
|
|
{
|
56 |
|
|
notes && notes.length > 0 ? (
|
57 |
|
|
<VStack>
|
58 |
b5ac7218
|
Fantič
|
{notes.map((note, index) => {
|
59 |
a27b3427
|
Fantič
|
// if(index >= 5){
|
60 |
|
|
// return null;
|
61 |
|
|
// }
|
62 |
b5ac7218
|
Fantič
|
return (
|
63 |
|
|
<NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
|
64 |
|
|
)
|
65 |
|
|
})}
|
66 |
2135f53d
|
Fantič
|
</VStack>
|
67 |
|
|
) : (
|
68 |
|
|
<Text>There are no notes.</Text>
|
69 |
|
|
)
|
70 |
|
|
}
|
71 |
|
|
</ScrollView>
|
72 |
|
|
</Box>
|
73 |
|
|
|
74 |
b5ac7218
|
Fantič
|
{/* Create comment */}
|
75 |
cb25df10
|
Fantič
|
{
|
76 |
2135f53d
|
Fantič
|
props.handleCreateComment != null &&
|
77 |
b5ac7218
|
Fantič
|
<VStack>
|
78 |
|
|
|
79 |
|
|
{/* Replying to */}
|
80 |
|
|
{replyingTo != null &&
|
81 |
|
|
<Flex direction="row" alignItems="center" justify="flex-end" marginRight={20} height={10}>
|
82 |
|
|
<Text>Replying to {replyingTo.userName}</Text>
|
83 |
|
|
<IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
|
84 |
|
|
</IconButton>
|
85 |
|
|
</Flex>
|
86 |
|
|
}
|
87 |
|
|
|
88 |
|
|
|
89 |
|
|
{/* Add comment */}
|
90 |
|
|
<HStack height={90} >
|
91 |
|
|
<TextArea
|
92 |
|
|
flex={1}
|
93 |
|
|
placeholder="Add comment"
|
94 |
|
|
fontSize={14}
|
95 |
|
|
value={newComment}
|
96 |
|
|
onChangeText={setNewComment}
|
97 |
|
|
autoCompleteType={undefined}
|
98 |
|
|
/>
|
99 |
|
|
<Flex marginLeft={2} marginBottom={8}>
|
100 |
|
|
<Button onPress={() => props.handleCreateComment(newComment, replyingTo)} startIcon={<MessageIcon color="#FFF" />}>
|
101 |
|
|
Send
|
102 |
|
|
</Button>
|
103 |
|
|
</Flex>
|
104 |
|
|
</HStack>
|
105 |
|
|
</VStack>
|
106 |
cb25df10
|
Fantič
|
}
|
107 |
2135f53d
|
Fantič
|
<ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
|
108 |
b5ac7218
|
Fantič
|
</VStack >
|
109 |
cb25df10
|
Fantič
|
);
|
110 |
|
|
}
|
111 |
|
|
|
112 |
|
|
export default NotesListView
|