Revize b225ffee

re #10569: NotesView: interface implementation

src/api/constants.ts

@@ -1 @@
-export const BASE_URL = 'http://147.228.173.159/api'
+export const BASE_URL = 'http://147.228.173.159/api'
+
+export const AVATAR_URL = 'http://147.228.173.159/static/avatars'
+
+export const IMAGE_URL = 'http:147.228.173.159/static/images'

src/api/notesservice.ts

@@ -6 +6 @@
         `/api/notes/?item_id[]=${itemId}`
     )
 }
+

src/components/general/Dialogs.tsx

@@ +1 @@
+import { AlertDialog, Button } from "native-base";
+
+export const ConfirmDialog = (props: { isShown: boolean, headerText?: string, bodyText?: string, confirmText?: string, confirmColor?: string, cancelRef?: any, onClose?: any, onSubmit?: any }): JSX.Element => (
+    <>
+        {props.isShown &&
+            <AlertDialog leastDestructiveRef={props.cancelRef} isOpen={true} onClose={props.onClose}>
+                <AlertDialog.Content>
+                    <AlertDialog.CloseButton />
+                    <AlertDialog.Header>{props.headerText}</AlertDialog.Header>
+                    {props.bodyText &&
+                        <AlertDialog.Body>
+                            {props.bodyText}
+                        </AlertDialog.Body>
+                    }
+                    <AlertDialog.Footer>
+                        <Button.Group space={2}>
+                            <Button variant="unstyled" colorScheme="coolGray" onPress={props.onClose} ref={props.cancelRef}>
+                                Cancel
+                            </Button>
+                            <Button colorScheme={props.confirmColor} onPress={props.onSubmit}>
+                                {props.confirmText}
+                            </Button>
+                        </Button.Group>
+                    </AlertDialog.Footer>
+                </AlertDialog.Content>
+            </AlertDialog>}
+    </>
+
+)

src/components/general/Icons.tsx

@@ +1 @@
+import { Icon } from "native-base"
+import { G, Path } from "react-native-svg"
+
+export const MessageIcon = (props: { color: string }): JSX.Element => (
+    <Icon>
+        <G fill={props.color} stroke={props.color} strokeWidth={1}>
+            <Path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
+        </G>
+    </Icon>
+)
+
+export const EditIcon = (props: { color: string }): JSX.Element => (
+    <Icon>
+        <G fill={props.color} stroke={props.color} strokeWidth={1}>
+            <Path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+            <Path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
+        </G>
+    </Icon>
+)
+
+

src/components/item/ItemView.tsx

@@ -4 +4 @@
 import { Note } from "../../types/note"
 import LoadingBox from "../loading/LoadingBox"
 import NotesListView from "../notes/NotesListView"
+import { IMAGE_URL } from "../../api/constants"
 
 interface ItemDetailProps {
     item: Item,
@@ -54 +55 @@
                             {item.fullView && item.imageUrl && (
                                 <Center background="primary.100" marginTop="5%">
                                     <Text>Resembling object</Text>
-                                    <Image size={250} alt="image" source={{ uri: `http:147.228.173.159/static/images/${item.imageUrl}` }} />
+                                    <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }} />
                                 </Center>)}
                             {item.fullView && (
                                 <Card shadow="1" marginTop="5%" marginBottom="5%">
@@ -137 +138 @@
                 notesLoading ?
                     <LoadingBox text="Notes loading" />
                     :
-                    <NotesListView notes={props.notes} />
+                    <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")}/>
             )}
 
             {/* item notes switch tab */}

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

src/components/notes/NotesListView.tsx

@@ -1 @@
-import { Center, VStack, Box, Text, HStack } from "native-base";
+import { Center, VStack, Box, Text, HStack, ScrollView } from "native-base";
 import { Note } from "../../types/note";
 import NoteView from "./NoteView";
 
