delete note

electron/main.ts

@@ -4,7 +4,7 @@ import { app, BrowserWindow, ipcMain, Menu, Notification, screen } from 'electro
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { io } from 'socket.io-client';
-import { addEmail, deleteEmail, fetchEmails, fetchMessages } from '../src/apis';
+import { addEmail, deleteEmail, deleteMessage, fetchEmails, fetchMessages } from '../src/apis';
 import { createMailWindow } from './windows/mails.window';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -53,8 +53,8 @@ function createWindow() {
     // Vị trí cửa sổ ở góc phải dưới của màn hình đã chọn
 
     win = new BrowserWindow({
-        width: 600,
+        width: 400,
-        height: 200,
+        height: 400,
         x: 0, // Đặt cửa sổ ở góc phải
         y: 0, // Đặt cửa sổ ở góc dưới
         alwaysOnTop: true, // Cửa sổ luôn nằm trên các cửa sổ khác
@@ -70,7 +70,7 @@ function createWindow() {
         win?.webContents.send('main-process-message', new Date().toLocaleString());
     });
 
-    win.setPosition(width - 600, height - 200);
+    win.setPosition(width - 400, height - 400);
 
     if (VITE_DEV_SERVER_URL) {
         win.loadURL(VITE_DEV_SERVER_URL);
@@ -148,6 +148,10 @@ ipcMain.handle('del-email', async (_, id: number) => {
     return deleteEmail(id);
 });
 
+ipcMain.handle('del-message', async (_, id: number) => {
+    return deleteMessage(id);
+});
+
 ipcMain.handle('show-notification', async (_, { title, body }) => {
     const notification = new Notification({
         title,

src/apis/index.ts

@@ -1,12 +1,12 @@
-import axios from '../instants/axios';
+import axios from "../instants/axios";
 
 const API_KEY = import.meta.env.VITE_API_KEY;
 
 export const getAllNote = async () => {
   try {
     const response = await axios({
-            method: 'GET',
+      method: "GET",
-            url: 'getAllNotes',
+      url: "getAllNotes",
     });
 
     return response.data;
@@ -21,7 +21,7 @@ export async function fetchMessages(onError?: (error: unknown) => void) {
 
     return response.data;
   } catch (error) {
-        console.error('Error fetching notes:', error);
+    console.error("Error fetching notes:", error);
     onError?.(error);
   }
 }
@@ -31,12 +31,15 @@ export async function fetchEmails(onError?: (error: unknown) => void) {
     const response = await axios.get(`emails?key=${API_KEY}`);
     return response.data;
   } catch (error) {
-        console.error('Error fetching emails:', error);
+    console.error("Error fetching emails:", error);
     onError?.(error);
   }
 }
 
-export async function addEmail(email: string, onError?: (error: unknown) => void) {
+export async function addEmail(
+  email: string,
+  onError?: (error: unknown) => void
+) {
   try {
     const response = await axios.post(`add-email`, {
       email: email,
@@ -45,7 +48,7 @@ export async function addEmail(email: string, onError?: (error: unknown) => void
 
     return response.data;
   } catch (error) {
-        console.error('Error add email:', error);
+    console.error("Error add email:", error);
     onError?.(error);
   }
 }
@@ -53,3 +56,7 @@ export async function addEmail(email: string, onError?: (error: unknown) => void
 export async function deleteEmail(id: number) {
   await axios.delete(`delete-email/${id}?key=${API_KEY}`);
 }
+
+export async function deleteMessage(id: number) {
+  await axios.delete(`delete-note/${id}?key=${API_KEY}`);
+}

src/components/message.tsx

@@ -5,9 +5,10 @@ import { useEffect, useMemo, useState } from 'react';
 
 export interface IMessageProps {
     data: IMessage;
+    onDelete: () => void
 }
 
-export default function Message({ data }: IMessageProps) {
+export default function Message({ data, onDelete }: IMessageProps) {
     const [show, { toggle }] = useDisclosure(false);
 
     const [animation, setAnimation] = useState(false);
@@ -27,7 +28,7 @@ export default function Message({ data }: IMessageProps) {
     }, [animation]);
 
     useEffect(() => {
-        const showAnimation = new Date().getTime() - new Date(data.time).getTime() <= 3000;
+        const showAnimation = new Date().getTime() - new Date(data.time).getTime() <= 110000;
 
         setAnimation(showAnimation);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -51,7 +52,7 @@ export default function Message({ data }: IMessageProps) {
                         </ActionIcon>
                     </Tooltip>
                     <Tooltip label="Delete">
-                        <ActionIcon variant="light" size="sm" color="red">
+                        <ActionIcon onClick={onDelete} variant="light" size="sm" color="red">
                             <IconTrash size={16} />
                         </ActionIcon>
                     </Tooltip>

src/components/settings.tsx

@@ -1,11 +1,14 @@
 import { Menu } from "@mantine/core";
-import { IconCode } from "@tabler/icons-react";
+import { IconCode, IconRefresh } from "@tabler/icons-react";
 import { ReactNode } from "react";
 export interface ISettingsProps {
   children: ReactNode;
+  funtions?: {
+    refresh?: () => void
+  }
 }
 
-export default function Settings({ children }: ISettingsProps) {
+export default function Settings({ children, funtions }: ISettingsProps) {
   const openDevtools = () => {
     window.ipcRenderer?.openDevTools();
   };
@@ -19,6 +22,9 @@ export default function Settings({ children }: ISettingsProps) {
         <Menu.Item onClick={openDevtools} leftSection={<IconCode size={12} />} className="text-xs">
           Devtool
         </Menu.Item>
+        <Menu.Item onClick={funtions?.refresh} leftSection={<IconRefresh size={12} />} className="text-xs">
+          Refresh
+        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );

src/pages/main.tsx

@@ -1,48 +1,72 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ActionIcon, Box, LoadingOverlay, ScrollAreaAutosize, Tooltip } from '@mantine/core';
+import {
-import { useViewportSize } from '@mantine/hooks'; // 🔥 thêm cái này
+  ActionIcon,
-import { IconDotsVertical, IconMail } from '@tabler/icons-react';
+  Box,
-import { useEffect, useRef, useState } from 'react';
+  LoadingOverlay,
-import { Message, Settings } from '../components';
+  ScrollAreaAutosize,
-import { showNotification } from '../ultils/fn';
+  Tooltip,
+} from "@mantine/core";
+import { useDisclosure, useViewportSize } from "@mantine/hooks"; // 🔥 thêm cái này
+import { IconDotsVertical, IconMail } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+import { ConfirmModal, Message, Settings } from "../components";
+import { showNotification } from "../ultils/fn";
 
 function MainPage() {
   const [messages, setMessages] = useState<IMessage[]>([]);
   const viewportRef = useRef<HTMLDivElement>(null);
   const [loading, setLoading] = useState(false);
-
+  const [opened, { open, close }] = useDisclosure(false);
   const { height } = useViewportSize(); // lấy kích thước cửa sổ
-
+  const [clickMessage, setClickMessage] = useState<IMessage | null>(null);
   const scrollToBottom = () => {
     const viewport = viewportRef.current;
     if (viewport) {
       viewport.scrollTo({
         top: viewport.scrollHeight,
-                behavior: 'smooth',
+        behavior: "smooth",
       });
     }
   };
 
   const fetchMessages = async () => {
-        const messages = await window.ipcRenderer.invoke('fetchMessages');
+    const messages = await window.ipcRenderer.invoke("fetchMessages");
 
     if (!messages || !Array.isArray(messages)) {
-            showNotification('Lỗi fetch notes', `Error: ${JSON.stringify(messages)}`);
+      showNotification("Lỗi fetch notes", `Error: ${JSON.stringify(messages)}`);
       return;
     }
 
     setMessages(messages);
   };
 
+  const handleDeleteMessage = async (id?: number) => {
+    try {
+      if (!id) return;
+      setLoading(true);
+      await window.ipcRenderer.invoke("del-message", id);
+
+      await fetchMessages();
+      close();
+
+      showNotification("Thông báo", "Đã xóa note: " + clickMessage?.id);
+      setClickMessage(null)
+    } catch (error) {
+      console.log("%csrc/pages/mails.tsx:88 error", "color: #007acc;", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   useEffect(() => {
     const connectSocket = async () => {
       try {
-                await window.ipcRenderer.invoke('connect-socket');
+        await window.ipcRenderer.invoke("connect-socket");
         setLoading(true);
         await fetchMessages();
         setTimeout(scrollToBottom, 100);
       } catch (error) {
-                console.error('Failed to connect socket', error);
+        console.error("Failed to connect socket", error);
       } finally {
         setLoading(false);
       }
@@ -50,15 +74,15 @@ function MainPage() {
 
     connectSocket();
     window.ipcRenderer?.onNewNote(async (data: any) => {
-            console.log('Received newNote data:', data);
+      console.log("Received newNote data:", data);
-            showNotification('Có tin nhắn mới', data.message);
+      showNotification("Có tin nhắn mới", data.message);
       await fetchMessages();
-            scrollToBottom();
+      setTimeout(() => scrollToBottom(), 100);
     });
   }, []);
 
   const openMailsWindow = () => {
-        window.ipcRenderer.invoke('open-new-window');
+    window.ipcRenderer.invoke("open-new-window");
   };
 
   // 🧠 Tính chiều cao dynamic (ví dụ trừ header 80px + padding 30px)
@@ -69,14 +93,27 @@ function MainPage() {
       {/* Header */}
       <header className="p-4 flex items-center justify-between sticky top-0 border-b border-gray-100 pb-2 bg-white z-10">
         <Tooltip label="Mail">
-                    <ActionIcon onClick={openMailsWindow} variant="light" radius="md" size="lg">
+          <ActionIcon
+            onClick={openMailsWindow}
+            variant="light"
+            radius="md"
+            size="lg"
+          >
             <IconMail size={18} />
           </ActionIcon>
         </Tooltip>
 
         <div className="text-xl font-semibold">Notes</div>
 
-                <Settings>
+        <Settings
+          funtions={{
+            refresh: async () => {
+              setLoading(true);
+              await fetchMessages();
+              setLoading(false);
+            },
+          }}
+        >
           <Tooltip label="Settings">
             <ActionIcon variant="subtle" radius="md" size="lg">
               <IconDotsVertical size={18} />
@@ -93,12 +130,27 @@ function MainPage() {
       >
         <Box className="flex flex-col gap-3 w-full overflow-hidden p-2">
           {messages.map((item) => (
-                        <Message key={item.message + item.id} data={item} />
+            <Message
+              onDelete={() => {
+                setClickMessage(item);
+                open();
+              }}
+              key={item.message + item.id}
+              data={item}
+            />
           ))}
         </Box>
       </ScrollAreaAutosize>
 
       <LoadingOverlay visible={loading} />
+
+      <ConfirmModal
+        title="Warning"
+        message={`Bạn có chắc chắn muốn xóa note "${clickMessage?.id}" không?`}
+        opened={opened}
+        onCancel={close}
+        onConfirm={() => handleDeleteMessage(clickMessage?.id)}
+      />
     </Box>
   );
 }