You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
memos/web/src/components/MemoEditor/services/cacheService.ts

50 lines
1.1 KiB
TypeScript

refactor(editor): complete state machine and services migration BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage
5 months ago
export const CACHE_DEBOUNCE_DELAY = 500;
const pendingSaves = new Map<string, ReturnType<typeof window.setTimeout>>();
refactor(editor): complete state machine and services migration BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage
5 months ago
export const cacheService = {
key: (username: string, cacheKey?: string): string => {
return `${username}-${cacheKey || ""}`;
},
save: (key: string, content: string) => {
const pendingSave = pendingSaves.get(key);
if (pendingSave) {
window.clearTimeout(pendingSave);
refactor(editor): complete state machine and services migration BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage
5 months ago
}
const timeoutId = window.setTimeout(() => {
pendingSaves.delete(key);
if (content.trim()) {
localStorage.setItem(key, content);
} else {
localStorage.removeItem(key);
}
}, CACHE_DEBOUNCE_DELAY);
pendingSaves.set(key, timeoutId);
},
refactor(editor): complete state machine and services migration BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage
5 months ago
load(key: string): string {
return localStorage.getItem(key) || "";
},
clear(key: string): void {
const pendingSave = pendingSaves.get(key);
if (pendingSave) {
window.clearTimeout(pendingSave);
pendingSaves.delete(key);
}
refactor(editor): complete state machine and services migration BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage
5 months ago
localStorage.removeItem(key);
},
clearAll(): void {
for (const timeoutId of pendingSaves.values()) {
window.clearTimeout(timeoutId);
}
pendingSaves.clear();
},
refactor(editor): complete state machine and services migration BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage
5 months ago
};