Revize b225ffee

re #10569: NotesView: interface implementation

src/components/notes/NoteView.tsx

@@ -1 @@
-import { HStack, Box, Text } from "native-base";
+import { HStack, Box, Text, Image, VStack, Flex, Pressable, DeleteIcon, Button, Center, Avatar, TextArea, AlertDialog } 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 { ConfirmDialog } from "../general/Dialogs";
 
-const NoteView = (props: { note: Note }) => {
+const NoteView = (props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any }) => {
     const note = props.note;
+
+    const [isEdited, setIsEdited] = useState(false);
+
+    const [text, setText] = useState(note.note);
+
+    const getDateString = (date: Date): string => {
+        return date.toLocaleDateString("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 => {
+        const words = username.split(" ");
+        const initials = words.map(word => word.charAt(0).toUpperCase());
+        return initials.join("");
+    }
+
+    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.uuid, text);
+            // todo
+            setIsEdited(false);
+        }
+    }
+
     return (
-        <HStack>
-            <Box width="5%" />
-            <Box width="30%">
-                <Text bold>{note.username}</Text>
+        <HStack marginTop="5%">
+            <Box width="10" height="10" marginTop="2.5%">
+                <Avatar bg={note.noteColor} size="sm" source={{
+                    uri: AVATAR_URL + "/" + note.avatarUrl
+                }}>
+                    {getUsernameInitials(note.username)}
+                </Avatar>
             </Box>
+            <VStack width="97.5%">
+                <HStack>
+                    <Text bold width="60%">
+                        {note.username}
+                    </Text>
+                    <Flex direction="row" alignItems="center" justify="flex-end" >
+                        <Text italic color="light.500">
+                            {getDateString(note.createdTime)}
+                        </Text>
+                    </Flex>
+                </HStack>
+                <HStack>
+                    {isEdited ?
+                        <TextArea fontSize="14" width="72.5%" autoCompleteType={undefined} value={text} onChangeText={setText} />
+                        :
+                        <Text width="72.5%">
+                            {text}
+                        </Text>
+                    }
+
+                    {note.items && note.items.length > 0 &&
+                        <Flex marginLeft="1.5%" direction="column" alignItems="flex-start" justify="flex-start" >
+                            <Button width={"16"} variant="outline" size="sm">
+                                {note.items[0]}
+                            </Button>
+                        </Flex>
 
-            <Text>{note.note}</Text>
+                    }
+                </HStack>
+                <HStack>
+                    {/* () => props.handleEdit(note.uuid, text) */}
+                    {props.handleReply != null &&
+                        <Pressable onPress={() => props.handleReply(note.uuid, note.username)}>
+                            <Text color="light.500">Reply</Text>
+                        </Pressable>}
+                    <Flex width="82.5%" direction="row" alignItems="center" justify="flex-end" marginTop="0.5%">
+                        {props.handleEdit != null &&
+                            isEdited ?
+                            <>
+                                <Pressable onPress={saveEdit} marginRight="5%">
+                                    <Text color="light.500">Save</Text>
+                                </Pressable>
+                                <Pressable onPress={toggleEdited} marginRight="18.5%">
+                                    <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>
+            </VStack>
         </HStack>
     );
 }