Perforrmance search functionality code quality improvement

src/components/search/IntelligentAutoComplete.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Search, X, Clock, ChevronRight, Sparkles, User, Tag, Type } from 'lucide-react';
 import { getSearchSuggestions, highlightMatch } from '../../utils/searchUtils';
 
@@ -17,7 +17,7 @@ export const IntelligentAutoComplete = React.memo<IntelligentAutoCompleteProps>(
     const [activeIndex, setActiveIndex] = useState(-1);
     const dropdownRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const suggestions = getSearchSuggestions(value);
+    const suggestions = useMemo(() => getSearchSuggestions(value), [value]);
 
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {

src/components/shared/ImageUploader.tsx

@@ -16,6 +16,12 @@ function ImageUploader({ onImageSelect, initialImageUrl, className = '' }: Image
   const fileInputRef = useRef<HTMLInputElement>(null);
   const objectUrlRef = useRef<string | null>(null);
 
+  useEffect(() => {
+    if (initialImageUrl) {
+      setPreviewUrl(initialImageUrl);
+    }
+  }, [initialImageUrl]);
+
   useEffect(() => {
     return () => {
       if (objectUrlRef.current) {
@@ -24,6 +30,72 @@ function ImageUploader({ onImageSelect, initialImageUrl, className = '' }: Image
     };
   }, []);
 
+<<<<<<< perforrmance-search-functionality-code-quality-improvement
+  const setObjectPreviewUrl = useCallback((objectUrl: string) => {
+    if (objectUrlRef.current) {
+      URL.revokeObjectURL(objectUrlRef.current);
+    }
+
+    objectUrlRef.current = objectUrl;
+    setPreviewUrl(objectUrl);
+  }, []);
+
+  const handleFileChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (file.type.startsWith('video/')) {
+      try {
+        const video = document.createElement('video');
+        const videoObjectUrl = URL.createObjectURL(file);
+        video.src = videoObjectUrl;
+        video.crossOrigin = 'anonymous';
+        video.muted = true;
+
+        await new Promise<void>((resolve, reject) => {
+          video.onloadeddata = () => {
+            video.currentTime = Math.min(1, video.duration / 2);
+          };
+          video.onseeked = () => resolve();
+          video.onerror = () => reject(new Error('Failed to load video'));
+        });
+
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                const objectUrl = URL.createObjectURL(blob);
+                setObjectPreviewUrl(objectUrl);
+                const optimizedFile = new File([blob], file.name.replace(/\.[^/.]+$/, '.jpg'), {
+                  type: 'image/jpeg',
+                });
+                onImageSelect(optimizedFile);
+              }
+            },
+            'image/jpeg',
+            0.85,
+          );
+        }
+        URL.revokeObjectURL(videoObjectUrl);
+      } catch (error) {
+        console.error('Video optimization failed:', error);
+      }
+    } else if (file.type.startsWith('image/')) {
+      const objectUrl = URL.createObjectURL(file);
+      setObjectPreviewUrl(objectUrl);
+      onImageSelect(file);
+    }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [onImageSelect, setObjectPreviewUrl]);
+=======
   const handleFileChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
@@ -41,6 +113,7 @@ function ImageUploader({ onImageSelect, initialImageUrl, className = '' }: Image
     },
     [onImageSelect],
   );
+>>>>>>> main
 
   const handleClick = useCallback(() => {
     fileInputRef.current?.click();
@@ -60,7 +133,7 @@ function ImageUploader({ onImageSelect, initialImageUrl, className = '' }: Image
             alt="Profile Preview"
             fill
             sizes="(max-width: 768px) 100vw, 33vw"
-            unoptimized={previewUrl.startsWith('blob:')}
+            unoptimized={previewUrl.startsWith('data:') || previewUrl.startsWith('blob:')}
             className="object-cover"
           />
         ) : (
@@ -92,7 +165,7 @@ function ImageUploader({ onImageSelect, initialImageUrl, className = '' }: Image
       <input
         ref={fileInputRef}
         type="file"
-        accept="image/*"
+        accept="image/*,video/*"
         onChange={handleFileChange}
         className="hidden"
       />

src/components/shared/__tests__/ImageUploader.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach, beforeAll, afterAll } from 'vitest';
+import ImageUploader from '../ImageUploader';
+
+describe('ImageUploader', () => {
+  let originalCreateElement: typeof document.createElement;
+
+  beforeAll(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url');
+    global.URL.revokeObjectURL = vi.fn();
+
+    originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName: string, options?: ElementCreationOptions) => {
+        if (tagName === 'video') {
+          const video = originalCreateElement('video');
+          Object.defineProperty(video, 'duration', { value: 10 });
+          Object.defineProperty(video, 'videoWidth', { value: 640 });
+          Object.defineProperty(video, 'videoHeight', { value: 480 });
+
+          // Simulate video load and seek events automatically
+          setTimeout(() => {
+            if (video.onloadeddata) (video.onloadeddata as Function)();
+            setTimeout(() => {
+              if (video.onseeked) (video.onseeked as Function)();
+            }, 0);
+          }, 0);
+          return video;
+        }
+
+        if (tagName === 'canvas') {
+          const canvas = originalCreateElement('canvas');
+          canvas.getContext = vi.fn(
+            () =>
+              ({
+                drawImage: vi.fn(),
+              } as any),
+          );
+          canvas.toBlob = vi.fn((callback) => {
+            callback(new Blob(['mock-image-data'], { type: 'image/jpeg' }));
+          });
+          return canvas;
+        }
+        return originalCreateElement(tagName, options);
+      },
+    );
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders correctly with default state', () => {
+    render(<ImageUploader onImageSelect={vi.fn()} />);
+    expect(screen.getByText('Upload New Picture')).toBeInTheDocument();
+  });
+
+  it('handles image upload correctly without video extraction', async () => {
+    const onImageSelect = vi.fn();
+    const user = userEvent.setup();
+    render(<ImageUploader onImageSelect={onImageSelect} />);
+
+    const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await user.upload(input, file);
+
+    expect(global.URL.createObjectURL).toHaveBeenCalledWith(file);
+    expect(onImageSelect).toHaveBeenCalledWith(file);
+  });
+
+  it('extracts frame when video is uploaded', async () => {
+    const onImageSelect = vi.fn();
+    const user = userEvent.setup();
+    render(<ImageUploader onImageSelect={onImageSelect} />);
+
+    const file = new File(['video-data'], 'video.mp4', { type: 'video/mp4' });
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await user.upload(input, file);
+
+    await waitFor(() => {
+      expect(onImageSelect).toHaveBeenCalled();
+    });
+
+    const selectedFile = onImageSelect.mock.calls[0][0];
+    expect(selectedFile.name).toBe('video.jpg');
+    expect(selectedFile.type).toBe('image/jpeg');
+  });
+});