aswi2023one-team-to-rule-them-all-gitlab/src/components/notes/NoteView.tsx @ 8b1106f4

import { HStack, Box, Text, Image, VStack, Flex, Pressable, DeleteIcon, Button, Center, Avatar, TextArea, AlertDialog, ScrollView } from "native-base";
import { Note } from "../../types/note";
import { EditIcon } from "../general/Icons";
import { AVATAR_URL } from "../../api/constants";
import { useState } from "react";
import React from "react";
import NotesListView from "./NotesListView";

const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any, parentId?: string, higlighted?: boolean }) => {
    const note = props.note;

    const [isEdited, setIsEdited] = useState(false);

    const [showReplies, setShowReplies] = useState(false);

    const [text, setText] = useState(note.note);

    console.log("rerender");

    const getDateString = (timestamp: Date): string => {
        return new Date(timestamp).toLocaleString("en-US",
            { year: "numeric", month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false }
        ).replace(/,/g, "").replace(/ /g, "-").replace(/-(?!.*-)/, " ");
    }

    const getUsernameInitials = (username: string): string => {
        if (username) {
            const words = username.split(" ");
            const initials = words.map(word => word.charAt(0).toUpperCase());
            return initials.join("");
        }
        return "UK"; // Unknown
    }


    const toggleShowReplies = () => {
        console.log("Toggle showReplies");
        setShowReplies(!showReplies)
    }

    const toggleEdited = () => {
        console.log("Toggle edit");
        if (isEdited) {
            if (text == note.note) {
                setIsEdited(false);
            }
            else {
                // confirm dialog
                props.setConfirmDialog({
                    headerText: "Cancel Edit",
                    bodyText: "Are you sure you want to revert changes on this note?",
                    confirmText: "Revert Changes",
                    confirmColor: "danger",
                    onClose: () => { props.setConfirmDialog(null) },
                    onSubmit: () => { setText(note.note); setIsEdited(false); props.setConfirmDialog(null) }
                });
            }
        }
        else {
            setIsEdited(true);
        }
    }

    const deleteClicked = () => {
        props.setConfirmDialog({
            headerText: "Delete Note",
            bodyText: "Are you sure you want to delete selected note?",
            confirmText: "Delete",
            confirmColor: "danger",
            onClose: () => { props.setConfirmDialog(null) },
            onSubmit: () => { props.handleDelete(note.uuid); props.setConfirmDialog(null) }
        });
    }

    const saveEdit = () => {
        if (note.note == text) {
            setIsEdited(false);
        }
        else {
            props.handleEdit({ ...note, note: text });
            setIsEdited(false);
        }
    }

    return (
        <HStack style={props.higlighted && {backgroundColor: "#FFF8E1",borderBottomColor: '#FFD54F', borderBottomWidth: 1.5, paddingBottom: 10}} marginTop={5}>
            <Box width="10" height="10" marginTop="2">
                <Avatar bg={note.noteColor} size="sm" source={{
                    uri: AVATAR_URL + "/" + note.avatarUrl
                        // TODO bude zde nebo v atributu ta připona?
                        + ".png"
                }}>
                    {getUsernameInitials(note.username)}
                </Avatar>
            </Box>
            <VStack flex={1} marginLeft="0.5">

                {/* Top section */}
                <HStack justifyContent={"space-between"}>
                    <Text bold>
                        {note.username}
                    </Text>
                    <Flex direction="row" alignItems="center" justify="flex-end" >
                        <Text italic color="light.500">
                            {getDateString(note.createdTime)}
                        </Text>
                    </Flex>
                </HStack>

                {/* Middle section */}
                <HStack justifyContent={"space-between"} marginTop={2}>
                    {isEdited ?
                        <TextArea flex={1} fontSize="14" autoCompleteType={undefined} value={text} onChangeText={setText} />
                        :
                        <Text flex={1} >
                            {text}
                        </Text>
                    }

                    {note.items && note.items.length > 0 &&
                        <Flex marginLeft={1} flex={0}>
                            <Button p={1} variant="outline" size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
                                {note.items[0]}
                            </Button>
                        </Flex>

                    }
                </HStack>

                {/* Bottom section */}
                <HStack justifyContent={"space-between"} marginTop={2}>
                    {/* () => props.handleEdit(note.uuid, text) */}
                    <Flex direction="row" alignItems="center">
                        {props.handleReply != null &&
                            <Pressable onPress={() => props.handleReply(note.uuid, note.username)}>
                                <Text color="light.500">Reply</Text>
                            </Pressable>}
                        {!props.parentId && note.replies && note.replies.length > 0 &&
                            <Pressable marginLeft={3} onPress={() => toggleShowReplies()}>
                                {!showReplies ?
                                    <Text color="light.500">{note.replies.length} replies</Text>
                                    :
                                    <Text color="light.500">Hide</Text>
                                }

                            </Pressable>}
                    </Flex>

                    <Flex direction="row" alignItems="center" justify="flex-end">
                        {props.handleEdit != null &&
                            isEdited ?
                            <>
                                <Pressable onPress={saveEdit} marginRight={5}>
                                    <Text color="light.500">Save</Text>
                                </Pressable>
                                <Pressable onPress={toggleEdited} marginRight={6}>
                                    <Text color="light.500">Cancel</Text>
                                </Pressable>
                            </>
                            :
                            <Pressable onPress={toggleEdited} marginRight={5}>
                                <EditIcon color="light.500" />
                            </Pressable>}
                        {props.handleDelete != null &&
                            <Pressable onPress={deleteClicked}>
                                <DeleteIcon />
                            </Pressable>}
                    </Flex>
                </HStack>
                {showReplies &&
                    <VStack style={{borderLeftColor: '#FFC107', borderLeftWidth: 1, paddingLeft: 5, marginTop: 5}}>
                        {note.replies?.map((note, index) => {
                            return (
                                <NoteView key={index} note={note} handleReply={null} handleDelete={props.handleDelete} handleEdit={props.handleEdit} setConfirmDialog={props.setConfirmDialog} navigation={props.navigation} />
                            )
                        })}
                    </VStack>
                }
            </VStack>
        </HStack>
    );
})

export default NoteView