From a09ab40b4897039cf6558a89fc1b0df25943da21 Mon Sep 17 00:00:00 2001 From: Rob de Rijk Date: Fri, 6 Jun 2025 11:50:11 +0200 Subject: [PATCH 1/2] Initial setup project code. --- package.json | 19 +++++++++ src/App.jsx | 20 ++++++++++ src/api/userApi.js | 13 +++++++ src/components/.DS_Store | Bin 0 -> 6148 bytes src/components/UserInfo.jsx | 11 ++++++ src/components/UserProfileDashboard.jsx | 49 ++++++++++++++++++++++++ src/components/UserStats.jsx | 14 +++++++ src/contexts/AuthContext.jsx | 19 +++++++++ 8 files changed, 145 insertions(+) create mode 100644 package.json create mode 100644 src/App.jsx create mode 100644 src/api/userApi.js create mode 100644 src/components/.DS_Store create mode 100644 src/components/UserInfo.jsx create mode 100644 src/components/UserProfileDashboard.jsx create mode 100644 src/components/UserStats.jsx create mode 100644 src/contexts/AuthContext.jsx diff --git a/package.json b/package.json new file mode 100644 index 0000000..5a4d4bf --- /dev/null +++ b/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" + } +} diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..52fb051 --- /dev/null +++ b/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 ( + + + + } /> + Settings Page} /> + Messages Page} /> + + + + ); +} + +export default App; diff --git a/src/api/userApi.js b/src/api/userApi.js new file mode 100644 index 0000000..34f5415 --- /dev/null +++ b/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(); +} diff --git a/src/components/.DS_Store b/src/components/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 +

User Information

+

Email: {info.email}

+

Location: {info.location}

+ + ); +} diff --git a/src/components/UserProfileDashboard.jsx b/src/components/UserProfileDashboard.jsx new file mode 100644 index 0000000..0fd9057 --- /dev/null +++ b/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
Loading user data...
; + if (error) return
Error: {error}
; + + return ( +
+

Welcome, {userData.name}

+ + + + +
+ ); +} diff --git a/src/components/UserStats.jsx b/src/components/UserStats.jsx new file mode 100644 index 0000000..9709bc7 --- /dev/null +++ b/src/components/UserStats.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +export default function UserStats({ stats }) { + return ( +
+

User Stats

+
    +
  • Posts: {stats.posts}
    • +
  • Followers: {stats.followers}
    • +
  • Following: {stats.following}
    • +
+
+ ); +} diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx new file mode 100644 index 0000000..722884e --- /dev/null +++ b/src/contexts/AuthContext.jsx @@ -0,0 +1,19 @@ +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('mock-token-abc123'); + + // In a real app, this would come from login flow + + return ( + + {children} + + ); +} From 4a18d1b3779d081936d80d2d8291022120af9f49 Mon Sep 17 00:00:00 2001 From: Rob de Rijk Date: Fri, 6 Jun 2025 12:34:46 +0200 Subject: [PATCH 2/2] Going to implement this later. --- src/contexts/AuthContext.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx index 722884e..0c9e7df 100644 --- a/src/contexts/AuthContext.jsx +++ b/src/contexts/AuthContext.jsx @@ -7,9 +7,7 @@ export const AuthContext = createContext({ export function AuthProvider({ children }) { const [userId, setUserId] = useState('12345'); - const [token, setToken] = useState('mock-token-abc123'); - - // In a real app, this would come from login flow + const [token, setToken] = useState(null); // TODO: Provide a valid token after user login return (