React pr

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "user-profile-dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "react-scripts": "5.0.1"
+  }
+}

src/App.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import UserProfileDashboard from './components/UserProfileDashboard';
+import { AuthProvider } from './contexts/AuthContext';
+
+function App() {
+  return (
+    <AuthProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<UserProfileDashboard />} />
+          <Route path="/settings" element={<div>Settings Page</div>} />
+          <Route path="/messages" element={<div>Messages Page</div>} />
+        </Routes>
+      </Router>
+    </AuthProvider>
+  );
+}
+
+export default App;

src/api/userApi.js

@@ -0,0 +1,13 @@
+export async function fetchUserData(userId, token) {
+  const response = await fetch(`https://api.example.com/users/${userId}`, {
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error('API error');
+  }
+
+  return await response.json();
+}

src/components/UserInfo.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function UserInfo({ info }) {
+  return (
+    <section>
+      <h2>User Information</h2>
+      <p>Email: {info.email}</p>
+      <p>Location: {info.location}</p>
+    </section>
+  );
+}

src/components/UserProfileDashboard.jsx

@@ -0,0 +1,49 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '../contexts/AuthContext';
+import { fetchUserData } from '../api/userApi';
+import UserInfo from './UserInfo';
+import UserStats from './UserStats';
+import { Link } from 'react-router-dom';
+
+export default function UserProfileDashboard() {
+  const { userId, token } = useContext(AuthContext);
+  const [userData, setUserData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!userId || !token) {
+      setError('User not authenticated');
+      setLoading(false);
+      return;
+    }
+
+    fetchUserData(userId, token)
+      .then(data => {
+        setUserData(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError('Failed to fetch user data');
+        setLoading(false);
+      });
+  }, [userId, token]);
+
+  if (loading) return <div>Loading user data...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div className="user-profile-dashboard">
+      <h1>Welcome, {userData.name}</h1>
+      <UserInfo info={userData.info} />
+      <UserStats stats={userData.stats} />
+
+      <nav>
+        <ul>
+          <li><Link to="/settings">Settings</Link></li>
+          <li><Link to="/messages">Messages</Link></li>
+        </ul>
+      </nav>
+    </div>
+  );
+}

src/components/UserStats.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function UserStats({ stats }) {
+  return (
+    <section>
+      <h2>User Stats</h2>
+      <ul>
+        <li>Posts: {stats.posts}</li>
+        <li>Followers: {stats.followers}</li>
+        <li>Following: {stats.following}</li>
+      </ul>
+    </section>
+  );
+}

src/contexts/AuthContext.jsx

@@ -0,0 +1,17 @@
+import React, { createContext, useState } from 'react';
+
+export const AuthContext = createContext({
+  userId: null,
+  token: null,
+});
+
+export function AuthProvider({ children }) {
+  const [userId, setUserId] = useState('12345');
+  const [token, setToken] = useState(null); // TODO: Provide a valid token after user login
+
+  return (
+    <AuthContext.Provider value={{ userId, token }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}