Fovway/noteJS-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Упрощены импорты и улучшена типизация в компонентах. Удалены неиспользуемые зависимости и оптимизирована логика обработки идентификаторов в компонентах заметок. Обновлены стили для повышения производительности и улучшения пользовательского опыта.

Browse Source
This commit is contained in:
Fovway 2025-11-04 11:51:32 +07:00
parent 87a01629ae
commit 4d91b2227d
11 changed files with 83 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/calendar/MiniCalendar.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import {
format,
startOfMonth,

1
src/components/layout/Sidebar.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import { MiniCalendar } from "../calendar/MiniCalendar";
import { SearchBar } from "../search/SearchBar";
import { TagsFilter } from "../search/TagsFilter";
import { useAppSelector } from "../../store/hooks";
import { Note } from "../../types/note";
interface SidebarProps {

9
src/components/notes/MarkdownToolbar.tsx
View File

@ -113,7 +113,14 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
};
}, [isDragging]);
const buttons = [];
const buttons: Array<{
id: string;
icon: string;
title: string;
before?: string;
after?: string;
action?: () => void;
}> = [];
return (
<div

23
src/components/notes/NoteEditor.tsx
View File

@ -4,7 +4,7 @@ import { FloatingToolbar } from "./FloatingToolbar";
import { NotePreview } from "./NotePreview";
import { ImageUpload } from "./ImageUpload";
import { FileUpload } from "./FileUpload";
import { useAppSelector, useAppDispatch } from "../../store/hooks";
import { useAppSelector } from "../../store/hooks";
import { useNotification } from "../../hooks/useNotification";
import { offlineNotesApi } from "../../api/offlineNotesApi";
import { aiApi } from "../../api/aiApi";
@ -31,7 +31,6 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
const isPreviewMode = useAppSelector((state) => state.ui.isPreviewMode);
const { showNotification } = useNotification();
const aiEnabled = useAppSelector((state) => state.profile.aiEnabled);
const dispatch = useAppDispatch();
const handleSave = async () => {
if (!content.trim()) {
@ -251,36 +250,27 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
// Определяем, есть ли уже такие маркеры на всех строках
let allLinesHaveMarker = true;
let hasAnyMarker = false;
for (const line of lines) {
const trimmedLine = line.trimStart();
if (before === "- ") {
// Для маркированного списка проверяем различные варианты
if (trimmedLine.match(/^[-*+]\s/)) {
hasAnyMarker = true;
} else {
if (!trimmedLine.match(/^[-*+]\s/)) {
allLinesHaveMarker = false;
}
} else if (before === "1. ") {
// Для нумерованного списка
if (trimmedLine.match(/^\d+\.\s/)) {
hasAnyMarker = true;
} else {
if (!trimmedLine.match(/^\d+\.\s/)) {
allLinesHaveMarker = false;
}
} else if (before === "- [ ] ") {
// Для чекбокса
if (trimmedLine.match(/^-\s+\[[ xX]\]\s/)) {
hasAnyMarker = true;
} else {
if (!trimmedLine.match(/^-\s+\[[ xX]\]\s/)) {
allLinesHaveMarker = false;
}
} else if (before === "> ") {
// Для цитаты
if (trimmedLine.startsWith("> ")) {
hasAnyMarker = true;
} else {
if (!trimmedLine.startsWith("> ")) {
allLinesHaveMarker = false;
}
}
@ -530,14 +520,12 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
const lines = text.split("\n");
// Определяем текущую строку
let currentLineIndex = 0;
let currentLineStart = 0;
let currentLine = "";
for (let i = 0; i < lines.length; i++) {
const lineLength = lines[i].length;
if (currentLineStart + lineLength >= start) {
currentLineIndex = i;
currentLine = lines[i];
break;
}
@ -668,7 +656,6 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
const lineHeight = parseInt(styles.lineHeight) || 20;
const paddingTop = parseInt(styles.paddingTop) || 0;
const paddingLeft = parseInt(styles.paddingLeft) || 0;
const fontSize = parseInt(styles.fontSize) || 14;
// Более точный расчет ширины символа
// Создаем временный элемент для измерения

88
src/components/notes/NoteItem.tsx
View File

@ -31,7 +31,6 @@ interface NoteItemProps {
export const NoteItem: React.FC<NoteItemProps> = ({
note,
onDelete,
onPin,
onArchive,
onReload,
@ -140,20 +139,24 @@ export const NoteItem: React.FC<NoteItemProps> = ({
setLocalPreviewMode(false);
};
const handleDeleteExistingImage = (imageId: number) => {
setDeletedImageIds([...deletedImageIds, imageId]);
const handleDeleteExistingImage = (imageId: number | string) => {
const id = typeof imageId === 'number' ? imageId : Number(imageId);
setDeletedImageIds([...deletedImageIds, id]);
};
const handleDeleteExistingFile = (fileId: number) => {
setDeletedFileIds([...deletedFileIds, fileId]);
const handleDeleteExistingFile = (fileId: number | string) => {
const id = typeof fileId === 'number' ? fileId : Number(fileId);
setDeletedFileIds([...deletedFileIds, id]);
};
const handleRestoreImage = (imageId: number) => {
setDeletedImageIds(deletedImageIds.filter((id) => id !== imageId));
const handleRestoreImage = (imageId: number | string) => {
const id = typeof imageId === 'number' ? imageId : Number(imageId);
setDeletedImageIds(deletedImageIds.filter((deletedId) => deletedId !== id));
};
const handleRestoreFile = (fileId: number) => {
setDeletedFileIds(deletedFileIds.filter((id) => id !== fileId));
const handleRestoreFile = (fileId: number | string) => {
const id = typeof fileId === 'number' ? fileId : Number(fileId);
setDeletedFileIds(deletedFileIds.filter((deletedId) => deletedId !== id));
};
const handleAiImprove = async () => {
@ -337,36 +340,27 @@ export const NoteItem: React.FC<NoteItemProps> = ({
// Определяем, есть ли уже такие маркеры на всех строках
let allLinesHaveMarker = true;
let hasAnyMarker = false;
for (const line of lines) {
const trimmedLine = line.trimStart();
if (before === "- ") {
// Для маркированного списка проверяем различные варианты
if (trimmedLine.match(/^[-*+]\s/)) {
hasAnyMarker = true;
} else {
if (!trimmedLine.match(/^[-*+]\s/)) {
allLinesHaveMarker = false;
}
} else if (before === "1. ") {
// Для нумерованного списка
if (trimmedLine.match(/^\d+\.\s/)) {
hasAnyMarker = true;
} else {
if (!trimmedLine.match(/^\d+\.\s/)) {
allLinesHaveMarker = false;
}
} else if (before === "- [ ] ") {
// Для чекбокса
if (trimmedLine.match(/^-\s+\[[ xX]\]\s/)) {
hasAnyMarker = true;
} else {
if (!trimmedLine.match(/^-\s+\[[ xX]\]\s/)) {
allLinesHaveMarker = false;
}
} else if (before === "> ") {
// Для цитаты
if (trimmedLine.startsWith("> ")) {
hasAnyMarker = true;
} else {
if (!trimmedLine.startsWith("> ")) {
allLinesHaveMarker = false;
}
}
@ -628,7 +622,6 @@ export const NoteItem: React.FC<NoteItemProps> = ({
const lineHeight = parseInt(styles.lineHeight) || 20;
const paddingTop = parseInt(styles.paddingTop) || 0;
const paddingLeft = parseInt(styles.paddingLeft) || 0;
const fontSize = parseInt(styles.fontSize) || 14;
// Более точный расчет ширины символа
// Создаем временный элемент для измерения
@ -751,14 +744,12 @@ export const NoteItem: React.FC<NoteItemProps> = ({
const lines = text.split("\n");
// Определяем текущую строку
let currentLineIndex = 0;
let currentLineStart = 0;
let currentLine = "";
for (let i = 0; i < lines.length; i++) {
const lineLength = lines[i].length;
if (currentLineStart + lineLength >= start) {
currentLineIndex = i;
currentLine = lines[i];
break;
}
@ -1305,12 +1296,17 @@ export const NoteItem: React.FC<NoteItemProps> = ({
</div>
<div className="image-preview-list">
{note.images
.filter((image) => !deletedImageIds.includes(image.id))
.filter((image) => {
const imageId = typeof image.id === 'number' ? image.id : Number(image.id);
return !deletedImageIds.includes(imageId);
})
.map((image) => {
const noteId = typeof note.id === 'number' ? note.id : Number(note.id);
const imageId = typeof image.id === 'number' ? image.id : Number(image.id);
const imageUrl = getImageUrl(
image.file_path,
note.id,
image.id
noteId,
imageId
);
return (
<div key={image.id} className="image-preview-item">
@ -1344,12 +1340,17 @@ export const NoteItem: React.FC<NoteItemProps> = ({
</div>
<div className="image-preview-list">
{note.images
.filter((image) => deletedImageIds.includes(image.id))
.filter((image) => {
const imageId = typeof image.id === 'number' ? image.id : Number(image.id);
return deletedImageIds.includes(imageId);
})
.map((image) => {
const noteId = typeof note.id === 'number' ? note.id : Number(note.id);
const imageId = typeof image.id === 'number' ? image.id : Number(image.id);
const imageUrl = getImageUrl(
image.file_path,
note.id,
image.id
noteId,
imageId
);
return (
<div key={image.id} className="image-preview-item">
@ -1384,13 +1385,11 @@ export const NoteItem: React.FC<NoteItemProps> = ({
</div>
<div className="file-preview-list">
{note.files
.filter((file) => !deletedFileIds.includes(file.id))
.filter((file) => {
const fileId = typeof file.id === 'number' ? file.id : Number(file.id);
return !deletedFileIds.includes(fileId);
})
.map((file) => {
const fileUrl = getFileUrl(
file.file_path,
note.id,
file.id
);
return (
<div key={file.id} className="file-preview-item">
<Icon
@ -1430,7 +1429,10 @@ export const NoteItem: React.FC<NoteItemProps> = ({
</div>
<div className="file-preview-list">
{note.files
.filter((file) => deletedFileIds.includes(file.id))
.filter((file) => {
const fileId = typeof file.id === 'number' ? file.id : Number(file.id);
return deletedFileIds.includes(fileId);
})
.map((file) => {
return (
<div key={file.id} className="file-preview-item">
@ -1524,10 +1526,12 @@ export const NoteItem: React.FC<NoteItemProps> = ({
{note.images && note.images.length > 0 && (
<div className="note-images-container">
{note.images.map((image) => {
const noteId = typeof note.id === 'number' ? note.id : Number(note.id);
const imageId = typeof image.id === 'number' ? image.id : Number(image.id);
const imageUrl = getImageUrl(
image.file_path,
note.id,
image.id
noteId,
imageId
);
return (
<div key={image.id} className="note-image-item">
@ -1549,7 +1553,9 @@ export const NoteItem: React.FC<NoteItemProps> = ({
{note.files && note.files.length > 0 && (
<div className="note-files-container">
{note.files.map((file) => {
const fileUrl = getFileUrl(file.file_path, note.id, file.id);
const noteId = typeof note.id === 'number' ? note.id : Number(note.id);
const fileId = typeof file.id === 'number' ? file.id : Number(file.id);
const fileUrl = getFileUrl(file.file_path, noteId, fileId);
return (
<div key={file.id} className="note-file-item">
<a

4
src/components/notes/NotesList.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useImperativeHandle, forwardRef } from "react";
import { useEffect, useImperativeHandle, forwardRef } from "react";
import { NoteItem } from "./NoteItem";
import { useAppSelector, useAppDispatch } from "../../store/hooks";
import { offlineNotesApi } from "../../api/offlineNotesApi";
@ -10,7 +10,7 @@ export interface NotesListRef {
reloadNotes: () => void;
}
export const NotesList = forwardRef<NotesListRef>((props, ref) => {
export const NotesList = forwardRef<NotesListRef>((_props, ref) => {
const notes = useAppSelector((state) => state.notes.notes);
const userId = useAppSelector((state) => state.auth.userId);
const searchQuery = useAppSelector((state) => state.notes.searchQuery);

2
src/components/search/SearchBar.tsx
View File

@ -6,7 +6,7 @@ import { setSearchQuery } from "../../store/slices/notesSlice";
export const SearchBar: React.FC = () => {
const [query, setQuery] = useState("");
const dispatch = useAppDispatch();
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
// Debounce для поиска

3
src/hooks/useNotification.ts
View File

@ -10,7 +10,8 @@ export const useNotification = () => {
message: string,
type: "info" | "success" | "error" | "warning" = "info"
) => {
const id = dispatch(addNotification({ message, type })).payload.id;
const action = dispatch(addNotification({ message, type }));
const id = (action as any).payload?.id || `notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
setTimeout(() => {
dispatch(removeNotification(id));
}, 4000);

3
src/pages/ProfilePage.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { Icon } from "@iconify/react";
import { useAppSelector, useAppDispatch } from "../store/hooks";
import { useAppDispatch } from "../store/hooks";
import { userApi } from "../api/userApi";
import { authApi } from "../api/authApi";
import { clearAuth } from "../store/slices/authSlice";
@ -16,7 +16,6 @@ const ProfilePage: React.FC = () => {
const navigate = useNavigate();
const dispatch = useAppDispatch();
const { showNotification } = useNotification();
const user = useAppSelector((state) => state.profile.user);
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");

24
src/pages/SettingsPage.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { Icon } from "@iconify/react";
import { useAppSelector, useAppDispatch } from "../store/hooks";
import { useAppDispatch } from "../store/hooks";
import { userApi } from "../api/userApi";
import { authApi } from "../api/authApi";
import { notesApi, logsApi, Log } from "../api/notesApi";
@ -13,7 +13,6 @@ import { setAccentColor } from "../utils/colorUtils";
import { useNotification } from "../hooks/useNotification";
import { Modal } from "../components/common/Modal";
import { ThemeToggle } from "../components/common/ThemeToggle";
import { formatDateFromTimestamp } from "../utils/dateFormat";
import { parseMarkdown } from "../utils/markdown";
import { dbManager } from "../utils/indexedDB";
import { syncService } from "../services/syncService";
@ -25,8 +24,6 @@ const SettingsPage: React.FC = () => {
const navigate = useNavigate();
const dispatch = useAppDispatch();
const { showNotification } = useNotification();
const user = useAppSelector((state) => state.profile.user);
const accentColor = useAppSelector((state) => state.ui.accentColor);
const [activeTab, setActiveTab] = useState<SettingsTab>(() => {
// Восстанавливаем активную вкладку из localStorage при инициализации
@ -162,11 +159,16 @@ const SettingsPage: React.FC = () => {
const handleUpdateAppearance = async () => {
try {
await userApi.updateProfile({
const profileUpdate: any = {
accent_color: selectedAccentColor,
show_edit_date: showEditDate,
colored_icons: coloredIcons,
});
};
if (showEditDate !== undefined) {
profileUpdate.show_edit_date = showEditDate;
}
if (coloredIcons !== undefined) {
profileUpdate.colored_icons = coloredIcons;
}
await userApi.updateProfile(profileUpdate);
dispatch(setAccentColorAction(selectedAccentColor));
setAccentColor(selectedAccentColor);
await loadUserInfo();
@ -420,7 +422,7 @@ const SettingsPage: React.FC = () => {
// Загружаем версию из IndexedDB
try {
const userId = user?.id;
const userId = (await import("../store")).store.getState().auth.userId;
const localVer = userId
? await dbManager.getDataVersionByUserId(userId)
: await dbManager.getDataVersion();
@ -837,14 +839,14 @@ const SettingsPage: React.FC = () => {
<div className="archived-note-actions">
<button
className="btn-restore"
onClick={() => handleRestoreNote(note.id)}
onClick={() => handleRestoreNote(typeof note.id === 'number' ? note.id : Number(note.id))}
title="Восстановить"
>
<Icon icon="mdi:restore" /> Восстановить
</button>
<button
className="btn-delete-permanent"
onClick={() => handleDeletePermanent(note.id)}
onClick={() => handleDeletePermanent(typeof note.id === 'number' ? note.id : Number(note.id))}
title="Удалить навсегда"
>
<Icon icon="mdi:delete-forever" /> Удалить

8
src/services/syncService.ts
View File

@ -5,13 +5,11 @@ import { Note, NoteImage, NoteFile } from '../types/note';
import { store } from '../store/index';
import {
setSyncStatus,
removeNotification,
addNotification,
} from '../store/slices/uiSlice';
import {
updateNote,
setPendingSyncCount,
setOfflineMode,
} from '../store/slices/notesSlice';
import { SyncQueueItem } from '../types/note';
@ -20,7 +18,7 @@ const RETRY_DELAY_MS = 5000;
class SyncService {
private isSyncing = false;
private syncTimer: NodeJS.Timeout | null = null;
private syncTimer: ReturnType<typeof setTimeout> | null = null;
private listeners: Array<() => void> = [];
/**
@ -444,7 +442,7 @@ class SyncService {
*/
private async updateImageReferences(
localNote: Note,
serverNote: Note
_serverNote: Note
): Promise<NoteImage[]> {
// Если нет изображений с base64, возвращаем как есть
const hasBase64Images = localNote.images.some((img) => img.base64Data);
@ -461,7 +459,7 @@ class SyncService {
*/
private async updateFileReferences(
localNote: Note,
serverNote: Note
_serverNote: Note
): Promise<NoteFile[]> {
// Если нет файлов с base64, возвращаем как есть
const hasBase64Files = localNote.files.some((file) => file.base64Data);