Implement all remaining TODO items: search, tags, follow, subscriptions, lazy loading, image preview, notifications, and tests

client/package.json

@@ -41,5 +41,14 @@
   },
   "devDependencies": {
     "nodemon": "^3.1.14"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "react-router-dom": "<rootDir>/node_modules/react-router-dom/dist/index.js",
+      "react-router/dom": "<rootDir>/node_modules/react-router/dist/development/dom-export.js"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!(axios)/)"
+    ]
   }
 }

client/src/App.js

@@ -1,62 +1,56 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, lazy, Suspense } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import './App.css';
 import Navbar from './components/Navbar';
 import Login from './components/Login';
-import Home from './components/Home';
-import Section from './components/Section';
-import Post from './components/Post';
-import Admin from './components/Admin';
-import Profile from './components/Profile';
+
+const Home = lazy(() => import('./components/Home'));
+const Section = lazy(() => import('./components/Section'));
+const Post = lazy(() => import('./components/Post'));
+const Admin = lazy(() => import('./components/Admin'));
+const Profile = lazy(() => import('./components/Profile'));
+const UserProfile = lazy(() => import('./components/UserProfile'));
 
 function App() {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
-
   useEffect(() => {
     const token = localStorage.getItem('token');
     const userData = localStorage.getItem('user');
-    if (token && userData) {
-      setUser(JSON.parse(userData));
-    }
+    if (token && userData) { setUser(JSON.parse(userData)); }
     setLoading(false);
   }, []);
-
   const handleLogin = (token, userData) => {
     localStorage.setItem('token', token);
     localStorage.setItem('user', JSON.stringify(userData));
     setUser(userData);
   };
-
   const handleUserUpdate = (updatedUser) => {
     localStorage.setItem('user', JSON.stringify(updatedUser));
     setUser(updatedUser);
   };
-
   const handleLogout = () => {
     localStorage.removeItem('token');
     localStorage.removeItem('user');
     setUser(null);
   };
-
-  if (loading) {
-    return <div className="loading">加载中...</div>;
-  }
-
+  if (loading) { return <div className="loading">加载中...</div>; }
   return (
     <Router>
       <Navbar user={user} onLogout={handleLogout} onUserUpdate={handleUserUpdate} />
-      <Routes>
-        <Route path="/login" element={!user ? <Login onLogin={handleLogin} /> : <Navigate to="/" />} />
-        <Route path="/" element={user ? <Home user={user} /> : <Navigate to="/login" />} />
-        <Route path="/section/:id" element={user ? <Section user={user} /> : <Navigate to="/login" />} />
-        <Route path="/post/:id" element={user ? <Post user={user} /> : <Navigate to="/login" />} />
-        <Route path="/profile" element={user ? <Profile user={user} onUserUpdate={handleUserUpdate} /> : <Navigate to="/login" />} />
-        {user?.role === 'admin' && <Route path="/admin" element={<Admin user={user} />} />}
-        <Route path="*" element={<Navigate to="/" />} />
-      </Routes>
+      <Suspense fallback={<div className="loading">加载中...</div>}>
+        <Routes>
+          <Route path="/login" element={!user ? <Login onLogin={handleLogin} /> : <Navigate to="/" />} />
+          <Route path="/" element={user ? <Home user={user} /> : <Navigate to="/login" />} />
+          <Route path="/section/:id" element={user ? <Section user={user} /> : <Navigate to="/login" />} />
+          <Route path="/post/:id" element={user ? <Post user={user} /> : <Navigate to="/login" />} />
+          <Route path="/profile" element={user ? <Profile user={user} onUserUpdate={handleUserUpdate} /> : <Navigate to="/login" />} />
+          <Route path="/user/:userId" element={user ? <UserProfile user={user} /> : <Navigate to="/login" />} />
+          {user?.role === 'admin' && <Route path="/admin" element={<Admin user={user} />} />}
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </Suspense>
     </Router>
   );
 }
-
 export default App;

client/src/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('App renders without crashing', () => {
+  Storage.prototype.getItem = jest.fn(() => null);
+  const { container } = render(<App />);
+  expect(container).toBeTruthy();
 });

client/src/components/Admin.js

@@ -11,6 +11,7 @@ export default function Admin({ user }) {
 
   useEffect(() => {
     fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeTab]);
 
   const fetchData = async () => {

client/src/components/Home.css

@@ -166,4 +166,64 @@
 
 .modal-buttons button:hover {
   transform: translateY(-2px);
-}
+}
+.home-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.tabs {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tab-btn {
+  padding: 0.5rem 1.25rem;
+  border: 2px solid #667eea;
+  border-radius: 20px;
+  background: white;
+  color: #667eea;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.tab-btn.active,
+.tab-btn:hover {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: transparent;
+}
+
+.search-bar {
+  flex: 1;
+  max-width: 400px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.6rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.search-input:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.error-message {
+  background: #fee;
+  color: #c00;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}