refactor(web): rewrite tests in React and revert core changes

Author: Satvik-art-creator

apps/web/package-lock.json

@@ -17,9 +17,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -29,7 +28,6 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
     "jsdom": "^29.1.1",
-    "svelte": "^5.56.3",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
     "vite": "^8.0.12",

apps/web/package.json

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useTheme } from '../lib/useTheme';
+import { useTheme } from '../lib/theme';
 import './Navbar.css';
 
 export default function Navbar() {

apps/web/src/components/Navbar.tsx

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useState, type ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 
 type Theme = 'light' | 'dark';
 
@@ -40,4 +40,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   );
 }
 
-export { ThemeContext };
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

apps/web/src/lib/theme.tsx

@@ -24,7 +24,6 @@ export default function CardPage() {
 
   useEffect(() => {
     if (!id) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoading(true);
     apiFetch<PublicCard>(`/api/u/card/${id}`)
       .then((data) => {

apps/web/src/lib/useTheme.ts

@@ -0,0 +1,84 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import ProfilePage from './ProfilePage';
+import { apiFetch } from '../lib/api';
+
+vi.mock('../lib/api', () => ({
+  apiFetch: vi.fn(),
+}));
+
+describe('ProfilePage', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  const renderWithRouter = (username: string) => {
+    return render(
+      <MemoryRouter initialEntries={[`/u/${username}`]}>
+        <Routes>
+          <Route path="/u/:username" element={<ProfilePage />} />
+        </Routes>
+      </MemoryRouter>
+    );
+  };
+
+  it('renders loading state initially', () => {
+    (apiFetch as any).mockImplementation(() => new Promise(() => {}));
+    const { container } = renderWithRouter('testuser');
+    
+    expect(container.querySelector('.loading-card')).toBeInTheDocument();
+  });
+
+  it('renders profile data successfully', async () => {
+    const mockProfile = {
+      id: '123',
+      userId: '456',
+      username: 'testuser',
+      displayName: 'Test User',
+      avatarUrl: 'https://example.com/avatar.jpg',
+      bio: 'Test Bio',
+      role: 'Developer',
+      company: 'Test Corp',
+      accentColor: '#123456',
+      links: [
+        {
+          id: 'link1',
+          profileId: '123',
+          platform: 'github',
+          username: 'testgithub',
+          url: '',
+          order: 0,
+        }
+      ],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    (apiFetch as any).mockResolvedValue(mockProfile);
+
+    renderWithRouter('testuser');
+
+    await waitFor(() => {
+      expect(screen.getByText('Test User')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Developer @ Test Corp')).toBeInTheDocument();
+    expect(screen.getByText('Test Bio')).toBeInTheDocument();
+    expect(screen.getByText('@testgithub')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Test User' })).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+  });
+
+  it('renders 404 flow when user is not found', async () => {
+    (apiFetch as any).mockRejectedValue(new Error('User not found'));
+
+    renderWithRouter('unknownuser');
+
+    await waitFor(() => {
+      expect(screen.getByText('Profile not found')).toBeInTheDocument();
+    });
+    
+    expect(screen.getByText('This DevCard has vanished into the digital void.')).toBeInTheDocument();
+    expect(screen.getByText('Return Home')).toBeInTheDocument();
+  });
+});

apps/web/src/pages/CardPage.tsx

@@ -23,13 +23,11 @@ export default function ProfilePage() {
   const [copyStatus, setCopyStatus] = useState<'success' | 'error'>('success');
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
 
   useEffect(() => {
     if (!username) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoading(true);
     apiFetch<PublicProfile>(`/api/u/${username}?source=web`)
       .then((data) => {