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

import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea, useToast } 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";
import { InfoToast } from "../toast/InfoToast";



const NotesListView = (props: { notes: Note[], navigation: any, handleCreateComment: any, requestPending: boolean, height: number }) => {
    const notes = props.notes;

    const [newComment, setNewComment] = useState<string>("");
    const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);

    const toast = useToast();

    const [renderedNotes, setRenderedNotes] = useState(6);

    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]);



    const handleScrollEnd = (event: any) => {
        const offsetY = event.nativeEvent.contentOffset.y;
        const contentHeight = event.nativeEvent.contentSize.height;
        const screenHeight = event.nativeEvent.layoutMeasurement.height;

        if (offsetY + screenHeight >= contentHeight - 20) {
            // Load more notes when the user is near the end of the list
            const nextBatchSize = 5; // Number of notes to render in the next batch

            if ((renderedNotes + nextBatchSize) > notes.length && (renderedNotes + nextBatchSize) != notes.length) {
                toast.closeAll()
                toast.show({
                    render: ({
                        id
                    }) => {
                        return <InfoToast text={"All notes loaded..."} onClose={() => toast.close(id)} />;
                    },
                    duration: 3000
                });
                setRenderedNotes(notes.length);

            }
            else if ((renderedNotes + nextBatchSize) != notes.length) {
                toast.closeAll()
                toast.show({
                    render: ({
                        id
                    }) => {
                        return <InfoToast text={"Loading more notes..."} onClose={() => toast.close(id)} />;
                    },
                    duration: 3000
                });
                setRenderedNotes(renderedNotes + nextBatchSize);

            }
        }
    };

    return (
        <VStack>
            <Box height={props.height - (replyingTo ? 40 : 0) ?? undefined} marginBottom={2}>
                {/* Notes */}
                <ScrollView contentContainerStyle={{ flexGrow: 1 }} onScrollEndDrag={handleScrollEnd}>
                    {
                        notes && notes.length > 0 ? (
                            <VStack>
                                {
                                    notes.slice(0, renderedNotes).map((note, index) => {

                                        if (replyingTo?.messageId == note.uuid) {
                                            return <NoteView higlighted key={index} note={note} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} navigation={props.navigation} />
                                        }

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

            {/* Create comment */}
            {
                props.handleCreateComment != null &&
                <VStack>

                    {/* Replying to */}
                    {replyingTo != null &&
                        <Flex direction="row" alignItems="center" justify="flex-end" height={10} style={{ backgroundColor: "#FFF8E1" }}>
                            <Text>Replying to {replyingTo.userName}</Text>
                            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%" marginRight={20} />
                        </Flex>
                    }


                    {/* Add comment */}
                    <HStack height={90} >
                        <TextArea
                            flex={1}
                            placeholder="Add comment"
                            fontSize={14}
                            value={newComment}
                            onChangeText={setNewComment}
                            autoCompleteType={undefined}
                        />
                        <Flex marginLeft={2} marginBottom={8}>
                            <Button onPress={() => props.handleCreateComment(newComment, replyingTo)} startIcon={<MessageIcon color="#FFF" />}>
                                Send
                            </Button>
                        </Flex>
                    </HStack>
                </VStack>
            }
            <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
        </VStack >
    );
}

export default NotesListView