Projekt

Obecné

Profil

Stáhnout (4.49 KB) Statistiky
| Větev: | Tag: | Revize:
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
                                    if(index >= 5){
60
                                        return null;
61
                                    }
62
                                    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