feat:reset button

Author: RyosukeDTomita

url-memo-app/__tests__/components/ResetButton.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ResetButton } from '@/components/ResetButton';
+
+describe('ResetButton', () => {
+  let mockOnReset: jest.Mock;
+
+  beforeEach(() => {
+    mockOnReset = jest.fn();
+    // Mock window.confirm
+    global.confirm = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the reset button', () => {
+    render(<ResetButton onReset={mockOnReset} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('リセット');
+  });
+
+  it('should show confirmation dialog when clicked', () => {
+    (global.confirm as jest.Mock).mockReturnValue(true);
+    
+    render(<ResetButton onReset={mockOnReset} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    fireEvent.click(button);
+    
+    expect(global.confirm).toHaveBeenCalledWith(
+      'メモをリセットしますか？\nこの操作は取り消せません。'
+    );
+  });
+
+  it('should call onReset when user confirms', () => {
+    (global.confirm as jest.Mock).mockReturnValue(true);
+    
+    render(<ResetButton onReset={mockOnReset} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    fireEvent.click(button);
+    
+    expect(mockOnReset).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call onReset when user cancels', () => {
+    (global.confirm as jest.Mock).mockReturnValue(false);
+    
+    render(<ResetButton onReset={mockOnReset} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    fireEvent.click(button);
+    
+    expect(mockOnReset).not.toHaveBeenCalled();
+  });
+
+  it('should be disabled when disabled prop is true', () => {
+    render(<ResetButton onReset={mockOnReset} disabled={true} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    expect(button).toBeDisabled();
+  });
+
+  it('should not show confirmation when disabled', () => {
+    render(<ResetButton onReset={mockOnReset} disabled={true} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    fireEvent.click(button);
+    
+    expect(global.confirm).not.toHaveBeenCalled();
+    expect(mockOnReset).not.toHaveBeenCalled();
+  });
+
+  it('should have proper styling classes', () => {
+    render(<ResetButton onReset={mockOnReset} />);
+    
+    const button = screen.getByRole('button', { name: 'メモをリセット' });
+    expect(button).toHaveClass('bg-red-600');
+    expect(button).toHaveClass('hover:bg-red-700');
+  });
+});

url-memo-app/app/page.tsx

@@ -4,13 +4,14 @@ import React, { useState, useEffect, Suspense } from 'react';
 import { Editor } from '@/components/Editor';
 import { SaveButton } from '@/components/SaveButton';
 import { ShareButton } from '@/components/ShareButton';
+import { ResetButton } from '@/components/ResetButton';
 import { StatusMessage } from '@/components/StatusMessage';
 import { useUrlState } from '@/hooks/useUrlState';
 import { useBookmark } from '@/hooks/useBookmark';
 import { encodeTextToUrl } from '@/utils/urlEncoder';
 import { decodeTextFromUrl } from '@/utils/urlDecoder';
 
-const URL_LENGTH_LIMIT = 2048;
+const URL_LENGTH_LIMIT = 8192; // 8KB - supported by most modern browsers and servers
 
 interface StatusMessageState {
   message: string;
@@ -68,6 +69,15 @@ function MemoApp() {
     showStatusMessage('URLがクリップボードにコピーされました。', 'success');
   };
 
+  const handleReset = () => {
+    setMemoText('');
+    // Clear URL parameters
+    const url = new URL(window.location.href);
+    url.searchParams.delete('memo');
+    window.history.replaceState({}, '', url.toString());
+    showStatusMessage('メモがリセットされました。', 'info');
+  };
+
   const getCurrentUrl = () => {
     if (typeof window !== 'undefined') {
       return window.location.href;
@@ -103,7 +113,7 @@ function MemoApp() {
           <Editor
             initialText={memoText}
             onChange={handleMemoChange}
-            maxLength={1500} // Conservative limit to ensure URL stays under limit after encoding
+            maxLength={5000} // Increased limit with compression
           />
         </div>
 
@@ -117,6 +127,9 @@ function MemoApp() {
             currentUrl={getCurrentUrl()}
             onShare={handleShare}
           />
+          <ResetButton
+            onReset={handleReset}
+          />
         </div>
 
         {/* Help Section */}

url-memo-app/components/ResetButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface ResetButtonProps {
+  onReset: () => void;
+  disabled?: boolean;
+}
+
+export const ResetButton: React.FC<ResetButtonProps> = ({ onReset, disabled = false }) => {
+  const handleClick = () => {
+    if (window.confirm('メモをリセットしますか？\nこの操作は取り消せません。')) {
+      onReset();
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={disabled}
+      className="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      aria-label="メモをリセット"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+          clipRule="evenodd"
+        />
+      </svg>
+      リセット
+    </button>
+  );
+};

url-memo-app/utils/urlEncoder.ts

@@ -1,6 +1,6 @@
 import LZString from 'lz-string';
 
-const MAX_URL_LENGTH = 2048;
+const MAX_URL_LENGTH = 8192; // 8KB - supported by most modern browsers and servers
 
 export function encodeTextToUrl(text: string): string {
   if (text === '') {