delete note
This commit is contained in:
Admin
parent
77019ec8b3
commit
8b6565a163
|
|
@ -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,
|
||||
height: 200,
|
||||
width: 400,
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -1,55 +1,62 @@
|
|||
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',
|
||||
url: 'getAllNotes',
|
||||
});
|
||||
try {
|
||||
const response = await axios({
|
||||
method: "GET",
|
||||
url: "getAllNotes",
|
||||
});
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export async function fetchMessages(onError?: (error: unknown) => void) {
|
||||
try {
|
||||
const response = await axios.get(`getAllNotes?key=${API_KEY}`);
|
||||
try {
|
||||
const response = await axios.get(`getAllNotes?key=${API_KEY}`);
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching notes:', error);
|
||||
onError?.(error);
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching notes:", error);
|
||||
onError?.(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchEmails(onError?: (error: unknown) => void) {
|
||||
try {
|
||||
const response = await axios.get(`emails?key=${API_KEY}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching emails:', error);
|
||||
onError?.(error);
|
||||
}
|
||||
try {
|
||||
const response = await axios.get(`emails?key=${API_KEY}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching emails:", error);
|
||||
onError?.(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function addEmail(email: string, onError?: (error: unknown) => void) {
|
||||
try {
|
||||
const response = await axios.post(`add-email`, {
|
||||
email: email,
|
||||
key: API_KEY,
|
||||
});
|
||||
export async function addEmail(
|
||||
email: string,
|
||||
onError?: (error: unknown) => void
|
||||
) {
|
||||
try {
|
||||
const response = await axios.post(`add-email`, {
|
||||
email: email,
|
||||
key: API_KEY,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error add email:', error);
|
||||
onError?.(error);
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Error add email:", error);
|
||||
onError?.(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteEmail(id: number) {
|
||||
await axios.delete(`delete-email/${id}?key=${API_KEY}`);
|
||||
await axios.delete(`delete-email/${id}?key=${API_KEY}`);
|
||||
}
|
||||
|
||||
export async function deleteMessage(id: number) {
|
||||
await axios.delete(`delete-note/${id}?key=${API_KEY}`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,106 +1,158 @@
|
|||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { ActionIcon, Box, LoadingOverlay, ScrollAreaAutosize, Tooltip } from '@mantine/core';
|
||||
import { useViewportSize } from '@mantine/hooks'; // 🔥 thêm cái này
|
||||
import { IconDotsVertical, IconMail } from '@tabler/icons-react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Message, Settings } from '../components';
|
||||
import { showNotification } from '../ultils/fn';
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
LoadingOverlay,
|
||||
ScrollAreaAutosize,
|
||||
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 [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",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { height } = useViewportSize(); // lấy kích thước cửa sổ
|
||||
const fetchMessages = async () => {
|
||||
const messages = await window.ipcRenderer.invoke("fetchMessages");
|
||||
|
||||
const scrollToBottom = () => {
|
||||
const viewport = viewportRef.current;
|
||||
if (viewport) {
|
||||
viewport.scrollTo({
|
||||
top: viewport.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
if (!messages || !Array.isArray(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");
|
||||
setLoading(true);
|
||||
await fetchMessages();
|
||||
setTimeout(scrollToBottom, 100);
|
||||
} catch (error) {
|
||||
console.error("Failed to connect socket", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMessages = async () => {
|
||||
const messages = await window.ipcRenderer.invoke('fetchMessages');
|
||||
connectSocket();
|
||||
window.ipcRenderer?.onNewNote(async (data: any) => {
|
||||
console.log("Received newNote data:", data);
|
||||
showNotification("Có tin nhắn mới", data.message);
|
||||
await fetchMessages();
|
||||
setTimeout(() => scrollToBottom(), 100);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!messages || !Array.isArray(messages)) {
|
||||
showNotification('Lỗi fetch notes', `Error: ${JSON.stringify(messages)}`);
|
||||
return;
|
||||
}
|
||||
const openMailsWindow = () => {
|
||||
window.ipcRenderer.invoke("open-new-window");
|
||||
};
|
||||
|
||||
setMessages(messages);
|
||||
};
|
||||
// 🧠 Tính chiều cao dynamic (ví dụ trừ header 80px + padding 30px)
|
||||
const scrollAreaHeight = height - 70; // Bạn chỉnh số này nếu muốn
|
||||
|
||||
useEffect(() => {
|
||||
const connectSocket = async () => {
|
||||
try {
|
||||
await window.ipcRenderer.invoke('connect-socket');
|
||||
setLoading(true);
|
||||
await fetchMessages();
|
||||
setTimeout(scrollToBottom, 100);
|
||||
} catch (error) {
|
||||
console.error('Failed to connect socket', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Box className="flex flex-col !overflow-hidden h-full">
|
||||
{/* 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"
|
||||
>
|
||||
<IconMail size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
connectSocket();
|
||||
window.ipcRenderer?.onNewNote(async (data: any) => {
|
||||
console.log('Received newNote data:', data);
|
||||
showNotification('Có tin nhắn mới', data.message);
|
||||
await fetchMessages();
|
||||
scrollToBottom();
|
||||
});
|
||||
}, []);
|
||||
<div className="text-xl font-semibold">Notes</div>
|
||||
|
||||
const openMailsWindow = () => {
|
||||
window.ipcRenderer.invoke('open-new-window');
|
||||
};
|
||||
<Settings
|
||||
funtions={{
|
||||
refresh: async () => {
|
||||
setLoading(true);
|
||||
await fetchMessages();
|
||||
setLoading(false);
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tooltip label="Settings">
|
||||
<ActionIcon variant="subtle" radius="md" size="lg">
|
||||
<IconDotsVertical size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Settings>
|
||||
</header>
|
||||
|
||||
// 🧠 Tính chiều cao dynamic (ví dụ trừ header 80px + padding 30px)
|
||||
const scrollAreaHeight = height - 70; // Bạn chỉnh số này nếu muốn
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col !overflow-hidden h-full">
|
||||
{/* 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">
|
||||
<IconMail size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
<div className="text-xl font-semibold">Notes</div>
|
||||
|
||||
<Settings>
|
||||
<Tooltip label="Settings">
|
||||
<ActionIcon variant="subtle" radius="md" size="lg">
|
||||
<IconDotsVertical size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Settings>
|
||||
</header>
|
||||
|
||||
{/* Message List */}
|
||||
<ScrollAreaAutosize
|
||||
viewportRef={viewportRef}
|
||||
h={scrollAreaHeight} // 👈 set height động theo window size
|
||||
type="auto"
|
||||
>
|
||||
<Box className="flex flex-col gap-3 w-full overflow-hidden p-2">
|
||||
{messages.map((item) => (
|
||||
<Message key={item.message + item.id} data={item} />
|
||||
))}
|
||||
</Box>
|
||||
</ScrollAreaAutosize>
|
||||
|
||||
<LoadingOverlay visible={loading} />
|
||||
{/* Message List */}
|
||||
<ScrollAreaAutosize
|
||||
viewportRef={viewportRef}
|
||||
h={scrollAreaHeight} // 👈 set height động theo window size
|
||||
type="auto"
|
||||
>
|
||||
<Box className="flex flex-col gap-3 w-full overflow-hidden p-2">
|
||||
{messages.map((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>
|
||||
);
|
||||
}
|
||||
|
||||
export default MainPage;
|
||||
|
|
|
|||
Loading…
Reference in New Issue