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 |
bc25708c
|
Fantič
|
const [renderedNotes, setRenderedNotes] = useState(6);
|
19 |
|
|
|
20 |
2135f53d
|
Fantič
|
const cancelRef = React.useRef(null);
|
21 |
|
|
|
22 |
|
|
const dispatch = useDispatch<AppDispatch>();
|
23 |
|
|
|
24 |
b5ac7218
|
Fantič
|
const windowHeight = Dimensions.get('window').height;
|
25 |
|
|
|
26 |
2135f53d
|
Fantič
|
const [confirmDialog, setConfirmDialog] = React.useState<{
|
27 |
|
|
headerText?: string;
|
28 |
|
|
bodyText?: string;
|
29 |
|
|
confirmText?: string;
|
30 |
|
|
confirmColor?: string;
|
31 |
|
|
cancelRef?: any;
|
32 |
|
|
onClose?: () => void;
|
33 |
|
|
onSubmit?: () => void;
|
34 |
|
|
} | null>(null);
|
35 |
|
|
|
36 |
56626a63
|
Fantič
|
const handleReply = useCallback((messageId: string, userName: string) => {
|
37 |
|
|
setReplyingTo({ messageId, userName });
|
38 |
|
|
}, [setReplyingTo]);
|
39 |
b5ac7218
|
Fantič
|
|
40 |
56626a63
|
Fantič
|
const handleEdit = useCallback((note: Note) => {
|
41 |
|
|
if (!props.requestPending) {
|
42 |
2135f53d
|
Fantič
|
dispatch(updateNote(note));
|
43 |
56626a63
|
Fantič
|
}
|
44 |
|
|
}, [dispatch, props.requestPending]);
|
45 |
b5ac7218
|
Fantič
|
|
46 |
56626a63
|
Fantič
|
const handleDelete = useCallback((messageId: string) => {
|
47 |
|
|
if (!props.requestPending) {
|
48 |
|
|
dispatch(deleteNote({ noteId: messageId }));
|
49 |
|
|
}
|
50 |
|
|
}, [dispatch, props.requestPending]);
|
51 |
2135f53d
|
Fantič
|
|
52 |
bc25708c
|
Fantič
|
const handleScrollEnd = (event : any) => {
|
53 |
|
|
const offsetY = event.nativeEvent.contentOffset.y;
|
54 |
|
|
const contentHeight = event.nativeEvent.contentSize.height;
|
55 |
|
|
const screenHeight = event.nativeEvent.layoutMeasurement.height;
|
56 |
|
|
|
57 |
|
|
if (offsetY + screenHeight >= contentHeight - 20) {
|
58 |
|
|
// Load more notes when the user is near the end of the list
|
59 |
|
|
const nextBatchSize = 5; // Number of notes to render in the next batch
|
60 |
|
|
|
61 |
|
|
if((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length){
|
62 |
|
|
setRenderedNotes(notes.length);
|
63 |
|
|
// TODO toast display info all rendered
|
64 |
|
|
}
|
65 |
|
|
else{
|
66 |
|
|
setRenderedNotes(renderedNotes + nextBatchSize);
|
67 |
|
|
// TODO toast display loading more notes
|
68 |
|
|
}
|
69 |
|
|
}
|
70 |
|
|
};
|
71 |
|
|
|
72 |
|
|
console.log(renderedNotes)
|
73 |
|
|
console.log(notes.length)
|
74 |
|
|
|
75 |
cb25df10
|
Fantič
|
return (
|
76 |
2135f53d
|
Fantič
|
<VStack>
|
77 |
b5ac7218
|
Fantič
|
<Box height={windowHeight - 70 - 160 - (replyingTo ? 40 : 0)} marginBottom={2}>
|
78 |
|
|
{/* Notes */}
|
79 |
bc25708c
|
Fantič
|
<ScrollView contentContainerStyle={{ flexGrow: 1 }} onScrollEndDrag={handleScrollEnd}>
|
80 |
2135f53d
|
Fantič
|
{
|
81 |
|
|
notes && notes.length > 0 ? (
|
82 |
|
|
<VStack>
|
83 |
bc25708c
|
Fantič
|
{
|
84 |
|
|
notes.slice(0, renderedNotes).map((note, index) => (
|
85 |
b5ac7218
|
Fantič
|
<NoteView key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
|
86 |
bc25708c
|
Fantič
|
))
|
87 |
|
|
}
|
88 |
2135f53d
|
Fantič
|
</VStack>
|
89 |
|
|
) : (
|
90 |
|
|
<Text>There are no notes.</Text>
|
91 |
|
|
)
|
92 |
|
|
}
|
93 |
|
|
</ScrollView>
|
94 |
|
|
</Box>
|
95 |
|
|
|
96 |
b5ac7218
|
Fantič
|
{/* Create comment */}
|
97 |
cb25df10
|
Fantič
|
{
|
98 |
2135f53d
|
Fantič
|
props.handleCreateComment != null &&
|
99 |
b5ac7218
|
Fantič
|
<VStack>
|
100 |
|
|
|
101 |
|
|
{/* Replying to */}
|
102 |
|
|
{replyingTo != null &&
|
103 |
|
|
<Flex direction="row" alignItems="center" justify="flex-end" marginRight={20} height={10}>
|
104 |
|
|
<Text>Replying to {replyingTo.userName}</Text>
|
105 |
|
|
<IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
|
106 |
|
|
</IconButton>
|
107 |
|
|
</Flex>
|
108 |
|
|
}
|
109 |
bc25708c
|
Fantič
|
|
110 |
b5ac7218
|
Fantič
|
|
111 |
|
|
{/* Add comment */}
|
112 |
|
|
<HStack height={90} >
|
113 |
|
|
<TextArea
|
114 |
|
|
flex={1}
|
115 |
|
|
placeholder="Add comment"
|
116 |
|
|
fontSize={14}
|
117 |
|
|
value={newComment}
|
118 |
|
|
onChangeText={setNewComment}
|
119 |
|
|
autoCompleteType={undefined}
|
120 |
|
|
/>
|
121 |
|
|
<Flex marginLeft={2} marginBottom={8}>
|
122 |
|
|
<Button onPress={() => props.handleCreateComment(newComment, replyingTo)} startIcon={<MessageIcon color="#FFF" />}>
|
123 |
|
|
Send
|
124 |
|
|
</Button>
|
125 |
|
|
</Flex>
|
126 |
|
|
</HStack>
|
127 |
|
|
</VStack>
|
128 |
cb25df10
|
Fantič
|
}
|
129 |
2135f53d
|
Fantič
|
<ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
|
130 |
b5ac7218
|
Fantič
|
</VStack >
|
131 |
cb25df10
|
Fantič
|
);
|
132 |
|
|
}
|
133 |
|
|
|
134 |
|
|
export default NotesListView
|