-const NotesListView = (props: { notes: Note[] }) => {
+const NotesListView = (props: { notes: Note[], handleReply : any, handleDelete : any, handleEdit : any, setConfirmDialog: any}) => {
     const notes = props.notes;
     return (
-        <VStack>
+        <ScrollView>
             {
                 notes && notes.length > 0 ? (
                     <VStack>
                         {notes.map((note, index) => (
-                            <NoteView key={index} note={note}/>
+                            <NoteView key={index} note={note} handleReply={props.handleReply} handleDelete={props.handleDelete} handleEdit={props.handleEdit} setConfirmDialog={props.setConfirmDialog}/>
                         ))}
                     </VStack>
                 ) : (
                     <Text>There are no notes.</Text>
                 )
             }
-        </VStack>
+        </ScrollView>
     );
 }
 

src/pages/NotesViewPage.tsx

@@ -2 +2 @@
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "../components/Navigation"
-import { Box, Button, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, FormControl, HStack, Heading, Input, MinusIcon, Popover, ScrollView, Switch, Text, VStack } from "native-base"
+import { Box, Button, ChevronDownIcon, ChevronUpIcon, CloseIcon, Flex, HStack, Icon, IconButton, MinusIcon, Popover, Pressable, ScrollView, Switch, Text, TextArea, VStack } from "native-base"
 import { SortOptions } from "../types/general"
-import { current } from "@reduxjs/toolkit"
-
+import { Note } from "../types/note"
+import NotesListView from "../components/notes/NotesListView"
+import { G, Path } from "react-native-svg"
+import { MessageIcon } from "../components/general/Icons"
+import { ConfirmDialog } from "../components/general/Dialogs"
 const NotesViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
 
   const [isSortOpen, setIsSortOpen] = useState(false);
@@ -13 +16 @@
   const [myCommentsCheck, setMyCommentsCheck] = useState(false);
   const [generalCommentsCheck, setGeneralCommentsCheck] = useState(true);
 
+  const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);
+
+  const cancelRef = React.useRef(null)
+
+  const notes = [
+    {
+      uuid: "fadfsfdsaf",
+      username: "Alice",
+      userId: "123",
+      note: "Buy milk and bread",
+      avatarUrl: "martin.png",
+      items: [],
+      createdTime: new Date("2022-01-01T10:00:00Z"),
+      updatedTime: new Date("2022-01-01T12:00:00Z"),
+      noteColor: "#FFA500",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Bob",
+      userId: "456",
+      note: "Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM ,Call Jane at 2 PM",
+      avatarUrl: "https://example.com/avatar2.jpg",
+      items: ["Jane"],
+      createdTime: new Date("2022-01-02T10:00:00Z"),
+      updatedTime: new Date("2022-01-02T14:00:00Z"),
+      noteColor: "#6495ED",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Charlie",
+      userId: "789",
+      note: "Pick up dry cleaning",
+      avatarUrl: "https://example.com/avatar3.jpg",
+      items: ["dry cleaning"],
+      createdTime: new Date("2022-01-03T10:00:00Z"),
+      updatedTime: new Date("2022-01-03T12:30:00Z"),
+      noteColor: "#FFA07A",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Dave",
+      userId: "012",
+      note: "Finish report by Friday",
+      avatarUrl: "https://example.com/avatar4.jpg",
+      items: ["report"],
+      createdTime: new Date("2022-01-04T10:00:00Z"),
+      updatedTime: new Date("2022-01-04T16:00:00Z"),
+      noteColor: "#7B68EE",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Eve",
+      userId: "345",
+      note: "Buy flowers for mom's birthday",
+      avatarUrl: "https://example.com/avatar5.jpg",
+      items: ["flowers"],
+      createdTime: new Date("2022-01-05T10:00:00Z"),
+      updatedTime: new Date("2022-01-05T18:00:00Z"),
+      noteColor: "#F08080",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Frank",
+      userId: "678",
+      note: "Schedule dentist appointment",
+      avatarUrl: "https://example.com/avatar6.jpg",
+      items: ["dentist appointment"],
+      createdTime: new Date("2022-01-06T10:00:00Z"),
+      updatedTime: new Date("2022-01-06T11:00:00Z"),
+      noteColor: "#98FB98",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Grace",
+      userId: "901",
+      note: "Book hotel for vacation",
+      avatarUrl: "https://example.com/avatar7.jpg",
+      items: ["hotel"],
+      createdTime: new Date("2022-01-07T10:00:00Z"),
+      updatedTime: new Date("2022-01-07T15:00:00Z"),
+      noteColor: "#87CEFA",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Alice",
+      userId: "123",
+      note: "Buy milk and bread",
+      avatarUrl: "https://example.com/avatar1.jpg",
+      items: ["milk", "bread"],
+      createdTime: new Date("2022-01-01T10:00:00Z"),
+      updatedTime: new Date("2022-01-01T12:00:00Z"),
+      noteColor: "#FFA500",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Bob",
+      userId: "456",
+      note: "Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM ,Call Jane at 2 PM",
+      avatarUrl: "https://example.com/avatar2.jpg",
+      items: ["Jane"],
+      createdTime: new Date("2022-01-02T10:00:00Z"),
+      updatedTime: new Date("2022-01-02T14:00:00Z"),
+      noteColor: "#6495ED",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Charlie",
+      userId: "789",
+      note: "Pick up dry cleaning",
+      avatarUrl: "https://example.com/avatar3.jpg",
+      items: ["dry cleaning"],
+      createdTime: new Date("2022-01-03T10:00:00Z"),
+      updatedTime: new Date("2022-01-03T12:30:00Z"),
+      noteColor: "#FFA07A",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Dave",
+      userId: "012",
+      note: "Finish report by Friday",
+      avatarUrl: "https://example.com/avatar4.jpg",
+      items: ["report"],
+      createdTime: new Date("2022-01-04T10:00:00Z"),
+      updatedTime: new Date("2022-01-04T16:00:00Z"),
+      noteColor: "#7B68EE",
+    },
+    {
+      uuid: "fadfsfdsaf",
+      username: "Eve",
+      userId: "345",
+      note: "Buy flowers for mom's birthday",
+      avatarUrl: "https://example.com/avatar5.jpg",
+      items: ["flowers"],
+      createdTime: new Date("2022-01-05T10:00:00Z"),
+      updatedTime: new Date("2022-01-05T18:00:00Z"),
+      noteColor: "#F08080",
+    }];
+
+  const [confirmDialog, setConfirmDialog] = React.useState<{
+    headerText?: string;
+    bodyText?: string;
+    confirmText?: string;
+    confirmColor?: string;
+    cancelRef?: any;
+    onClose?: () => void;
+    onSubmit?: () => void;
+  } | null>(null);
 
   const [sortSettings, setSortSettings] = useState({
     items: SortOptions.None,
@@ -56 +206 @@
     console.log("Get NOTES");
   }
 
-  return (
-    <ScrollView flex="1">
-      <Box width="90%" marginLeft="5%">
-        <VStack>
-          <HStack marginTop="5%">
+  const handleReply = (messageId: string, userName: string) => {
+    console.log("Handling reply: " + messageId);
+    setReplyingTo({ messageId, userName })
+  }
 
-            <Box width="30%">
-              <Popover // @ts-ignore
-                trigger={triggerProps => {
-                  return <Button colorScheme="primary" {...triggerProps} onPress={() => setIsSortOpen(true)}>
-                    Sort Options
-                  </Button>;
-                }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
-                <Popover.Content w="48">
-                  <Popover.Arrow />
-                  <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
-                  <Popover.Header>Sort Options</Popover.Header>
-                  <Popover.Body>
-                    <VStack>
-                      <Button size="md" variant="outline" onPress={() => handleSortChanged("items")}
-                        rightIcon={getSortIcon(sortSettings.items, "sm")}
-                      >
-                        Items</Button>
-                      <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date")}
-                        rightIcon={getSortIcon(sortSettings.date, "sm")}>
-                        Date</Button>
-                    </VStack>
-                  </Popover.Body>
-                  <Popover.Footer justifyContent="flex-end">
-                    <Button.Group space={2}>
-                      <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
-                        Cancel
-                      </Button>
-                      <Button colorScheme="success" onPress={() => { setIsSortOpen(false); getNotes() }}>
-                        Save
-                      </Button>
-                    </Button.Group>
-                  </Popover.Footer>
-                </Popover.Content>
-              </Popover>
-            </Box>
-            <VStack width="20%">
-              <HStack >
-                <Text>My comments</Text>
-                <Switch isChecked={myCommentsCheck} onValueChange={setMyCommentsCheck} size="md" />
-              </HStack>
-              <HStack >
-                <Text>General comments</Text>
-                <Switch isChecked={generalCommentsCheck} onValueChange={setGeneralCommentsCheck} size="md" />
-              </HStack>
-            </VStack>
-          </HStack>
+  const handleEdit = (messageId: string, newMessage: string) => {
+    console.log("Handling edit:" + messageId + ", " + newMessage);
+  }
 
-        </VStack>
-      </Box>
-    </ScrollView>
+  const handleDelete = (messageId: string) => {
+    console.log("Handling delete:" + messageId);
+  }
 
+  return (
+    <Box width="90%" marginLeft="5%">
+      <VStack>
+        <HStack marginTop="5%">
+          <Box width="30%" justifyContent={"center"}>
+            <Popover // @ts-ignore
+              trigger={triggerProps => {
+                return <Button colorScheme="primary" {...triggerProps} onPress={() => setIsSortOpen(true)}>
+                  Sort Options
+                </Button>;
+              }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
+              <Popover.Content w="48">
+                <Popover.Arrow />
+                <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
+                <Popover.Header>Sort Options</Popover.Header>
+                <Popover.Body>
+                  <VStack>
+                    <Button size="md" variant="outline" onPress={() => handleSortChanged("items")}
+                      rightIcon={getSortIcon(sortSettings.items, "sm")}
+                    >
+                      Items</Button>
+                    <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date")}
+                      rightIcon={getSortIcon(sortSettings.date, "sm")}>
+                      Date</Button>
+                  </VStack>
+                </Popover.Body>
+                <Popover.Footer justifyContent="flex-end">
+                  <Button.Group space={2}>
+                    <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
+                      Cancel
+                    </Button>
+                    <Button colorScheme="success" onPress={() => { setIsSortOpen(false); getNotes() }}>
+                      Save
+                    </Button>
+                  </Button.Group>
+                </Popover.Footer>
+              </Popover.Content>
+            </Popover>
+          </Box>
+          <VStack width="70%" space="0">
+            <Flex direction="row" alignItems="center" justify="flex-end">
+              <Text>My comments</Text>
+              <Switch isChecked={myCommentsCheck} onValueChange={() => setMyCommentsCheck(!myCommentsCheck)} size="md" />
+            </Flex>
+            <Flex direction="row" alignItems="center" justify="flex-end" marginTop="-7.5%">
+              <Text>General comments</Text>
+              <Switch isChecked={generalCommentsCheck} onValueChange={() => setGeneralCommentsCheck(!generalCommentsCheck)} size="md" />
+            </Flex>
+          </VStack>
+        </HStack>
+        <Box h={replyingTo != null ? "62.5%" : "67.5%"}>
+          <NotesListView notes={notes} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} />
+        </Box>
+        {replyingTo != null &&
+          <Flex direction="row" alignItems="center" justify="flex-end" h="5%" marginRight="10%">
+            <Text>Replying to {replyingTo.userName}</Text>
+            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
+            </IconButton>
+          </Flex>
+        }
+        <HStack h={replyingTo != null ? "20%" : "15%"} marginTop={replyingTo != null ? "0%" : "5%"}>
+          <TextArea placeholder="Add comment" width="90%" autoCompleteType={undefined} ></TextArea>
+          <VStack>
+            <Box h={replyingTo != null ? "30%" : "45%"}></Box>
+            <Box marginLeft="2">
+              <Button startIcon={<MessageIcon color="#FFF" />}></Button>
+            </Box>
+          </VStack>
+        </HStack>
+      </VStack>
+      <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
+    </Box>
   );
 }
 

src/types/note.ts

@@ -1 +1 @@
 export interface Note {
+    uuid: string
     username: string
     userId: string
     note: string // text
@@ -7 +8 @@
     createdTime: Date 
     updatedTime: Date
     noteColor: string
-}
+}
+