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

import {
    VStack,
    Box,
    Text,
    HStack,
    ScrollView,
    Flex,
    Button,
    CloseIcon,
    IconButton,
    TextArea,
    useToast,
    KeyboardAvoidingView
} 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, RootState } from "../../stores/store";
import { useDispatch, useSelector } from "react-redux";
import { InfoToast } from "../toast/InfoToast";
import { UserRole } from "../../stores/reducers/userSlice";
import {FlatList, Platform} from "react-native"



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

    // const userRole = useSelector((state: RootState) => state.user.role)
    const userId = useSelector((state: RootState) => state.user.userId)
    const userRole = useSelector((state: RootState) => state.user.role)

    console.log(userRole)

    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 flex={1} mx={3} >
                {/* Notes */}
                <FlatList data={notes}
                          style={{ flex: 1 }}
                          renderItem={note => (<NoteView higlighted={replyingTo?.messageId == note.item.uuid} key={note.index} note={note.item}
                                                                        handleReply={
                                                                            handleReply
                                                                        }

                                                                        handleDelete={
                                                                            (note.item.username == userId || userRole == UserRole.Admin) ?
                                                                                handleDelete
                                                                                :
                                                                                undefined
                                                                        }

                                                                        handleEdit={
                                                                            (note.item.username == userId || userRole == UserRole.Admin) ?
                                                                                handleEdit
                                                                                :
                                                                                undefined
                                                                        }
                                                                        setConfirmDialog={setConfirmDialog} navigation={props.navigation} />)}
                />

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

                <VStack  >

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


                    {/* Add comment */}

                    <HStack  marginLeft={1.5} marginRight={1.5}>
                        <TextArea
                            flex={1}
                            placeholder={userRole == UserRole.Unauthorized || userRole == UserRole.User ? "Unathorized to add comment" : "Add comment"}
                            isDisabled={userRole == UserRole.Unauthorized || userRole == UserRole.User}
                            fontSize={14}
                            value={newComment}
                            onChangeText={setNewComment}
                            autoCompleteType={undefined}
                        />

                        <Button size={"md"} disabled={userRole == UserRole.Unauthorized || userRole == UserRole.User} onPress={() => props.handleCreateComment(newComment, replyingTo)} startIcon={<MessageIcon color="#FFF" />} />

                    </HStack>
                </VStack>

            }
            <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
        </VStack >
    );
}

export default NotesListView