Revize a27b3427

#re 10797 NoteView: Note replies base

src/components/notes/NoteView.tsx

@@ -1 @@
-import { HStack, Box, Text, Image, VStack, Flex, Pressable, DeleteIcon, Button, Center, Avatar, TextArea, AlertDialog } from "native-base";
+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 { StyleProp, ViewStyle } from "react-native";
+import NotesListView from "./NotesListView";
 
-const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any }) => {
+const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any, parentId?: string }) => {
     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",
@@ -30 +31 @@
         return "UK"; // Unknown
     }
 
+
+    const toggleShowReplies = () => {
+        console.log("Toggle showReplies");
+        setShowReplies(!showReplies)
+    }
+
     const toggleEdited = () => {
         console.log("Toggle edit");
         if (isEdited) {
@@ -127 +134 @@
                             <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">
@@ -150 +166 @@
                             </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>
     );