aswi2023one-team-to-rule-them-all-gitlab/src/components/notes/NotesListView.tsx @ 51e53a71

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, { useCallback, 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[], 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 = useCallback((messageId: string, userName: string) => {
        setReplyingTo({ messageId, userName });
    }, [setReplyingTo]);
    
    const handleEdit = useCallback((note: Note) => {
        if (!props.requestPending) {
            dispatch(updateNote(note));
        }
    }, [dispatch, props.requestPending]);
    
    const handleDelete = useCallback((messageId: string) => {
        if (!props.requestPending) {
            dispatch(deleteNote({ noteId: messageId }));
        }
    }, [dispatch, props.requestPending]);

    return (
        <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>
            }

            {
                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>
                        <Box h={replyingTo != null ? "30%" : "45%"}></Box>
                        <Box marginLeft="2">
                            <Button onPress={() => props.handleCreateComment(newComment , replyingTo)} startIcon={<MessageIcon color="#FFF" />}></Button>
                        </Box>
                    </VStack>
                </HStack>
            }
            <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
        </VStack>
    );
}

export default NotesListView